jQuery $.ajax and readyStates

Question

How to call the Ajax ready states on the jQuery $.ajax method?

Bonehead

What for exactly? $.ajax brings its own success / error / complete callbacks, they should serve all your needs – Acyclic

Hi, I want the readyState=1 and readyState=4 what are the equalities with jQuery ones? – Bonehead

Answer 1

$.ajax() returns the XmlHttpRequest object, so if you really want to access it as the state changes, you can do this:

var xhr = $.ajax({ ... });
xhr.onreadystatechange = function() { alert(xhr.readyState); };

But the built-in callbacks should be all you need for most uses, particularly success and complete.

To do things before the request fires, use beforeSend, or more appropriately for most cases, the .ajaxStart() and .ajaxStop() events...for example to show a loading message whenever any ajax activity is going on.

Nares

Note: This code works only until jQuery 1.4.4 as with 1.5 the ajax module has been completely rewritten. I don't know a solution in recent versions (I want it to test latency timing). – Androgynous

Wouldn't this have a Race Condition -- OR -- is jQuery using a promise? – Florinda

Answer 2

Method, tested with jQuery 2.0.2:

$.ajax({
    beforeSend: function (jqXHR, settings) {
        var self = this;
        var xhr = settings.xhr;
        settings.xhr = function () {
            var output = xhr();
            output.onreadystatechange = function () {
                if (typeof(self.readyStateChanged) == "function") {
                    self.readyStateChanged(this);
                }
            };
            return output;
        };
    },
    readyStateChanged: function (xhr) {
        if (xhr.readyState == 1) {
            /* Connected! Do something */
        }
    },
    url: "..."
});

Basically, what I needed was a callback after readyState becomes 1 (Connected), which, in my case, was useful when implementing long polling "push" notifications with jQuery.

Compressed

Answer 3

You should be able to get all you need by setting callbacks for the success, error, and complete options in the object you pass into the ajax() method. Take a look at the documentation:

http://api.jquery.com/jQuery.ajax/

Basically, it works like this:

$.ajax({
    url: 'ajax/test.html',
    success: function(data) {
        alert('Load was performed.');
    },
    error: function() {alert("error occurred.")},
    complete: function() {alert("ajax complete.")}
});

You can see the docs for exactly what parameters you have access to in the callback functions.

Beeck

What im looking for is the readyState one, like it is when you use plain Js, you use this readyState to write something like "loading..." just before your markup is populated, jQuery success, error, or complete dont seem to work for what I want.Or do you have to just fake it with jQuery? – Bonehead

@tada The jQuery method abstracts away the old ways of checking for readystate changes. Why not just show your loading dialog before you make the ajax call, and hide it in the callback functions? This is what I do and logically makes much more sense than the plain JS way. – Beeck

@tada You're very welcome. But seriously, don't stick to the old way just because it appears easier. Try the jQuery method for a while. – Beeck