$ .ajax的onreadystatechange事件

Question

我想使用onreadystatechange来自XMLHttpRequestJQuery(2.0.2)的(底层)的事件$.ajax(...)来触发同步ajax请求,这样我就可以向最终用户显示长时间运行请求的准确状态指示.但似乎这个功能已从最新版本的JQuery中删除(参见此处),使具有异步Web请求的微调器成为向用户表示活动的唯一选择.

使用XMLHttpRequest我会做类似以下的事情(虽然我仍然不想使用JQuery),JQuery中是否还有一种方法可以访问readystate更改功能？是否有一个暴露onreadystatechange事件的插件？

function pad(width, string, padding) { // from stackoverflow.com/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.net" + anticache, true );
    xhr.send();    
});

的jsfiddle

Answer 1

你的意思是这样的:

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.net",
        error: function() {
            console.log("error");
        }
    });
});

演示:: jsFiddle