Cara Buat Ajax Agar Mengantri (Queue)

Pernah tidak menganalisis proses ajax ?? Kalau saya analisis, proses ajax itu rebutan jika kita lakukan secara simultan bareng-bareng. Siapa yang cepat, dia masuk duluan. Situasi ini memang wajar, namun beberapa kasus proses ajax ini bermasalah terutama saat network suka putus nyambung, dan ajax bertipe “Cross Domain”. Permasalahan ini akan muncul dan client kamu gak mau tahu bagaimana agar proses get resource dengan ajax berhasil.

Saya coba cari tahu, kenapa sering sekali mendapat callback error dari ajax. Di debug phpnya, di liat waktu callback nya dengan firebug dan akhirnya saya dapatkan point penting yaitu “Browser hanya bisa menerima Ajax 2 kali request secara bersamaan” dan sisanya nge-callback error. Point itu lalu saya cari, dan ketemu. Bisa baca di artikel ini (http://www.w3.org/Protocols/rfc2616/rfc2616-sec8.html#sec8.1.4).

Solusinya apa buat handle agar ajax yang kita akses simultan bareng-bareng tidak callback error ?? Saya pikir, baiknya si ajax kita antri saja. Jalankan proses ajax satu-satu, walaupun sebenernya saat klik ajax banyak, tapi di belakang ada sistem / proses antrian. Konsep FIFO (First In First Out).

Bagaimana cara agar ajax kita ngantri ? Yaa..banyak orang baik di internet. Ada yang buat code buat ngehandle proses antrian ajax. Kamu bisa mampir ke alamat situs ini (http://gnarf.net/2011/06/21/jquery-ajaxqueue/).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
/*
* jQuery.ajaxQueue - A queue for ajax requests
*
* (c) 2011 Corey Frang
* Dual licensed under the MIT and GPL licenses.
*
* Requires jQuery 1.5+
*/

(function($) {
 
// jQuery on an empty object, we are going to use this as our Queue
var ajaxQueue = $({});
 
$.ajaxQueue = function( ajaxOpts ) {
    var jqXHR,
        dfd = $.Deferred(),
        promise = dfd.promise();
 
    // queue our ajax request
    ajaxQueue.queue( doRequest );
 
    // add the abort method
    promise.abort = function( statusText ) {
 
        // proxy abort to the jqXHR if it is active
        if ( jqXHR ) {
            return jqXHR.abort( statusText );
        }
 
        // if there wasn't already a jqXHR we need to remove from queue
        var queue = ajaxQueue.queue(),
            index = $.inArray( doRequest, queue );
 
        if ( index > -1 ) {
            queue.splice( index, 1 );
        }
 
        // and then reject the deferred
        dfd.rejectWith( ajaxOpts.context || ajaxOpts, [ promise, statusText, "" ] );
        return promise;
    };
 
    // run the actual query
    function doRequest( next ) {
        jqXHR = $.ajax( ajaxOpts )
            .done( dfd.resolve )
            .fail( dfd.reject )
            .then( next, next );
    }
 
    return promise;
};
 
})(jQuery);

Cara pakainya, sama seperti $.ajax(), hanya saja kamu ganti dengan $.ajaxQueue().
Coba implementasiin, dan liat proses di firebug…:D Hore sudah ngantri…Error callback pun gak sering-sering banget.
Moga jadi catetan yang bermanfaat. 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: