JavaScript Ajax请求与jQuery $.ajax

Question

注意到：我已经粘贴了更多的代码，而不仅仅是ajax调用，因为代码可能是导致问题的原因之一。但是，我不认为是这样的，所以您最好还是把注意力集中在ajax和jAjax函数上。

还要注意的是，由于在这个问题上有一条评论( upvote)说我的代码很难破译，我很乐意澄清什么需要澄清，如果这可能被证明是找到问题的关键。

谢谢。

事情是这样的。我试图抛弃jQuery，因为我使用的唯一东西是$.ajax()方法，只为一个特性包含一个完整的库(如jQuery )是IMO的疯狂之举。我甚至不需要$.ajax方法的全部功能，因此我编写了自己的ajax函数。

问题是:它不起作用，我似乎不知道为什么。我试图将对象发送到服务器(特别是:控制器中的ajaxAction -使用Zend )。下面是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":true，“控制器”：“索引”，“动作”：“ajax”，“模块”：“默认”，“标识”：{}，“数据”：{“foo”：“bar”}参数: datafoo 'bar‘和Source: data%5Bfoo%5D=Bar ( FB控制台中的POST选项卡)标题:application/x form-urlencoded；charset=udf-8

所有这些都被发送到以下url：http://www.foo.bar/index/ajax?data%5Bfoo%5D=bar

但是，

1. 这样做不起作用：

[]{"ajax":true，“控制器”：“index”，"action":"ajax"，“模块”：“默认”，“标识”：{}是FB: JSON data：{foo:'Bar'} source：{"data":{"Foo":"Bar"}}中的响应POST选项卡: json；charset=UTF-8

1. This是最大的：完整的请求url与案例1中的url相同，头也是一样，但是当我查看FB控制台中的POST选项卡(检查请求)时，我能找到的唯一区别是：

案例1:参数: datafoo 'bar‘来源: data%5Bfoo%5D=Bar

在本例中，我看不到参数部分，只有:源: data%5Bfoo%5D=Bar

1. 和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对象呢？更重要的是:为什么第三种情况不起作用？jQuery在做我不知道的事情？这是什么，使案件1工作，但不是案件3？

PS:这可能无关紧要，但在疯狂的时刻，我尝试将以下内容添加到ajax函数中：ajax函数，但我注意到，在发出的标题中，Connection仍然被设置为保持活动。也许这给了某人一个关于哪里出了问题的线索？

提前感谢

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 :-)