I want to use the onreadystatechange event from the (underlying) XMLHttpRequest of JQuery's (2.0.2) $.ajax(...) to fire synchronous ajax requests so I can show an accurate status indication to the end user for long running requests. But it seems this functionality has been removed from the latest version of JQuery (see here), making spinners with asynchronous web requests the only option for representing the activity to the user.

using XMLHttpRequest I would do something like the following (though I still wan't to use JQuery), is there still a way in JQuery to gain access to a readystate change function? Is there perhaps a plugin that exposes the onreadystatechange event?

function pad(width, string, padding) { // from stackoverflow/a/15660515/424963 
  return (width <= string.length) ? string : pad(width, string + padding, padding)
}

$(function(){
    $("<div>Loading</div>").appendTo($("body"));
    var anticache = "?anticache=" + new Date().getTime();

    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4){
            $("div").html("Done");
        }
        else  {
            $("div").html("Loading" + pad(xhr.readyState, "", "."));
        }
    };

    xhr.open("POST", "jsfiddle" + anticache, true );
    xhr.send();    
});

JSFiddle

I want to use the onreadystatechange event from the (underlying) XMLHttpRequest of JQuery's (2.0.2) $.ajax(...) to fire synchronous ajax requests so I can show an accurate status indication to the end user for long running requests. But it seems this functionality has been removed from the latest version of JQuery (see here), making spinners with asynchronous web requests the only option for representing the activity to the user.

using XMLHttpRequest I would do something like the following (though I still wan't to use JQuery), is there still a way in JQuery to gain access to a readystate change function? Is there perhaps a plugin that exposes the onreadystatechange event?

function pad(width, string, padding) { // from stackoverflow./a/15660515/424963 
  return (width <= string.length) ? string : pad(width, string + padding, padding)
}

$(function(){
    $("<div>Loading</div>").appendTo($("body"));
    var anticache = "?anticache=" + new Date().getTime();

    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4){
            $("div").html("Done");
        }
        else  {
            $("div").html("Loading" + pad(xhr.readyState, "", "."));
        }
    };

    xhr.open("POST", "jsfiddle" + anticache, true );
    xhr.send();    
});

JSFiddle

• javascript
• jquery
• ajax
• xmlhttprequest

1 Answer 1

do you mean something like this:

var _orgAjax = jQuery.ajaxSettings.xhr;
jQuery.ajaxSettings.xhr = function () {
    var xhr = _orgAjax();
    xhr.onreadystatechange = function() {
        //you can log xhr.readystate here
        if( xhr.readyState == 4 ) {
             $("div").html("Done");
        }
    }
    return xhr;
};
$(function(){
    $("<div>Loading</div>").appendTo($("body"));
    var anticache = "?anticache=" + new Date().getTime();
    $.ajax({
        url: "http://fiddle.jshell",
        error: function() {
            console.log("error");
        }
    });
});

Demo:: jsFiddle