ajax async solution

Question

I send several ajax request at a time. But as you know that the result arrival time isn't related with the time you send request. Now, this make a problem to me.

Here's what I face now.

When I click the TAB button made with HTMLElement, it sends ajax call.

If I click the tab just after clicking other tab. two request goes together and I can't know which one could response to me first. but unfortunately last one sometime arrive earlier than the first ajax request.

then, it occur my html markup messy, so my question is is there any way to make ajax call arrive in regular sequence.

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
 });
},

I hope you could understand my English. thank you very much.

• Patrick Jeon: I don't want to use async: false because I can't see loading image..
• sathish: You may try this stackoverflow.com/questions/446594/… Killing the last request and call ajax again

Answer 1

Client side: Have a counter in the client side i.e say ajaxCounter = 0; and on ajax call increment the counter and then send the counter as parameter to the call.

Now as there are two calls made then ajaxCounter is 2

Server side: Always return the ajaxCounter received as the parameter. So for the 1st ajax call the returned will be 1. So for the 2nd ajax call the returned will be 2.

Client side: In the client side check whether the ajaxCounter == counterReturnedFromClient. If it is equal execute the complete method otherwise ignore.

• Patrick Jeon: thanks you ! instead using counter i used ID generate to identifying last ajax call.