Dans le cadre d'un développement utilisant AjaX, on s'aperçoit que beaucoup de programmeurs renvoient un contenu pré-formaté pour mettre à jour la page appelante.
Si cette méthode à l'avantage d'être simple et efficace, elle manque cependant un poil de souplesse. Les informations renvoyées doivent parfaitement s'intégrer sous peine d'avoir des erreurs ou des trucs moches.
Personnellement, adepte du XML je reste fidèle à l'idée d'utiliser ce format, y compris pour le retour lors des appels AjaX. J'y vois un avantage évident : qu'on fasse un appel classique ou asynchrone, le résultat renvoyé aura un format "universel". Plus besoin de formater les informations de retour spécifiquement pour la page appelante. On peut ainsi appeler une fonction particulière via Ajax, PHP ou tout autre méthode viable et renvoyer un résultat générique, laissant à l'appelant le soin de gérer le retour.
Les pages PHP fonctionnent alors comme des services Web, prenant en entrée une poignée de paramètres et renvoyant un contenu formaté de manière unique, exploitable via PHP, XSLT, Flash, java, python, <votre parser favori ici> et même JavaScript
Reste maintenant à savoir comment récupérer et traiter tout ça dans un environnement JS (c'est le but du topic, je vous le rapelle). C'est bien plus simple qu'il n'y parait.
Les extraits de code ci dessous se basent sur mon propre objet XMLHttpRequest (une version antique est visible ici) mais peuvent être facilement adapté à d'autres méthodes.
1) Récupérer le XML
Après un appel asynchrone, on reçoit en général une belle chaine de caractère.
En l'état, ce n'est pas du XML, juste une bête chaine. Il faut donc la transformer pour en faire un vrai objet XML avec un DOM potable.
J'utilise pour ça une fonction maison : textToXML
Si cette méthode à l'avantage d'être simple et efficace, elle manque cependant un poil de souplesse. Les informations renvoyées doivent parfaitement s'intégrer sous peine d'avoir des erreurs ou des trucs moches.
Personnellement, adepte du XML je reste fidèle à l'idée d'utiliser ce format, y compris pour le retour lors des appels AjaX. J'y vois un avantage évident : qu'on fasse un appel classique ou asynchrone, le résultat renvoyé aura un format "universel". Plus besoin de formater les informations de retour spécifiquement pour la page appelante. On peut ainsi appeler une fonction particulière via Ajax, PHP ou tout autre méthode viable et renvoyer un résultat générique, laissant à l'appelant le soin de gérer le retour.
Les pages PHP fonctionnent alors comme des services Web, prenant en entrée une poignée de paramètres et renvoyant un contenu formaté de manière unique, exploitable via PHP, XSLT, Flash, java, python, <votre parser favori ici> et même JavaScript
Reste maintenant à savoir comment récupérer et traiter tout ça dans un environnement JS (c'est le but du topic, je vous le rapelle). C'est bien plus simple qu'il n'y parait.
Les extraits de code ci dessous se basent sur mon propre objet XMLHttpRequest (une version antique est visible ici) mais peuvent être facilement adapté à d'autres méthodes.
1) Récupérer le XML
Après un appel asynchrone, on reçoit en général une belle chaine de caractère.
En l'état, ce n'est pas du XML, juste une bête chaine. Il faut donc la transformer pour en faire un vrai objet XML avec un DOM potable.
J'utilise pour ça une fonction maison : textToXML
Code PHP :
<?php
<script type="text/javascript">
function textToXML(XMLText){
if (window.ActiveXObject) {
// Code IE
var doc=new ActiveXObject("Microsoft.XMLDOM");
doc.async="false";
doc.loadXML(XMLText);
} else {
// code pour Firefox, Opera, etc.
var parser=new DOMParser();
var doc=parser.parseFromString(XMLText,"text/xml");
}
return doc.documentElement;
}
</script>
Cette fonction prend en entrée une chaine de caractère avec une syntaxe XML correcte et retourne un documentElement sur lequel on peut travailler.
2) Parcourir le contenu du XML
Deux méthodes et une propriété suffisent pour cela.
getElementsByTagName, getAttribute et nodeValue.
Considérons le XML suivant renvoyé suite à un appel pour une création de login.
Code :
<xml>
<returncode status="-1">
<error>Votre [b]nom[/b] contient des caractères interdits</error>
<error>Votre [b]Mot de passe[b] doit faire au moins 6 caractères</error>
</returncode>
</xml>Voici le code JS traitant le retour
Code PHP :
<?php
<script type="text/javascript">
//Je récupère les données et les transforme en XML
xml=textToXML(objHTTP.responseText)
//Je récupère le noeud 'returncode'
var errNode=_xml.getElementsByTagName('returncode')[0];
//Je teste la valeur de l'attribut 'status'
if(errNode.getAttribute('status')==-1){
//Une erreur est détectée (status à -1)
var sError='';
// Je récupère la liste des noeuds 'error' à partir du noeud 'returncode' (rangé dans la variable errNode)
var errList=errNode.getElementsByTagName('error');
//Je parcours la liste des noeuds 'error'
for(x=0;x<errList.length;x++){
//bbfmt est une fonction qui transforme les tags BBCode en tags HTML
//nodevalue me permet de récupérer le contenu du noeud
sError+=bbfmt(errList[x].childNodes[0].nodeValue)+'<br />';
}
//showError esr une fonction qui affiche une fenêtre d'erreur avec le contenu passé en paramètre
showError(sError);
} else {
// Code en cas de réussite
// (affichage, rechargement, au choix...)
}
</script>
![[Image: fav.png]](http://prototypejs.org/images/fav.png)
prototype.js
![[Image: banner.png]](http://www.laluciole.me/wp-content/uploads/2013/02/banner.png)