Question

NOTE: I’ve pasted more code than just the ajax calls, on the off chance that code is (part of) what’s causing the problem. I don’t think it is, however, so you’re probably better off focussing on the ajax and jAjax functions a bit further down.
Also note that, since there’s a comment (with upvote) on this question saying my code is hard to decipher, I’d happily clarify what needs clarifying if that could prove to be the key in finding the problem.
Thanks.

---

Here’s the thing. I’m trying to ditch jQuery, since the only thing I use is the $.ajax() method, and including an entire lib like jQuery for just 1 feature is IMO crazy. I don’t even need the full functionality of the $.ajax method anyway, hence I wrote my own ajax function.

The problem is: it’s not working, and I can’t seem to figure out why. I’m trying to send objects to the server (specifically: ajaxAction in the controller – using Zend FW). Below is the javascript code, and a summary of what the firebug console tells me.

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);
        }
    });
}

Four ways in which I’ve tried to make the Ajax request:

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());: This works just fine:

   []{“ajax”:true,”controller”:”index”,”action”:”ajax”,”module”:”default”,”identity”:{},”data”:{“foo”:”Bar”}}
   Parameters: data[foo] ‘bar’ And Source: data%5Bfoo%5D=Bar (from POST tab in FB console)
   Header: application/x-www-form-urlencoded; charset=UTF-8
   All of this was sent to the following url: http://www.foo.bar/index/ajax?data%5Bfoo%5D=bar

2. This doesn’t work, however:

   []{“ajax”:true,”controller”:”index”,”action”:”ajax”,”module”:”default”,”identity”:{}} is the response
   POST tab in FB: JSON data: {foo:’Bar’} source: {“data”:{“Foo”:”Bar”}} (but same url is case 1)
   Header: json; charset=UTF-8

3. This is the big one: the full request url is identical to url from case 1, as are the headers BUT when I look at the POST tab in the FB console (inspect the request) This is the only difference I can find:

   case 1: Parameters: data[foo] ‘bar’ Source: data%5Bfoo%5D=Bar
   In this case, I can’t see the Parameters section, only: Source: data%5Bfoo%5D=Bar

4. Identical to case2, except for the url, which I think I forgot to pass through encodeURI. This case is less important for now. I think/hope I’ll get this working the moment I figure out what’s wrong with case 3.

In all 4 cases, the request is sent, and received. The controller action is as follows:

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??');
    }
}

Since I’m receiving a JSON string, I’m sure the request is posted, and has the correct XMLHttpRequest header. Why then, can’t I post JSON objects? Even more to the point: why is case 3 not working? What is jQuery doing that I’m not aware of? What is it, that makes case 1 to work, but not case 3?

PS: It might be irrelevant, but in a moment of madness I tried adding this: ret.setRequestHeader('Connection','close'); to the ajax function, but I noticed that, in the header that got sent out, Connection was set to keep-alive all the same. Perhaps this gives someone a clue as to what went wrong?

Thanks in advance

Answer 1

In case anybody wonders what was wrong:

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

Should have been “x-www-form-urlencoded”, with a “d” in the end:

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

sending a formalized object is now working, and I can get rid of jQuery 🙂