• 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
What's the standard way of dealing with the ordering of multiple ajax requests?

#1
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?
Reply

#2
I use an old (2009) patched JavaScript that still works - Ajax Queue Plugin, see the option mode: 'queue'

Demo: http://iridadesign.com/starter-public-ed...ajax-queue

Source: https://github.com/ivantcholakov/starter...x-queue.js
Reply

#3
(05-03-2017, 11: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-ed...ajax-queue

Source: https://github.com/ivantcholakov/starter...x-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.
Reply

#4
Good read and a plugin.

Read - Handle asynchronous non-blocking IO in JavaScript

AjaxQ jQuery Plugin
What did you Try? What did you Get? What did you Expect?

Joined the CodeIgniter Community in 2009.          ( Skype: insitfx )
Reply

#5
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 Smile 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.
God Bless CI Contributors Smile
Reply

#6
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);
    });
});
Reply

#7
(05-03-2017, 06: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.
God Bless CI Contributors Smile
Reply


Digg   Delicious   Reddit   Facebook   Twitter   StumbleUpon  


Users browsing this thread:
1 Guest(s)


  Theme © 2014 iAndrew  
Powered By MyBB, © 2002-2017 MyBB Group.