Pour commencer par comprendre Ajax, parlons un peu d'HTML :
Crée par Tim Berners-Lee au CERN permet d'avoir des documents reliés entre eux par des liens, l'HTML s'est ensuite enrichi par le support des images, des tableaux, des formulaires, (permettant la création de livres d'or, de forums, de wiki, de blogs), de l'audio et des vidéos (nativement dans HTML5), du CSS, (mise en forme visuelle du document) et de Javascript qui modifie le document dynamiquement dans le navigateur.
Sauf qu'à l'origine, Lorsqu'un formulaire est soumis au serveur, une nouvelle page s'affiche. Ajax permet alors de rester dans la page actuelle tout en effectuant des requêtes au serveur, permettant de mettre de la suggestion en cours de recherche, la surveillance d'un état du serveur (traitement de vidéo, ...)
Le code est super simple :
if (window.XMLHttpRequest) {
var hr=new XMLHttpRequest();
hr.open('GET','index.php?attribut='+encodeURIComponent(valeur),true);
hr.onreadystatechange=function(){
if(hr.readyState==4&&hr.status==200){
var reponse=hr.responseText;
}
}
hr.send(null);
}Ici, on initialise un objet XMLHttpRequest, qui va se connecter à l'adresse index.php?attribut=valeur.
On déclare dans une fonction anonyme la variable reponse qui contiendra le résultat de la requête lorsque l'on aura reçu la page
ReadyState indique l'état de réception de la page, (qui peut être partiel si la page est grande et qu'on n'a reçu que le début) qui vaut 4 quand la page est reçu intégralement
status indique la réponse du serveur, qui vaut 200 quand il n'y a pas de problèmes (et qui vaudrait 404 dans un cas bien connu).
Dans le cas où l'on voudrais envoyer beaucoup plus d'informations, on peut utiliser une requête POST, pas vraiment plus compliqué:
if (window.XMLHttpRequest) {
var hr=new XMLHttpRequest();
hr.open('POST','index.php',true);
hr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
var data="attribut1="+encodeURIComponent(value1)
+"&attribut2="+encodeURIComponent(value2);
hr.onreadystatechange=function(){
if(hr.readyState==4&&hr.status==200){
var reponse=hr.responseText;
}
}
hr.send(data);
}
Ici, on stocke les deux attributs (on peut en avoir beaucoup plus) dans la variable data, que l'on envoie via send().Il ne faut pas oublier de déclarer le bon header pour la requête de type POST
En dehors des applications dédiées (de style gmail, google maps, webos...) faut toutefois rester prudent et ne pas en abuser : s'il peut être utilisé pour suggérer des éléments ou indiquer la progression d'un élément, il ne doit pas être utilisé pour changer radicalement le contenu du document original dont l'adresse n'est pas changé dynamiquement. De plus, il n'est pas toujours activé par le visiteur.
Derniers commentaires