Question

how can i know the readystates of an ajax request through jquery ?
In general, without using jquery, we will send an ajax request like this:

http.open("POST", url, true);

http.onreadystatechange = function() { 
    if(http.readyState == 4 && http.status == 200) {
        // do something
    }
}

So i can easily track the readystate value from 1 to 4 using the above code, and perform necessary action like showing a loading icon when readystate is 1.

But through a jquery ajax call, how can i track the readystate values ?

I am making an ajax call through jquery like this:

$.post('ajax/test.html', function(data) {
  $('.result').html(data);
});

Answer 1

Have a look at the documentation of $.ajax. You have the possibility to pass different callbacks (maybe not for evert “ready state” but it is enough for an indicator):

beforeSend(jqXHR, settings) Function
A pre-request callback function that can be used to modify the jqXHR (in jQuery 1.4.x, XMLHTTPRequest) object before it is sent. Use this to set custom headers, etc. The jqXHR and settings maps are passed as arguments. This is an Ajax Event. Returning false in the beforeSend function will cancel the request. As of jQuery 1.5, the beforeSend option will be called regardless of the type of request.

success(data, textStatus, jqXHR) Function, Array
A function to be called if the request succeeds. The function gets passed three arguments: The data returned from the server, formatted according to the dataType parameter; a string describing the status; and the jqXHR (in jQuery 1.4.x, XMLHttpRequest) object. As of jQuery 1.5, the success setting can accept an array of functions. Each function will be called in turn. This is an Ajax Event.

error(jqXHR, textStatus, errorThrown) Function
A function to be called if the request fails. The function receives three arguments: The jqXHR (in jQuery 1.4.x, XMLHttpRequest) object, a string describing the type of error that occurred and an optional exception object, if one occurred. Possible values for the second argument (besides null) are "timeout", "error", "abort", and "parsererror". This is an Ajax Event. As of jQuery 1.5, the error setting can accept an array of functions. Each function will be called in turn. Note: This handler is not called for cross-domain script and JSONP requests.

complete(jqXHR, textStatus) Function, Array
A function to be called when the request finishes (after success and error callbacks are executed). The function gets passed two arguments: The jqXHR (in jQuery 1.4.x, XMLHTTPRequest) object and a string categorizing the status of the request ("success", "notmodified", "error", "timeout", "abort", or "parsererror"). As of jQuery 1.5, the complete setting can accept an array of functions. Each function will be called in turn. This is an Ajax Event.

So the best idea would be to show the indicator in the callback passed to beforeSend and hide it in complete.

---

Example:

So you would have to rewrite your code as:

$.ajax({
  url: 'ajax/test.html',
  type: 'POST',
  beforeSend: function() {
       // show indicator
  },
  complete: function() {
      // hide indicator
  },
  success: function(data) {
      $('.result').html(data);
  }
});

although I don’t understand why you use POST as your are not sending any data (at least in your example code).