jquery - 等到 $.ajax 完成而不使用 $.when

Question

在我的项目中，我必须使用 jQuery 1.4.x。我有四个异步 $.ajax 函数启动，并且都返回真/假。我需要等待在 IF 中评估它们，因为如果我现在做它们，并不是所有的都完成了射击。

代码（全部在 $(document).ready..:`

    function getHTTPStatusCode200(urlIn) {
        $.ajax({
            url: urlIn,
            complete: function (xhr) {
                return (xhr.status == 200);
            }
        });
    }

其中有四个，我需要做这样的事情：

if(getHTTPStatusCode200(url) && getHTTPStatusCode401(url)){
     alert("It worked.");
}

`

Answer 1

这个$.when概念不难模仿：

var results = [];
function newResult(result) {
    results.push(result);
    if (results.length === 4) {
        alert("It worked.");
    }
}

function getHTTPStatusCode200(urlIn) {
    $.ajax({
        url: urlIn,
        complete: function (xhr) {
            if (xhr.status === 200) {
                newResult(xhr);
            }
        }
    });
}

// your other functions, each calling newResult when done

Answer 2

仅仅因为您没有延迟对象并不意味着您不能使用回调。

function getHTTPStatusCode200(urlIn,callback) {
    $.ajax({
        url: urlIn,
        complete: function (xhr) {
            callback(xhr.status)
        }
    });
}

getHTTPStatusCode200("foo.php",function(status){
    alert(status);
});

Answer 3

一个非阻塞的解决方案和同样快的是通过成功回调异步但按顺序调用它们：

定义您的方法，使其返回 ajax 对象。

function getHTTPStatusCode200(urlIn) {
    return $.ajax({
        url: urlIn
    });
}

然后链接它们：

getHTTPStatusCode200(url1).complete(function(xhr1){
    getHTTPStatusCode200(url2).complete(function(xhr2){
        getHTTPStatusCode200(url3).complete(function(xhr3){
            getHTTPStatusCode200(url4).complete(function(xhr4){
                //all requests have been completed and you have access to all responses
            }
        }
    }
}

以此作为 $.when 的直接替代品：

$.when = function() {
    this.requests = [];
    this.completeFunc;
    this.interval;

    //if you want it to work jsut like $.when use this
    this.requests = arguments;
    //If you want to pass in URLs use this
    //for(var i in arguments) {
    //    this.requests.push($.get(arguments[i]));
    //};

    this.complete = function(func) {
        this.completeFunc = func;
        var when = this;
        this.interval = window.setInterval(function(){
            checkReadyStates(when)
        }, 100);
        return this;
    };

    var checkReadyStates = function(when) {
        var complete = 0;
        for(var i in when.requests) {
            if(when.requests[i].readyState==4) {
                complete++;
            }
        }
        if(complete == when.requests.length) {
            window.clearInterval(when.interval);
            when.completeFunc.apply(when, when.requests);
        }
    };

    return this;
}

function handler(){ 
    console.log('handler');
    console.log(arguments);
    //The arguments here are all of the completed ajax requests
    //see http://api.jquery.com/jQuery.ajax/#jqXHR
}

$.when(xhr1,xhr2,xhr3).complete(handler);
//or
//$.when('index.php','index2.php','index3.php').complete(handler);

现在测试并且工作。

Answer 4

添加async:false，像这样：

    $.ajax({
        url: urlIn,
        async: false,
        complete: function (xhr) {
            return (xhr.status == 200);
        }
    });