javascript - onreadystatechange event with $.ajax - Stack Overflow

admin管理员组

文章数量:1394764

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

Share Improve this question Follow edited May 23, 2017 at 11:45 CommunityBot 111 silver badge asked Sep 17, 2013 at 9:29 Dead.RabitDead.Rabit 1,97511 gold badge2929 silver badges4646 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

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

本文标签： javascriptonreadystatechange event with ajaxStack Overflow