Question

I’ve seen the myriad threads sprawled across the Internet about the following similar code in an AJAX request returning undefined:

AJAX.onreadystatechange = function() {
        if(AJAX.readyState == 4) {
            if(AJAX.status == 200) {
                var response = AJAX.responseText;
                return response;
            }
            else {
                window.alert('Error: ' + AJAX.status);
                return false;
            }
        }
};

I know that I’m supposed to “do something with” responseText like writing it to the HTML. The problem: I don’t have that luxury. This bit of code is intended to be inside of a generic method for running fast AJAX requests that way all the code for making an AJAX request doesn’t have to written out over and over again (~40×) with the chance of a minor problem here or there that breaks the application.

My method HAS to explicitly return responseText “or else.” No writing to HTML. How would I do this? Also, I’d appreciate a lack of plugs for JQuery.

What I’m looking for:

function doAjax(param) {
    // set up XmlHttpRequest
    AJAX.onreadystatechange = function() {
            if(AJAX.readyState == 4) {
                if(AJAX.status == 200) {
                    var response = AJAX.responseText;
                    return response;
                }
                else {
                    window.alert('Error: ' + AJAX.status);
                    return false;
                }
            }
    };
    // send data
}
...
function doSpecificAjax() {
    var param = array();
    var result = doAjax(param);
    // manipulate result
}

Answer 1

Doing a little research I came across this SOF post:
Ajax responseText comes back as undefined

Based on that post, it looks like you may want to implement your ajax method like this:

function doRequest(url, callback) {
    var xmlhttp = ....; // create a new request here

    xmlhttp.open("GET", url, true); // for async
    xmlhttp.onreadystatechange=function() {     
        if (xmlhttp.readyState==4) {
            if (xmlhttp.status == 200) {

                // pass the response to the callback function
                callback(null, xmlhttp.responseText);

            } else {
                // pass the error to the callback function
                callback(xmlhttp.statusText);
            }
        }
    }
    xmlhttp.send(null);
}

Then, you can call that method like this…

doRequest('http://mysite.com/foo', function(err, response) { // pass an anonymous function
    if (err) {
        return "";

    } else {
        return response;
    } 
});

This should return the responseText accurately. Let me know if this doesn’t give you back the correct results.