Ajax
La raison la plus impérieuse d’utiliser un framework JavaScript est de standardiser les requêtes Ajax sur tous les navigateurs. Une requête Ajax est une requête HTTP asynchrone qui envoie une requête à un script côté serveur, puis obtient un résultat de réponse, tel que des données au format XML, JSON, HTML ou texte brut. La plupart des frameworks JavaScript ont une forme d'objet de requête Ajax qui accepte une série d'options comme paramètres. Ces options incluent des fonctions de rappel qui sont appelées lorsqu'une réponse est reçue du serveur Web. Les requêtes Ajax pour ExtJS, MooTools et Prototype ressemblent à ceci :
Listing 11 : requête Ajax dans une bibliothèque ExtJS
Ext.Ajax.request({
URL : 'serveur_script.php',
paramètres : {
nom1 : 'valeur1',
nom2 : 'valeur2'
},
méthode : 'POST',
succès : fonction (transport) {
alerte(transport.responseText);
}
});
ExtJS accepte un paramètre, y compris des champs tels que l'url, les paramètres, la méthode et la fonction de traitement de réussite. Le champ url contient l'adresse du script côté serveur, qui est appelé par les requêtes Ajax. Params lui-même est un objet composé de paires clé/valeur, qui sont ensuite transmises au serveur. Le champ méthode a deux valeurs facultatives : GET ou POST, et la valeur par défaut est la méthode post. Le dernier champ est success, qui est appelé une fois que le serveur a obtenu une réponse positive. Dans cet exemple, on suppose que le serveur renvoie du texte brut et que ce texte est présenté à l'utilisateur via la méthode alert().
Ensuite, explorons plus en détail les requêtes Ajax dans MooTools.
Listing 12 : Requête Ajax dans MooTools
nouvelle demande ({
URL : 'serveur-script.php',
données: {
nom1 : 'valeur1',
nom2 : 'valeur2'
},
méthode : 'post',
onComplete : fonction (réponse) {
alerte (réponse);
}
}).envoyer();
Comme vous pouvez le constater, MooTools est très similaire à ExtJS. Vous remarquerez que les variables sont transmises via le champ de données et que les champs de méthode doivent être en minuscules. De plus, contrairement à la fonction success handler, MooTools utilise la fonction onComplete. Enfin, contrairement à ExtJS, MooTools envoie réellement la requête à l'aide de la fonction Request send().
Enfin, regardons les différences évidentes entre Prototype.
Listing 13 : Requête Ajax dans Prototype
nouveau Ajax.Request('server-script.php', {
paramètres : {
nom1 : 'valeur1',
nom2 : 'valeur2'
},
méthode : 'post',
onSuccess : fonction (transport) {
alerte(transport.responseText);
}
});
Vous voyez, Prototype fonctionne de la même manière, mais avec de petites différences de syntaxe. Pour commencer, l'objet prototype Request accepte que deux paramètres soient transmis au constructeur. Le premier paramètre est l'URL à laquelle envoyer la requête, comme vous l'avez vu dans les deux exemples précédents, et le deuxième paramètre est un objet contenant les options de chaque requête Ajax. Bien entendu, l'URl est transmise en tant que paramètre distinct et ne figure pas dans la liste des options. De plus, il convient de noter que, contrairement à MooTools, le constructeur de l'objet Prototype envoie la requête implicitement, il n'est donc pas nécessaire d'appeler une méthode pour déclencher la requête HTTP.
La plupart des frameworks JavaScript prennent en charge Ajax au-delà de ce que j'ai mentionné ici. Certaines améliorations notables incluent la mise à jour automatique des éléments dès la réception d'une réponse, sans avoir besoin de fonctions spéciales onSuccess. Certaines bibliothèques disposent d'une fonctionnalité de saisie semi-automatique prédéfinie, comme vous le voyez avec le moteur de recherche Google, qui vous propose des suggestions de requêtes au fur et à mesure que vous tapez.
Dans les chapitres suivants, vous découvrirez les améliorations de l'expérience utilisateur (UE) que les frameworks JavaScript apportent aux développeurs Web.
Adresse de réimpression : http://www.denisdeng.com/?p=729
Adresse d'origine : http://www.ibm.com/developerworks/web/library/wa-jsframeworks/index.html