+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: General (https://forum.codeigniter.com/forumdisplay.php?fid=1)
+--- Forum: Lounge (https://forum.codeigniter.com/forumdisplay.php?fid=3)
+--- Thread: What's the standard way of dealing with the ordering of multiple ajax requests? (/showthread.php?tid=67977)
What's the standard way of dealing with the ordering of multiple ajax requests? - skunkbad - 05-03-2017
I've never had to code up some functionality that created a situation where there were multiple ajax requests that need to have responses in order that they were requested. In this particular case, it would be acceptable an out of order response was dropped. I for sure want to retain async behavior, and was wondering if the following idea is good, or if there is a better way:
1) Do ajax request. (using jQuery) Ajax request is assigned a number, and number is posted in request, and responses have the same number.
2) If a response comes back and the number is greater than the last known number to come back, it's considered to take action. If the number is not greater than the last known number to come back, nothing happens.
This kind of behavior is something that could be used with a (keyup|change|blur) type event. Fetching of common search terms, password strength values, etc.
Seems like a simple concept, but is there something better? Is there something else that I need to be thinking about?
RE: What's the standard way of dealing with the ordering of multiple ajax requests? - ivantcholakov - 05-03-2017
I use an old (2009) patched JavaScript that still works - Ajax Queue Plugin, see the option mode: 'queue'
Demo: http://iridadesign.com/starter-public-edition-4/www/playground/ajax-queue
Source: https://github.com/ivantcholakov/starter-public-edition-4/blob/v4.3.2/www/assets/js/lib/jquery-ajax-queue/jquery-ajax-queue.js
RE: What's the standard way of dealing with the ordering of multiple ajax requests? - skunkbad - 05-03-2017
(05-03-2017, 10:31 AM)ivantcholakov Wrote: I use an old (2009) patched JavaScript that still works - Ajax Queue Plugin, see the option mode: 'queue'
Demo: http://iridadesign.com/starter-public-edition-4/www/playground/ajax-queue
Source: https://github.com/ivantcholakov/starter-public-edition-4/blob/v4.3.2/www/assets/js/lib/jquery-ajax-queue/jquery-ajax-queue.js
Thanks. It's an interesting bit of code, but comments show that it delays until previous response is returned, and I'm not so sure I care about that. I'm still liking my idea.
RE: What's the standard way of dealing with the ordering of multiple ajax requests? - InsiteFX - 05-03-2017
Good read and a plugin.
Read - Handle asynchronous non-blocking IO in JavaScript
AjaxQ jQuery Plugin
RE: What's the standard way of dealing with the ordering of multiple ajax requests? - marksman - 05-03-2017
you can disable async if you will be using loop to execute your ajax request in order just set async: false to your $.ajax, its the easiest way but its a very bad idea. If you want to work with asynchronous ajax request forget about loops
use callback instead. store your series of reques inside the array in order of your choice.Code:
var aSeriesOfRequest = [
{
fruit: 'apple',
color: 'red'
},
{
fruit: 'banana',
color: 'yellow'
},
{
fruit: 'carrots',
color: 'orange'
}
];
var iRequestLength = aSeriesOfRequest.length;
var onRequest = function(oCallback, iIndex = 0) {
if (iIndex < iRequestLength) {
$.ajax({
method: 'POST',
request: aSeriesOfRequest[iIndex],
success: function() {
oCallback(oCallback, iIndex++);
}
});
}
}
onRequest(onRequest);I'm not sure if its a valid javascript for the reason that i'm on mobile and doesnt have a good text editor, im not sure jquery's ajax request just read the docs to make sure.
My point here is just make function that calls it self if the array length is not reach. Hope you got it.
RE: What's the standard way of dealing with the ordering of multiple ajax requests? - skunkbad - 05-03-2017
I ended up doing this, which was my original idea:
Code:
(function($){
var namespace = {
request_number: 0,
response_number: 0,
doTheThing: function(score){
console.log(score);
},
checkServer: function(str) {
var request_number = funcs.get_request_number();
$.ajax({
type: 'post',
cache: false,
url: '/check',
data: {
'str': str,
'request_number': request_number
},
dataType: 'json',
success: function(response){
if(response.score && response.number){
var response_number = parseInt(response.number);
var response_score = parseInt(response.score);
if(response_number > funcs.response_number){
funcs.response_number = response_number;
funcs.doTheThing(response_score);
}
}
}
});
},
get_request_number: function(){
funcs.request_number++;
return funcs.request_number;
}
};
window.funcs = ( window.funcs ) ? $.extend( window.funcs, namespace ) : namespace;
})(this.jQuery);
$(document).ready(function(){
$('#field').on('keyup change blur', function(e){
var str = $(this).val();
funcs.checkServer(str);
});
});RE: What's the standard way of dealing with the ordering of multiple ajax requests? - marksman - 05-03-2017
(05-03-2017, 05:08 PM)skunkbad Wrote: I ended up doing this, which was my original idea:
Code:(function($){
var namespace = {
request_number: 0,
response_number: 0,
doTheThing: function(score){
console.log(score);
},
checkServer: function(str) {
var request_number = funcs.get_request_number();
$.ajax({
type: 'post',
cache: false,
url: '/check',
data: {
'str': str,
'request_number': request_number
},
dataType: 'json',
success: function(response){
if(response.score && response.number){
var response_number = parseInt(response.number);
var response_score = parseInt(response.score);
if(response_number > funcs.response_number){
funcs.response_number = response_number;
funcs.doTheThing(response_score);
}
}
}
});
},
get_request_number: function(){
funcs.request_number++;
return funcs.request_number;
}
};
window.funcs = ( window.funcs ) ? $.extend( window.funcs, namespace ) : namespace;
})(this.jQuery);
$(document).ready(function(){
$('#field').on('keyup change blur', function(e){
var str = $(this).val();
funcs.checkServer(str);
});
});
same concept different implimentation.