多个aSync ajax调用jquery

时间:2012-03-01 20:49:02

标签: php jquery ajax

我正在开发一个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();

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

2 个答案:

答案 0 :(得分: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请求运行之前运行。

答案 1 :(得分:1)

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