successful AJAX query results in "undefined"-alert...

[mischie]

Hallo,

I seem to have a sneaky little problem in my ajax-based function. The function is supposed to check at the server if the given username/password-combination is valid. On server-side everything is working correctly (Output is either "OK" or "Error") but within the js-application I always receive an alert-box stating "undefined" in the very end.

Could you please take a look at my code and give me a hint where the problem is?

ajaxRequest = function(u,f,m,b,h,s)
{
    alert ('ajaxRequest');
    this.url = u;
    this.wState = f || function() { };
    this.method = m || "GET";
    this.body = b || null;
    this.headers = h || false;
    this.sync = s || true;
    this.abortReq = false;

    this.req = (window.XMLHttpRequest) //Gecko-Browser?
        ?
        new XMLHttpRequest() //Gecko-Browser!
        :
        ((window.ActiveXObject) //Internet Explorer?
        ?
        new ActiveXObject("Microsoft.XMLHTTP") //Internet Explorer!
        :
        false //some Error occured
        );
    this.doRequest = function() //function to perform the request
    {
        alert('doRequest');
        this.req.open(this.method,this.url,this.sync); //Open connection
        if (this.headers) //additional headers given?
        {
            for (var i=0; i<this.headers.length; i+=2)
            {
                this.req.setRequestHeader(
                this.headers[i],this.headers[i+1] //construct keyvalue pairs for the header
                );
            }
        }
        this.req.onreadystatechange = this.wState; //function-call
        (!this.abortReq) ? this.req.send(this.body) : this.req.abort();
        //send request if not aborted somehow
    }
}

/**
*   function to check whether the connection can
*   be established for given username and password
*
*   @param: string username Username
*   @param: string password Password
*/
var checkConnection = function (username, password) {
    xmlhttp = new ajaxRequest(
        'http://url*****',
        function()
        {
            alert('callback-function');
            var r = xmlhttp.req;
            if (r.readyState==4) //transfer complete
            {
                alert('readystate!')
                document.getElementById('test-label').value =
                (r.status == 200) //insert Data in DOM
                    ? r.responseText : r.status+"ERROR"; //Error occured
                alert ('responsetext inserted');
            }
        },
        'POST',                                     //type
        '&username='+username+'&password='+password, //query
        ["Content-Type","application/x-www-form-urlencoded"]    //header
    );

    xmlhttp.doRequest();
}

When I perform the query the debug messages appear in following order:
1.) ajaxRequest
2.) doRequest
3.) callback-function
4.) callback-function
5.) callback-function
6.) readystate!
7.) responsetext inserted (*it actually is updated*)
8.) callback-function
9.) readystate!
10.) responsetext inserted
11.) undefined (appears always)

My question is: Why is the callback-function called again (debug no. 8) and why do I always receive the alert-box "undefined", whithout calling any alert?!

Thanks for your help in advance!

Greets,
mischie

[Chris_F]

I can't say for sure what the problem is, as I never use XMLHttpRequest directly. Have you considered using a library like jQuery or prototype? They make DOM manipulation and AJAX queries much simpler.

[mischie]

Hallo Chris_F,

indeed, Frameworks make DOM-Modifications easier but I am developing an extension for firefox and I do not want to embed any overloaded Framework into it, as my aim is to keep the extension as small as possible. Though, thanks for the hint

Anyone else any idea?