如何使用POST [不使用jquery]从AJAX JavaScript返回结果？

Question

function AJAX(url,data)
{
    var xmlhttp;
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4)
        {
            return xmlhttp.responseText;
        }
    }
    xmlhttp.open("POST",url,true);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlhttp.send(data);
}

var a = AJAX('log.php','username=Leonard&password=asjdklaslkjdalskjdlaksjda');

When the function return it gives me "undefined".

Answer 1

Your function is asynchronous - it doesn't wait for the AJAX call to complete before returning so there's no results to return.

Try this:

function AJAX(url, data, callback, ctx)
{
    var xmlhttp;
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState == 4)
        {
            callback.call(ctx, xmlhttp.responseText);
        }
    }
    xmlhttp.open("POST",url,true);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlhttp.send(data);
}

Note how you now have to supply a "callback function" that'll be invoked when the AJAX completes:

AJAX('log.php','username=Leonard&password=asjdklaslkjdalskjdlaksjda',
    function(result) {
        // do stuff with result
    }
);

EDIT the ctx parameter I added is optional - it's so that you can set what this will be when the callback is invoked. This (no pun intended) will be useful if the callback is a method of an object rather than a standalone function.

Answer 2

When you returns xmlhttp.responseText , you're returning to the onreadystatechange property. Not very useful, is it?

Instead, use the asynchronous behavior to do the following:

function AJAX( url, data, callback ) {

    // Your stuff

    xmlhttp.onreadystatechange = function() {
        if ( xmlhttp.readyState === 4 ) {
            callback( xmlhttp.responseText )
        }
    }

    // Your other stuff

}

Then, you can use it like:

AJAX( url, data, function( responseText ) {
    // use responseText there
} )