Question

我正在开发一个PHP应用程序，它使用ajax加载页面中的组件。更重要的是，假设这些模块/组件按顺序加载，使得如果先前的加载失败，则后续加载也将失败。

换句话说，Page加载，进行ajax调用并接收json编码的响应。如果响应是“SUCCESS”，则进行第二次调用并接收另一个json响应。同样，如果第二个响应是“SUCCESS”，它会进行第三次呼叫，依此类推。这假设发生了大约8次，此时页面被认为是完全加载的。

如果在此加载期间，说第3个请求收到响应“FAIL”，则放弃4-8的请求并抛出错误消息。

我现在实现这一目标的方法是先拨打电话，等待响应并在第一次通话中拨打第二个电话。

将此作为参考，以下是代码的一部分：

$.get(WEB_ROOT+'/process/createKeywords', {}, function(keywordsResponse) {
    $('#createKeywords').parent().children(0).children(0).hide();
    if (keywordsResponse.RESPONSE == "SUCCESS") {
        $('#createKeywords').html(img);
        $('#getTraffic').parent().children(0).children(0).show();

        $.get(WEB_ROOT+'/process/getTraffic', {}, function(trafficResponse) {
            $('#getTraffic').parent().children(0).children(0).hide();
            if (trafficResponse.RESPONSE == "SUCCESS") {
                $('#getTraffic').html(img);
                $('#getGoogleResults').parent().children(0).children(0).show();

                $.get(WEB_ROOT+'/process/getGoogleResults', {}, function(googleScrapeResponse) {
                    $('#getGoogleResults').parent().children(0).children(0).hide();
                    if (googleScrapeResponse.RESPONSE == "SUCCESS") {
                        $('#getGoogleResults').html(img);
                        $('#resortResults').parent().children(0).children(0).show();

你可以想象这可能会变得复杂和丑陋。有没有人对我如何能够完成这样的事情有任何建议？

Answer 1

//setup an object to store the necessary info for each AJAX call
var setup = [
    {
        url      : WEB_ROOT + '/process/createKeywords',

        //the callback will be run before the next AJAX request is made
        callback : function (keywordsResponse) {
            $('#createKeywords').parent().children(0).children(0).hide();
            if (keywordsResponse.RESPONSE == "SUCCESS") {
                $('#createKeywords').html(img);
                $('#getTraffic').parent().children(0).children(0).show();
            }
        }
    },
    {
        url      : WEB_ROOT + '/process/getTraffic',
        callback : function () {
            $('#getTraffic').parent().children(0).children(0).hide();
            if (trafficResponse.RESPONSE == "SUCCESS") {
                $('#getTraffic').html(img);
                $('#getGoogleResults').parent().children(0).children(0).show();
            }
        }
    }
];

//setup a function that recursively calls itself when the current AJAX request comes back successfully
function doAJAX(index) {
    var val = setup[index];
    $.getJSON(val.url, function (serverResponse) {

        //run the specified callback for this AJAX request
        val.callback(serverResponse);

        //now check if the response is "SUCCESS" and make sure that another AJAX request exists in the `setup` object
        if (serverResponse.RESPONSE == 'SUCCESS' && typeof setup[(index + 1)] != 'undefined') {

            //since the last AJAX request was a success and there is another one set, run it now
            doAJAX(index + 1);
        }
    });
}

//run the first AJAX request by passing in zero (index)
doAJAX(0);

这只允许您为连续的AJAX请求设置必要的变量。与callback相关联的url将在下一个AJAX请求运行之前运行。

Answer 2

您可能想要将其设置为操作对象的集合。每个对象都有一个URL，一个预执行，一个后期操作和一个成功操作。设计一个弹出第一个动作的函数，执行它的预执行，然后执行AJAX调用。返回AJAX调用后，它执行后期操作，检查是否成功，如果成功，则执行成功操作并使用剩余任务调用自身。这样的系统非常灵活，可以适应任何数量的任务。

多个aSync ajax调用jquery

2 个答案: