Question

我一次发送几个ajax请求。但是，如您所知，结果到达时间与您发送请求的时间无关。现在，这给我带来了麻烦。

这就是我现在所面对的。

当我单击使用HTMLElement制作的TAB按钮时，它会发送ajax调用。

如果我在点击其他标签后单击该标签。两个请求在一起，我不知道哪个可以先回应我。但不幸的是，最后一次比第一次ajax请求更早到达。

然后，它发生我的html标记凌乱，所以我的问题是有没有办法让ajax调用按正常顺序到达。

initialize : function() { //<!-- this function call AJAX request
    this.getActivatedDeviceList();
    this.getDeActivatedDeviceList();
    this.getLostOrStolenDeviceList();
    this.getWaitingDeviceList();
},

getActivatedDeviceList : function() {
    var url = "/monitor/device/getActivatedDeviceJson/" + TopMenu.CURRENT_TAB + "/";
    this.loadTemplateAndFillUp(url, "#activatedDeviceTemplate", "#activatedDevice");
},

getDeActivatedDeviceList : function() {
    var url = "/monitor/device/getDeactivatedDeviceJson/" + TopMenu.CURRENT_TAB + "/";
    this.loadTemplateAndFillUp(url, "#deactivatedDeviceTemplate", "#deactivatedDevice");
},

getLostOrStolenDeviceList : function() {
    var url = "/monitor/device/getLostOrStolenDeviceJson/" + TopMenu.CURRENT_TAB + "/";
    this.loadTemplateAndFillUp(url, "#lostOrStolenDeviceTemplate", "#lostOrStolenDevice");
},

getWaitingDeviceList : function() {
    var url = "/monitor/device/getWaitingDeviceJson/" + TopMenu.CURRENT_TAB + "/";
    this.loadTemplateAndFillUp(url, "#waitingDeviceTemplate", "#waitingDevice");
},

loadTemplateAndFillUp : function(url, templateElement, appendElement) {
    $.ajax({ //<!--This ajax call fires upon initialize function
          url : url,
          dataType : 'json',
          beforeSend : function(xhr) {
              $(appendElement).children(".zoom").attr("src", "/monitor/img/icon/loading.gif");
          },
          complete : function(xhr) {
              setTimeout(
                  function() {
                      $(appendElement).children(".zoom").attr("src", "/monitor/img/btn/btn_zoom.png")
                  }, 
                  500
              );

              $(appendElement).find("table.dataBoxTable").tableScroll({height:DeviceManager.TABLE_HEIGHT});
              DeviceManager.columnAutoFit(appendElement);
              DeviceManager.addListenerAndHandler();
          },
          success : function(data) {
              $(templateElement).tmpl(data).appendTo(appendElement); //<!--This jquery template get messed up by ajax arrival order.
          },
          async: true
    });
},

我希望你能理解我的英语。非常感谢你。

Answer 1

客户端： 在客户端有一个计数器，即ajaxCounter = 0; 并在ajax调用中递增计数器，然后将计数器作为参数发送给调用。

现在因为有两个调用，然后ajaxCounter是2

服务器端： 始终返回作为参数接收的ajaxCounter。所以对于第一个ajax调用，返回的将是1。所以对于第二个ajax调用，返回的将是2。

客户端： 在客户端检查ajaxCounter == counterReturnedFromClient。如果相等则执行完整方法，否则忽略。

ajax异步解决方案

1 个答案: