Fév
1

jQuery 1.5 : du nouveau dans Ajax !

Comme vous le savez peut-être (ou peut-être pas : Memorandom.fr : number one sur l’info web dev ! hé hé), jQuery 1.5 vient de sortir dans les bacs !

Comme l’annonce la news du site officiel, cette version corrige 83 bugs et clos 460 tickets.

Les nouveautés majeures sont les suivantes :

  • Réécriture des fonctions liées à Ajax
  • Introduction des objets différés (deferred objects)
  • Nouvelle fonction jQuery.sub()
  • Amélioration des performances lors du parcours du DOM (.children(), .prev() et .next()), particulièrement sensible sous Safari et Chrome

Je ne vais m’intéresser ici qu’à Ajax et aux objets différés. Reportez-vous à la news sur le site officiel pour en apprendre davantage sur le reste.

Il y a donc du nouveau du côté des fonctions ajax (jQuery.ajax(), jQuery.post(), jQuery.get(), …) et à la notion d’objets différés.

La nouveauté la plus notable est que jQuery.ajax() (et les autres, comme jQuery.post(), …) renvoie désormais un objet jXHR (jQuery XMLHttpRequest).

Dit comme ça, c’est pas l’éclate totale. Attendez un peu, ça vaut le coup de continuer…

L’objet jXHR encapsule l’objet classique XMLHttpRequest, et contient tous ses attributs et méthodes habituels (responseText, …). Là où les choses changent, c’est que cet objet implémente l’interface Promise. C’est bien beau, mais vous ne voyez toujours pas l’intérêt ? On y arrive, soyez patient 😉

L’objet jXHR, comme tous les objets différés, dispose de trois méthodes : .then(), .done() et .fail().

Les exemples suivants supposent l’existence d’un fichier toto.html.

.then() appelle une fonction de callback :

$.get("toto.html").then(function(){
 console.log("Memorandom, ça roxe !");
});

.fail() est appelé en cas d’échec d’un des callbacks :

$.get("toto.htmlX").fail(function(){
 console.log("C'est raté parce que l'extension est mauvaise");
});

.done() est exécutée après l’appel de tous les callbacks :

$.get("toto.html").done(function(){
 console.log("C'est fini !");
});

Chacune de ces méthodes retourne elle-même un objet de type Promise, ce qui autorise un chaînage :

$.get("toto.html")
 .then(function(){
   console.log("Memorandom");
 })
 .done(function(){
   console.log("Fini");
 })
 .fail(function(){
   console.log("Raté");
 })
;

On voit donc l’intérêt de ce principe : on n’est plus limité à une seule fonction de callback comme auparavant :

// Ajax à l'ancienne mode (à oublier)
$.get("toto.html",
   function(){
      // Code de la fonction appelée en <em>callback</em>
      // ...
   }
);

On peut avoir au moins une fonction en cas de succès et une en cas d’échec (cf. le chaînage un peu plus haut).

Vous vous rappelez que ces fonctions renvoient toutes un objet jXHR ? Cela signifie que vous pouvez faire du chaînage puisque le résultat de l’appel dispose des méthodes .then(), .done() et .fail(). OK ? Donc, vous pouvez faire autant d’appels successifs que vous le voulez :

$.get("toto.html")
 .then(function(){
   console.log("Appel 1");
 })
 .then(function(){
   console.log("Appel 2");
 }
 // Vous pouvez continuer en rajoutant des <em>callbacks </em>à volonté..

La fonction .then() permet de stipuler à la fois une fonction de callback, mais aussi une fonction appelée en cas d’erreur : .then(fonctionCallback, fonctionErreur) :

var toto = $.get("toto.htmlX");
toto.then(
 function(){
   console.log("Memorandom");
 },
 function(){
   console.log("Erreur : il n'y a pas de X à html !");
 }
)

Vous pouvez ainsi créer un gestionnaire d’erreur pour chaque appel de la méthode .then(). Les méthodes .done() et .fail() n’acceptent qu’une seule fonction en argument.

Enfin, sachez que des alias à ces méthodes ont été créés pour l’objet jXHR : .complete(callbackFunction, errorFunction) équivaut à .then(callbackFunction, errorFunction), .success(callbackFunction) équivaut à .done(callbackFunction) et .error(errorFunction) à .fail(errorFunction). Ce choix a été fait pour se rapprocher des noms des méthodes utilisées avant la version1.5 de jQuery (et par JavaScript en général, d’ailleurs). Vous pouvez les utiliser indifféremment.

La documentation de jQuery n’est pas encore tout à fait à jour au moment où j’écris cet article, mais je vous invite à lire au moins la page concernant les objets différés, qui aborde d’autres méthodes comme .resolve().

Si vous voulez aller plus loin ou obtenir plus d’informations, vous pouvez consulter l’article de Eric Hynds sur les objets différés dans jQuery 1.5 ; il y propose des exemples très explicites.



Poster un commentaire

Edito

Bienvenue sur Mémorandom.

Mémorandom est le blog de 2 développeurs web, Appo et Nico.

Vous y trouverez des informations sur différents domaines touchant de près ou de loin au développement web

Tutoriels Yii Framework

Nos derniers articles

Blogs Dev

Liens

Étiquettes