jQuery $.ajax and readyStates

Question

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

What for exactly? `$.ajax` brings its own `success` / `error` / `complete` callbacks, they should serve all your needs — Pekka, Nov 05 '10 at 16:31
Hi, I want the readyState=1 and readyState=4 what are the equalities with jQuery ones? — tetris, Nov 05 '10 at 16:35

score 5 · Answer 1 · answered Dec 21 '14 at 19:39

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.

score 5 · Accepted Answer · answered Nov 05 '10 at 16:45

5

$.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.

answered Nov 05 '10 at 16:45

Nick Craver

623,446
136
1,297
1,155

1

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). – mgutt Aug 11 '12 at 10:31
Wouldn't this have a *Race Condition* -- OR -- is jQuery using a promise? – Cody Feb 09 '15 at 22:18

score 1 · Answer 3 · answered Nov 05 '10 at 16:41

1

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.

answered Nov 05 '10 at 16:41

treeface

13,270
4
51
57

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? – tetris Nov 05 '10 at 16:46
@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. – treeface Nov 05 '10 at 16:50
@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. – treeface Nov 05 '10 at 17:18

jQuery $.ajax and readyStates

3 Answers3

Linked