Quand on fait de l'AJAX, plusieurs type de réponses peuvent être utilisées. Les puristes préconiseront l'XML, l'objet XML_HTTP_REQUEST étant au départ prévu pour faire transiter de l'XML. Les débutant utiliseront du texte plein ou du HTML.
Déjà, il faut éviter le HTML. Sauf pour le chargement de zones d'interfaces bien entendu. Le genre de cas fréquent à éviter est le suivant : une liste triable avec un événement AJAX lors du changement d'ordre. La requete envoit le nouvel ordre au serveur, qui renvoit, en html la liste entière dans le nouvel ordre. Puis sur le callback, on insére ce HTML à la place de la liste initiale. Faut pas faire ça… :/ Déjà, c'est crade, mais surtout, ça demande des ressources inutiles au serveur et un temps de chargement plus long.
Ensuite, XML peut être intéressant en théorie, mais en pratique, il est très lourd : le nombre de balises peut alourdir intensément la réponse, et surtout, il faut le parser à l'arrivée.
Heureusement, il y a JSON !
JSON (JavaScript Object Notation) est une façon d'écrire des objets en javascript très pratique qui permet de placer dans une seule variable, une infinité de données structurées. Sur une seule réponse Ajax, je peux donc avoir séparément le nouvel ordre des éléments de ma liste, un code erreur, un message de feedback, etc.
Sans aller jusqu'au débat à savoir quelle est la meilleure méthode à adopter, je vais simplement vous donner un exemple de fonctionnement de la réponse de type JSON.<
Nous allons prendre comme exemple un tableau de données à deux colonnes qui se rafraîchit toute les 30 secondes.
// Nous partons d'un array en PHP :
$datas = array(
"fraise" => 2,
"cerise" => 5,
"bannane" => 1,
"citron" => 10,
"orange" => 15
);
// Nous le transformons en JSON grâce à la lib json
//(ou à la main avec un foreach mais, c'est con :/)
include_once("JSON.php");
$json = new JSON();
return $json->encode($datas);
// NB, on peut JSONner des tableau, mais aussi des objet, et même des objet d'objet dans des tableaux avec des tableaux dedans :p
Le résultat est envoyé en tant que text/plain à javascript :
// Voici ce que l'objet ajax reçoit :
// {"fraise" : 2, "cerise" : 5, "bannane" : 1, "citron" : 10, "orange" : 15}
// Ne reste qu'à l'exploiter
// Allons dans la fonction de callback success de notre objet Ajax :
// Je prends l'exemple de YAHOO UI car j'ai l'habitude de travailler avec ça
// Mais on peut faire pareil avec n'importe quelle lib et même sans
YAHOO.util.Connect.asyncRequest(
"post",
"traitement.php",
{
success: function(o)
{
// On commence par mettre notre JSON dans une variable.
// Pour cela, on utilise la fonction eval()
eval ("var result = " + o.responseText);
// A partir de là, toute les données sont accessibles par la varibale result
alert (result.citron); // Affichera 10
alert(result['fraise']) // Affichera 2
// Cette double notation nous permet d'accéder aux données même si on ne connait pas les clés
// Nous allons créer un tableau qui affiche ces données
var table = document.createElement("table");
// Maintenant, on utilise un pseudo foreach pour parser l'objet result
for (r in result)
{
var tr = document.createElement("tr");
// r représente la clé ("fraise"),
// result[r] représente sa valeur (2)
var td1 = document.createElement("td");
td1.innerHTML = r;
var td2 = document.createElement("td");
td2.innerHTML = result[r];
tr.appendChild(td1);
tr.appendChild(td2);
table.appendChild(tr);
}
// On finit par afficher le tableau dans la page :
document.getElementById("affichage").appendChild(
table
);
}
}
);
Dans cet exemple tout simple où on ne fait qu'afficher un tableau de données, on aurait pu simplement renvoyer le tableau mis en forme par php. Ainsi, coté Javascript, on se tape juste un
document.getElementById('affichage').innerHTML o.responseText;
et puis basta. Sauf que :
- Il faut écrire le tableau coté php. Du travail supplémentaire pour le serveur, un template supplémentaire si on en utilise un, du code html dans du php en plus dans le cas contraire.
- La réponse est bien plus lourde.
-
Coté Javascript, on est totalement limité. En fait, on ne peut rien faire à part afficher le tableau. Si finalement, on nous demande d'afficher une liste, ou d'ajouter une colonne avec le pourcentage, on est obligé d'aller taper coté PHP. Avec le JSON, je peux ajouter cette colonne en rajoutant ceci dans la boucle for :
var td3 = document.createElement('td');
td3.innerHTML = result[r] * total / 100; // total ayant été calculé auparavant
Ne retenez qu'une chose : dans le JSON tout est bon :D
Commentaires