L'échange de données en Javascript.
L’ajax, pour Asynchronous Javascript and XML, est une architecture qui permet de communiquer de manière quasi transparente avec des fichiers de données ou des scripts côté serveur.
Le terme asynchronous (pour asynchrone) signifie que notre page peut communiquer avec d'autres services sans être figée.
Exemple avec un formulaire classique sans Ajax:
Nous le remplissons puis validons. Notre navigateur transmet la requête au serveur qui va valider nos données puis nous transmet une nouvelle page qui nous affichera le résultat de notre demande.
Il faut donc :
Avec Ajax, plus besoin. On peut communiquer avec son serveur sans recharger notre page.
Cette méthode est très utile pour aller piocher des informations dans un fichier texte, un fichier HTML, un fichier XML, un fichier JSON pour envoyer / recevoir des données de notre serveur.
Texte simple
ce format n'est pas du tout adapté s'il s'agit de recevoir des données devant êtres "formatées" ou classées.
HTML
Le HTML est intéressant car il suffira de l'insérer directement dans la page avec la propriété innerHTML. C'est rapide. Cela dit le HTML est verbeux et peut se révéler assez lourd quand il s'agit d'un grand volume de données.
<ul>
<li><span title="a4242">Gordon</span></li>
<li><span title="j3781">Barney</span></li>
<li><span title="j7638">Eli</span></li>
<li><span title="o7836">Chell</span></li>
<li><span title="e5831">Odessa</span></li>
</ul>
XML
Avec certains objets AJAX, comme XMLHttpRequest il est possible de récupérer du texte sous forme de XML et de l'interpréter comme tel, ce qui permet de manipuler les données avec les fonctions DOM. Ca peut être intéressant mais XML souffre du même problème que le HTML : il est verbeux. De plus le traitement via DOM peut se révéler assez lent s'il s'agit d'un grand volume de données et suivant le navigateur utilisé par le client.
<friends>
<f name="Gordon" id="a4242" />
<f name="Barney" id="j3781" />
<f name="Eli" id="j7638" />
<f name="Chell" id="o7836" />
<f name="Odessa" id="e5831" />
</friends>
JSON
Reste le JSON. Le JSON est une manière de structurer l'information en utilisant la syntaxe objet de JavaScript – des objets et des tableaux. JSON est très léger, car non-verbeux mais nécessite d'être évalué par le compilateur JavaScript pour pouvoir être utilisé comme un objet. L'évaluation se fait via eval pour les navigateurs obsolètes ou via la méthode parse de l'objet natif JSON. L'évaluation est souvent décriée car peut se révéler dangereuse, mais dans la mesure où vous connaissez la source des données à évaluer il n'y a pas de danger.
[
{ "name":"Gordon", "id":"a4242" },
{ "name":"Barney", "id":"j3781" },
{ "name":"Eli", "id":"j7638" },
{ "name":"Chell", "id":"o7836" },
{ "name":"Odessa", "id":"e5831" }
]
Le JSON est donc le format travaillant de paire avec AJAX quand il s'agit de recevoir des données classées et structurées. Les autres formats peuvent bien évidemment servir et se révéler intéressants dans certains cas, mais d'une façon générale les grandes pointures du JavaScript, comme Douglas Crockford incitent à utiliser JSON.
La librairie json2, écrite par Doug Crockford, permet d'émuler le comportement de l'objet natif JSON s'il n'est pas pris en charge par le navigateur. La librairie crée un objet global JSON pourvu des méthodes parse et stringify. La méthode parse est en fait un eval sécurisé, c'est-à-dire qu'un traitement est fait sur la chaine à évaluer pour s'assurer qu'elle ne présente aucun danger.
A développer
Il peut être mis entre les balises <script></script> ou dans un fichier externe.
function createXhrObject()
{ // Test navigateur récent
if (window.XMLHttpRequest)
return new XMLHttpRequest();
// Test pour IE
if (window.ActiveXObject)
{
var names = [
"Msxml2.XMLHTTP.6.0",
"Msxml2.XMLHTTP.3.0",
"Msxml2.XMLHTTP",
"Microsoft.XMLHTTP"
];
for(var i in names)
{
try{ return new ActiveXObject(names[i]); }
catch(e){}
}
}
window.alert("Votre navigateur ne prend pas en charge l'objet XMLHTTPRequest.");
return null; // non supporté
}
xhr = createXhrObject(); // variable contenant l'objet Ajax
Pour récupérer la valeur en PHP
