skip to main | skip to sidebar
Code 18
Manuel du savoir-faire à l'usage des geeks et des curieux
RSS
  • Accueil
  • Le web au Québec
  • Liens
  • Twitter
  • Facebook
  • À propos

mardi 16 juin 2009

Équivalences Ajax avec jQuery et Prototype

Publié par Infinite Loop, à 20 h 54 2 commentaires

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');
}
});


Tags: JavaScript

2 réponses à "Équivalences Ajax avec jQuery et Prototype"

  1. missa a dit...
    18 janvier 2012 à 10 h 02

    Bonjour,

    cet article est sympa. merci

    Cependant, la question la plus tordue et la plus important nos abordée est:

    comment convertir le:
    evalScript ou evalJs

    Merci par avance si vous avez une idée a ce sujet

    Cdt

    Missa

    Infinite Loop a dit...
    18 janvier 2012 à 10 h 25

    Je n'ai jamais utilisé ces fonctions de Prototype mais il existe une fonction native eval() dans JavaScript. Peut-être qu'un workaround est possible ?


Publier un commentaire

Message plus récent Messages plus anciens Accueil
S'abonner à : Publier des commentaires (Atom)
    Suivre @code18 sur Twitter

    Catégories

    • Apache (21)
    • Citations (167)
    • Club Vidéo (24)
    • Coffre à outils (55)
    • CSS (8)
    • Curiosités (117)
    • Design Pattern (2)
    • Drupal (8)
    • Easter Eggs (22)
    • Extensions Firefox (20)
    • GIMP (7)
    • Histoire (21)
    • HTML (32)
    • Humour (57)
    • Intégration (34)
    • iPod (12)
    • JavaScript (110)
    • Jeu de combat (6)
    • Le coin du geek (128)
    • Liens (12)
    • Linux (56)
    • Livres (78)
    • Lois et principes (46)
    • Marché des saveurs (26)
    • Mathématique (18)
    • Mobile (5)
    • Montréal (32)
    • Musique (112)
    • Pancartes et écriteaux (16)
    • Perl (8)
    • Pérou (1)
    • PHP (130)
    • PostgreSQL (44)
    • Programmation (105)
    • Saviez-vous que (55)
    • Sécurité (22)
    • SEO (5)
    • SQL Server (22)
    • Vieilles publicités (6)
    • Virtualisation (8)
    • Voyages (1)
    • Zend Framework (26)

    Divers

    Archives

    • ►  2015 (6)
      • ►  août 2015 (1)
      • ►  juillet 2015 (1)
      • ►  février 2015 (3)
      • ►  janvier 2015 (1)
    • ►  2014 (8)
      • ►  décembre 2014 (1)
      • ►  novembre 2014 (1)
      • ►  octobre 2014 (1)
      • ►  août 2014 (2)
      • ►  juillet 2014 (2)
      • ►  janvier 2014 (1)
    • ►  2013 (53)
      • ►  décembre 2013 (2)
      • ►  novembre 2013 (1)
      • ►  octobre 2013 (3)
      • ►  septembre 2013 (2)
      • ►  août 2013 (5)
      • ►  juillet 2013 (3)
      • ►  juin 2013 (5)
      • ►  mai 2013 (3)
      • ►  avril 2013 (7)
      • ►  mars 2013 (7)
      • ►  février 2013 (11)
      • ►  janvier 2013 (4)
    • ►  2012 (105)
      • ►  décembre 2012 (8)
      • ►  novembre 2012 (5)
      • ►  octobre 2012 (4)
      • ►  septembre 2012 (1)
      • ►  août 2012 (8)
      • ►  juillet 2012 (7)
      • ►  juin 2012 (7)
      • ►  mai 2012 (10)
      • ►  avril 2012 (13)
      • ►  mars 2012 (15)
      • ►  février 2012 (15)
      • ►  janvier 2012 (12)
    • ►  2011 (146)
      • ►  décembre 2011 (14)
      • ►  novembre 2011 (11)
      • ►  octobre 2011 (12)
      • ►  septembre 2011 (13)
      • ►  août 2011 (15)
      • ►  juillet 2011 (17)
      • ►  juin 2011 (18)
      • ►  mai 2011 (15)
      • ►  avril 2011 (9)
      • ►  mars 2011 (7)
      • ►  février 2011 (3)
      • ►  janvier 2011 (12)
    • ►  2010 (398)
      • ►  décembre 2010 (29)
      • ►  novembre 2010 (28)
      • ►  octobre 2010 (32)
      • ►  septembre 2010 (34)
      • ►  août 2010 (22)
      • ►  juillet 2010 (35)
      • ►  juin 2010 (42)
      • ►  mai 2010 (36)
      • ►  avril 2010 (37)
      • ►  mars 2010 (34)
      • ►  février 2010 (32)
      • ►  janvier 2010 (37)
    • ▼  2009 (429)
      • ►  décembre 2009 (32)
      • ►  novembre 2009 (34)
      • ►  octobre 2009 (33)
      • ►  septembre 2009 (37)
      • ►  août 2009 (37)
      • ►  juillet 2009 (39)
      • ▼  juin 2009 (38)
        • Clone de lightbox pour jQuery
        • Nouveautés cette semaine
        • Thèmes pour Notepad++
        • Trouver de l'emploi en web au Québec ?
        • Citation no. 36 sur le silence
        • SSH2 : capturer le résultat d'une commande
        • Michael Jackson renaît grâce à son sosie !
        • Personnaliser les extensions de fichiers web
        • Remplacer APC par Zend_Cache
        • APC cache pour optimiser la performance
        • Norton Antivirus expire en direct chez Fox
        • Code source du Kindle d'Amazon
        • Netbeans et l'encodage UTF-8
        • Disque dur de 15 mega-octets de Radio Shack
        • Filtres de fichiers pour FileZilla FTP
        • Citation no. 35 sur l'histoire
        • Exclure les fichiers de projets avec TortoiseSVN
        • Mario Lemieux, un fin connaisseur de l'informatique ?
        • Commentaire sur la création de WSDL en PHP
        • Queue de fonctions en JavaScript
        • Équivalences Ajax avec jQuery et Prototype
        • Magazine Maximum PC en PDF
        • Film Home de Yann Arthus-Bertrand
        • Citation no. 34 sur la responsabilité
        • 6 destinations vacances aux noms insolites
        • À propos des chargés de projets
        • Astuce SQL pour remplacer les sous-requêtes
        • Message créatif et original de CD Baby
        • Composant HTML Purifier
        • Facebook mal programmé ?
        • Enregistrer des disques vinyls sur son ordinateur
        • Citation no. 33 sur les risques du travail
        • Full Text Search PostgreSQL
        • Lois du travail de Dilbert
        • Convertir Windows XP Home à Professional
        • Un site web all dressed avec bacon
        • 3 façons de construire une query string en PHP
        • Retirer un site malicieux de l'index Google
      • ►  mai 2009 (37)
      • ►  avril 2009 (35)
      • ►  mars 2009 (36)
      • ►  février 2009 (32)
      • ►  janvier 2009 (39)
    • ►  2008 (84)
      • ►  décembre 2008 (34)
      • ►  novembre 2008 (39)
      • ►  octobre 2008 (11)

    Abonnés

Copyright © All Rights Reserved. Code 18 | Converted into Blogger Templates by Theme Craft