Ajax Queue avec jQuery

Anthor — Sun, 18 Oct 2009 09:19:54 +0000

En travaillant sur un nouvel outil ce week-end, je me suis rendu compte que l’utilisation des queues en Ajax avec jQuery n’était pas natif.
Il existe quelques pistes à ces adresses, mais rien de vraiment pratique :

Puis j’ai trouvé une version plus intéressante de celui-ci dans le plugin [jQuery Autocomplete|http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/|en], néanmoins, même si la fonction ABORT fonctionne correctement, mes appels en queue ne fonctionnaient pas.
J’en ai donc légèrement modifié les sources, en ajoutant un mode DEQUEUE me permettant de lancer la liste d’attente en fin de boucle par exemple.

Grâce à l’utilisation de la variable PORT, on peux ainsi contrôler indépendamment plusieurs queues, ou annuler des requêtes spécifiques, le tout en utilisant la fonction Ajax de jQuery.

Le plugin

/**
 * Ajax Queue Plugin
 */
(function($) {
    var ajax = $.ajax;
    var pendingRequests = {};
 
    $.ajax = function(settings) {
        settings = jQuery.extend(
            settings, 
            jQuery.extend(
                {}, 
                jQuery.ajaxSettings, 
                settings
            )
        );	
        var port = settings.port;
 
        switch(settings.mode) {
            case "abort": 
                if ( pendingRequests[port] ) {
                    pendingRequests[port].abort();
                }
                return pendingRequests[port] = ajax.apply(this, arguments);
 
            case "queue": 
                var _old = settings.complete;
                settings.complete = function(){
                    if ( _old )
                        _old.apply( this, arguments );
                    jQuery([ajax]).dequeue("ajax" + port );
                };
 
                jQuery([ ajax ]).queue("ajax" + port, function(){
                    ajax( settings );
                });
                return;
 
            case "dequeue": 
                jQuery([ajax]).dequeue("ajax" + port );
 
                if(jQuery.isFunction(settings.complete))
                    settings.complete(settings);
 
                return;
        }
 
        return ajax.apply(this, arguments);
    };
})(jQuery);

Utilisation de la méthode ABORT

$input.bind('keyup', function(event) {
    if($searchTimeout != undefined) {
        clearTimeout($searchTimeout);
    }
 
    $searchTimeout = setTimeout(function() {
        $searchTimeout = undefined;
 
        var inputVal = $input.val().replace(/^\s+/g,'').replace(/\s+$/g,'');
 
        $.ajax({
            mode    : 'abort',
            port    : 'ajaxSuggestions',
            type    : 'POST',
            url     : 'test.php',
            data    : { 'keywords': inputVal },
            success : function(msg) {
                alert(msg);
            }
        });
    }, 500);
});

Cette méthode est plus qu’intéressante dans le cas par exemple ou l’on souhaite afficher des informations au fur et à mesure que l’utilisateur écrit une information. Les requêtes précédentes utilisant le même port sont annulées au profit de la nouvelle requête, évitant un engorgement des informations et des erreurs dans le cas ou une requête ultérieure soit plus rapide que les précédentes.

Utilisation de la méthode QUEUE

for( i = 0 ; i <= 10 ; i++ ) {
    $.ajax({
        mode: 'queue',
        port: 'ajaxWhois',
        type: 'POST',
        url: 'test.php',
        data: { 'increment': i },
        success: function(msg){
            alert(msg);
        }
    });
}
 
$.ajax({ mode: 'dequeue', port: 'ajaxWhois' });

La méthode queue permet de boucler facilement sur plusieurs requêtes et ne les lancer qu’au moment choisit. Les requêtes ainsi lancées, le sont les unes à la suite des autres, évitant un engorgement des données reçues.

Anthor.Net » Ajax

Ajax Queue avec jQuery

Le plugin

Utilisation de la méthode ABORT

Utilisation de la méthode QUEUE