Réaliser un scheduler AJAX avec jQuery et PeriodicalUpdater

Posté par seiyar81 le 21 mai 2013 | Laisser un commentaire (0)
jQuery

jQuery est un outil formidable.
Il fait non seulement partie des meilleurs frameworks du moment, je dis bien des car nombreux sont ceux qui rivalisent en terme de fonctionnalités, légèreté, et simplicité d’utilisation : ExtJS, Prototype, Mootools ou encore YUI pour ne pas les citer.

Mais sa véritable force, comme j’ai déjà pu l’évoquer avec le génial DataTables, réside dans la variété de plugins disponibles.

Nous nous intéressons ici à un plugin, qui est en fait un portage d’une fonctionnalité de Prototype vers jQuery, j’ai nommé PeriodicalUpdater.

Petit exemple concret : qui n’a jamais eu à mettre en place un rafraîchissement automatique du contenu d’une page Web à base de setInterval ? C’est fastidieux, pas pratique à écrire et s’écarte un peu de la logique d’utilisation d’un framework.

PeriodicalUpdater nous permet via une méthode unique de mettre en place une requête AJAX périodique, facilement paramétrable.

Rien de tel qu’un peu de code pour tout comprendre, la méthode prend trois paramètres : l’URL à interroger, les paramètres de la requête, une fonction callback.

Les paramètres ne sont ni plus ni moins que les paramètres normalement passés à une requête $.ajax classique avec en plus ceux de PeriodicalUpdater.

$('#myDiv').PeriodicalUpdater('/news/list/', 
{
        method: 'get',          // méthode; get ou post
        data: {},               // tableau de valeurs passées à l'URL - e.g. {nom: "Yriase", msg: "Hello World"}
        minTimeout: 1000,       // valeur de départ du timeout en millisecondes
        maxTimeout: 8000,       // valeur maximum du timeout en millisecondes
        multiplier: 2,          // valeur pour incrémenter le timeout si la réponse n'a pas changé (jusqu'à maxTimeout)
        type: 'text',           // type de la réponse : text, xml, json, etc.  Voir $.ajax
        maxCalls: 0,            // nombre maximum d'appels. 0 = pas de limite.
        autoStop: 0,            // arrête automatiquement la requête après plusieurs retours renvoyant les mêmes données. 0 = désactivé.
        autoStopCallback: function() { ... } // Callback a exécuter quand l'autoStop est déclenché
        cookie: {},             // configuration du cookie pour stocker le timeout
        verbose: 0              // niveau de verbosité des logs : 0=aucuns, 1=moyen, 2=tout 
}
, function(remoteData, success, xhr, handle) { 
    // this référence $('#myDiv') 
});

Il est également possible d’appeler librement la méthode sans l’attacher à un élément :

$.PeriodicalUpdater('/news/list/', {}, function(remoteData, success, xhr, handle) {});

Et voilà en quelques lignes vous avez paramétré votre scheduler 😉

Pour récupérer le plugin direction GitHub.

Catégorie: Développement Web, Internet, Javascript | Laisser un commentaire (0)