JavaScript Ajax請求與jQuery $ .ajax

Question

注意 ：我粘貼了更多的代碼，而不僅僅是ajax調用，因為代碼是（部分）導致問題的原因。 但是，我認為不是這樣，所以你可能會更好地關注ajax和jAjax功能。
另請注意，由於此問題上有一條評論（有upvote），說我的代碼難以破譯，我很樂意澄清需要澄清的是，這是否可以證明是找到問題的關鍵。
謝謝。

---

這就是事情。 我試圖拋棄jQuery，因為我唯一使用的是$.ajax()方法，並且包括像jQuery一樣的完整lib只有1個功能是IMO瘋了。 我甚至不需要$.ajax方法的全部功能，因此我編寫了自己的ajax函數。

問題是：它不起作用，我似乎無法弄清楚原因。 我正在嘗試將對象發送到服務器（具體來說：控制器中的ajaxAction - 使用Zend FW）。 下面是javascript代碼，以及firebug控制台告訴我的內容摘要。

if (!String.prototype.trim)
{
    String.prototype.trim = function()
    {
        "use strict";
        return this.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
    };
}

function getUrl(action,controller)
{
    var base,uri;
    base = window.location.href.replace('http://'+window.location.host,'');
    if (base.length > 1)
    {
        base = base.substring(1,base.length).split('/');
        controller = controller || base[0];
        base[0] = controller || base[0];
        base[1] = action || base[1];
        return '/'+base.join('/');
    }
    controller = controller || 'index';
    action = action || 'ajax';
    return base+controller+'/'+action;
}

function formalizeObject(obj,recursion)
{
    recursion = recursion || false;
    if (typeof obj !== 'object')
    {
        throw new Error('no object provided');
    }
    var ret = '';
    for (var i in obj)
    {
        if (!obj.hasOwnProperty(i) || typeof obj[i] === 'function')
        {
            continue;
        }
        if (recursion)
        {
            ret +='['+i+']';
        }
        else
        {
            ret += (ret.length > 0 ? '&' : '') + i.toString(); 
        }
        if (typeof obj[i] === 'object')
        {
            ret += formalizeObject(obj[i],true);
            continue;
        }
        ret += '='+obj[i].toString();
    }
    if (recursion)
    {
        return ret;
    }
    return encodeURI(ret);
}

function success()
{
    if (this.readyState===4 && this.status===200)
    {
        console.log(this.responseText);
    }
}

function ajax(str,url,method,json)
{
    var ret;
    json = json || false;
    str = str || {};
    method = method || 'POST';
    url = url || getUrl();
    str = 
    str = (typeof str === 'object' ? str : {data:str});
    try
    {
        ret = new XMLHttpRequest();
    }
    catch (error)
    {
        try
        {
            ret= new ActiveXObject('Msxml2.XMLHTTP');
        }
        catch(error)
        {
            try
            {
                ret= new ActiveXObject('Microsoft.XMLHTTP');
            }
            catch(error)
            {
                throw new Error('no Ajax support?');
            }
        }
    }
    if (typeof ret !== 'object')
    {
        throw new Error('No Ajax, FFS');
    }
    ret.open(method, url, true);
    ret.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
    ret.setRequestHeader('Content-type', (json ? 'application/json' : 'application/x-www-form-urlencode'));
    ret.onreadystatechange = success;
    ret.send((json ? JSON.stringify(str) : formalizeObject(str)));
    return true;
}

function jAjax(str,url)
{
    $.ajax(
    {
        url : url,
        data: str,
        type: 'POST',
        success: function(res)
        {
            console.log(res);
        }
    });
}

我試圖發出Ajax請求的四種方式：

jAjax({data:{foo:'bar'}},getUrl());//1
jAjax({data:{foo:'bar'}},getUrl(),true);//2
ajax({data:{foo:'bar'}},getUrl());//3
ajax({data:{foo:'bar'}},getUrl(),true);//4

1. jAjax({data:{foo:'bar'}},getUrl()); ：這很好用：

   [] { “AJAX”：真， “控制器”： “索引”， “動作”： “AJAX”， “模塊”： “默認”， “同一性”：{}， “數據”：{ “foo” 的：”欄“}}參數：data [foo]'bar'和來源：data％5Bfoo％5D = Bar（來自FB控制台中的POST選項卡）標題：application / x-www-form-urlencoded; 字符集= UTF-8
   所有這些都發送到以下網址： http ： //www.foo.bar/index/ajax？ data = 5Bfoo％5D = bar

2. 但是，這不起作用：

   [] {“ajax”：true，“controller”：“index”，“action”：“ajax”，“module”：“default”，“identity”：{}}是FB中的響應POST標簽：JSON數據：{foo：'Bar'}來源：{“data”：{“Foo”：“Bar”}}（但相同的網址是案例1）標題：json; 字符集= UTF-8

3. 這是一個很大的問題 ：完整的請求url與案例1中的url相同，當我在FB控制台中查看POST選項卡時檢查標題但是這是我能找到的唯一區別：

   案例1：參數：data [foo]'bar'來源：data％5Bfoo％5D = Bar
   在這種情況下，我只能看到參數部分：源：數據％5Bfoo％5D = Bar

4. 與case2相同，除了url，我想我忘了通過encodeURI 。 這種情況現在不那么重要了。 我想/希望在我弄清楚案例3有什么問題的時候，我會讓這個工作。

在所有4種情況下，請求都被發送和接收。 控制器動作如下：

public function ajaxAction()
{
    $this->_helper->layout->disableLayout();
    $this->getHelper('viewRenderer')->setNoRender();
    $this->_helper->getHelper('AjaxContext')->addActionContext( 'ajax' , 'json' )
                                            ->initContext('json');
    if($this->getRequest()->isPost() && $this->getRequest()->isXmlHttpRequest())
    {
        echo json_encode(array_merge(array('ajax'=>true),$this->_getAllParams()));
    }
    else
    {
        throw new Exception('no ajax call made??');
    }
}

由於我收到了一個JSON字符串，我確信該請求已發布，並且具有正確的XMLHttpRequest標頭。 為什么然后，我不能發布JSON對象？ 更重要的是：為什么案例3不起作用？ 什么是jQuery做我不知道的事情？ 是什么讓案例1起作用，而不是案例3？

PS：這可能是無關緊要的，但在瘋狂的時刻我嘗試添加這個： ret.setRequestHeader('Connection','close'); 到了ajax函數，但是我注意到，在發送出來的標題中， Connection被設置為keep-alive都是一樣的。 也許這會讓某人知道出了什么問題？

提前致謝

Answer 1

如果有人想知道什么是錯的：

ret.setRequestHeader('Content-type', 'application/x-www-form-urlencode');

應該是“x-www-form-urlencoded”，最后帶有“d”：

ret.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

發送一個正式的對象現在正在工作，我可以擺脫jQuery :-)