Asynchronous AJAX query with jQuery

Question

how can I do the following by means of jQuery?

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 && xmlhttp.status == 200) {
        document.getElementByID('statusDisplay').innerHTML = xmlhttp.responseText; // show loaded content
    } else if (xmlhttp.readyState >= 1 && xmlhttp.status == 200) /* if(xmlhttp.readyState>=2 && xmlhttp.status==200) */ {
        document.getElementByID('statusDisplay').innerHTML = '<img src="ajax_load.gif" />'; // show ajax loading image
    }
}
xmlhttp.open("GET", "path/to/file.php", true);
xmlhttp.send();

What I am mainly interested in is how I can retrieve the readyStatea and status and how I can retrieve the response text from within those functions (more or less like this):

$.ajax({url: 'path/to/file.php', async: true, success: function(){
    // how can I get the responseText here?
}, whileLoading: function(){
    // does such a parameter actually exist?
}});

Thanks in advance!

Answer 1

jQuery does not support a "native" (jQuery'ish) access to readyStates.

There is no interactive callback for instance which could represent a readyState===3.

Anyway, you have access to the responseText in the success callback from .ajax()

$.ajax({
   url:      'some.pl',
   dataType: 'text',
   type:     'GET',
   success:  function(data){
      // data represents xhr.responseText here
   }
});

Anyway, the .ajax() method returns the XMLHttpRequest which you can access if necessary.

var myxhr = $.ajax({});
myxhr._onreadystatechange = myxhr.onreadystatechange;

myxhr.onreadystatechange = function(){
    myxhr._onreadystatechange();
    if(myxhr.readyState === 3) {}  // or whatever
};

This is a possible workaround of that issue. But in general you will have all data and information you need within the ajax event callbacks.
Furthermore is the XMLHttpRequest object passed into a lot of callbacks, like beforeSend, error and success.

See http://api.jquery.com/jQuery.ajax/ for further details.