Menu
recently I developed a project were I send multiple ajax requests at a single aspx page. I also put a timer were this request is happening with interval 5 seconds. Everything seems to work fine until suddenly the responses mix up. I know that I could do the same thing with one request, but I wonder why this is happening. I looked around the internet but I can't find any solution yet. I now actually adopted this style of coding like making one request with multiple results, but I wonder and I really want to know how to make multiple ajax request were the response will not mix up. This is my sample Code:
$(document).ready(function () {
var a = setInterval("request1()", 5000);
var b = setInterval("request2()", 5000);
});
function request1() {
$.ajax({
url: 'ajaxhandler.aspx?method=method1' ,
beforeSend: function (xhr) {
xhr.overrideMimeType('text/plain; charset=utf-8');
},
success: function (data) {
alert(data);
}
});
}
function request2() {
$.ajax({
url: 'ajaxhandler.aspx?method=method2' ,
beforeSend: function (xhr) {
xhr.overrideMimeType('text/plain; charset=utf-8');
},
success: function (data) {
alert(data);
}
});
}
543
There is a requirement to make multiple AJAX calls parallelly to fetch the required data and each successive call depends on the data fetched in its prior call. Since AJAX is asynchronous, one cannot control the order of the calls to be executed.
To iterate through the response, there is a callback function attached to it. This callback function gets executed once both the Ajax requests are finished. In case where multiple Deferred objects are passed to $. when() , it takes the response returned by both calls, and constructs a new promise object.
It is worth noting that browsers can generally only handle 6 ajax requests at a time, this may catch you out.
}); If isLoading is false, the AJAX call starts, and we immediately change its value to true. Once the AJAX response is received, we turn the value of that variable back to false, so that we can stop ignoring new clicks.
If you need the requests to happen in order, you shouldn't be using AJAX (the first "a" is for "asynchronous").
To address this you can call request2() in the callback for the "success" of your first request.
function request1() {
$.ajax({
url: 'ajaxhandler.aspx?method=method1' ,
beforeSend: function (xhr) {
xhr.overrideMimeType('text/plain; charset=utf-8');
},
success: function (data) {
request2();
}
});
}
This is not JavaScript fault, it's messed up because you are calling a single page in same time. If you had two server side page for your two AJAX files then it would be fine. Try to create two different aspx file for you different methods to have them called together.
But that would not be a good practice. Why don't sent the method as an parameter and have a condition in your aspx file for different methods? Then if you have two (or more) methods used at the same time, then simply send both to server with an single call. You will save a HTTP header and call delay for your call.
function requestAll() {
$.ajax({
url: 'ajaxhandler.aspx' ,
data: ['method1', 'method2'],
beforeSend: function (xhr) {
xhr.overrideMimeType('text/plain; charset=utf-8');
},
success: function (data) {
alert(data);
}
});
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
