Équivalences Ajax avec jQuery et Prototype

Pour avoir utilisé les deux types d'appels Ajax (asynchronous JavaScript and XML) avec les librairies Prototype et jQuery, je dois dire que chacun possède ses avantages et que somme toute, la syntaxe revient pratiquement au même. Je vous décris ici les équivalences présentées pas à pas.

L'appel
À la base, Prototype utilise une fonction de objet Ajax qu'on doit instancier. De son côté, l'appel Ajax de jQuery est simplement une fonction de l'objet principal. Dans les deux cas, on doit passer un array de paramètres qu'on peut définir avant ou à l'intérieur de l'appel.

// prototype
new Ajax.Request('url', options);

// jQuery
$.ajax(options);

Les paramètres
Pour créer une requête Ajax de base, nous avons besoin de différents paramètres :

• l'URL où doit pointer la requête (toujours sur une page du même domaine)
  
• le type de requête (GET / POST)
• les données
• les fonctions de succès et d'erreur

On définira les arrays d'options en suivant la syntaxe JSON, où la valeur peut être scalaire, un autre objet JSON imbriqué ou une fonction:

{
   propriété: valeur,
   propriété: valeur,
   propriété: valeur,
   propriété: fonction(){}
}

URL

• En Prototype, l'URL a déjà été spécifié au moment de l'appel.
• Avec jQuery, c'est un paramètre nommé "url" :
  { url: 'page.php' }
  

Requête asynchrone
Par défaut, les deux librairies initialisent les requêtes de façon asynchrone (c'est le but de la méthode Ajax).

• Prototype utilise { asynchronous: true }
  
• jQuery préfère l'abrégé { async: true }

Type
Il faut spécifier si on enverra les données en tant que GET ou POST.

• Prototype s'est inspiré d'un formulaire web en utilisant la propriété "method" : { method: 'POST' }
• celle de jQuery s'appelle "type" : { type: 'POST' }

Données
Si on veut passer des paramètres au moment de faire la requête Ajax, on doit les inclure à l'intérieur de l'array d'options. Les paramètres eux-mêmes doivent être aussi définis comme un objet JSON, avec la syntaxe entre accolades.

• Prototype le nomme simplement "parameters" :
  { parameters: { cle: valeur, cle: valeur } }
• Même chose pour jQuery, sauf que la propriété se nomme "data" : { data: { cle: valeur, cle: valeur } }

Fonctions callback pour succès et erreur
Qu'arrive-t-il lorsque l'appel Ajax réussit ou échoue ? Il faut définir les fonctions callback pour prendre en charge le résultat selon le cas.

• Avec Prototype, il faut associer une fonction (anonyme ou non) aux propriétés "onSuccess" et "onFailure" (voir exemple complet plus bas)
  
• Avec jQuery, c'est encore une fois le même procédé, sauf que les propriétés se nomment simplement "success" et "error"

Valeur de retour
Selon ce que l'URL appellé retournera, on pourra manipuler les données différemment. Dans les deux cas, la fonction de succès recevra automatiquement comme argument l'output généré par la page appelée.

• Avec Prototype, la documentation suggère de nommer cette variable transport ou "t" et elle contient la propriété responseText, responseXML et responseJSON (exemple: t.responseText)
• Sous jQuery, on peut spécifier lors de l'appel une propriété qui indiquera comment traiter la réponse. Les choix possibles sont : xml, html, script, json, jsonp et text. Ensuite, on pourra utiliser l'objet directement.
  

Les modèles de code en exemple
En conclusion, les deux squelettes suivants sont équivalents. Notez aussi comment on peut, dans les deux cas, définir les options dans un objet à part.

// prototype
var options = {
   asynchronous: true,
   method: 'POST',
   parameters: { id: 10, language: 'fr' },
   onSuccess: function(transport) {
       console.log('Succès');
   },
   onFailure: function(transport){
       console.log('Erreur');
   }
}

new Ajax.Request('/dossier/page.php', options);

// jQuery
$.ajax({
   url: '/dossier/page.php',
   async: true,
   type: 'POST',
   data: { id: 10, language: 'fr' },
   dataType: 'json',
   success: function(data){
       console.log('Succès');
   },
   error: function(){
       console.log('Erreur');
   }
});