AJAX, fête des fleurs
Par jeanseb le dimanche, août 20 2006, 16:58 - Dev's Blog - Lien permanent
Petite présentation de l'AJAX.
Présentation de l'AJAX
L'Asynchronous JavaScript And XML ou AJAX n'est pas une technologie à proprement mais plutôt un condensé d'autres technologies, ainsi qu'un concept: faire dialoguer le navigateur avec le serveur.
Les technologies du web
Lorsque, nous surfons sur le net, le navigateur ( Internet Explorer, Firefox ou autre ) reçoit les informations au format HTML. Une page HTML est quelque chose de statique. Cependant, il est possible de générer dynamiquement des pages web en utilisant un langage de script comme le PHP par exemple. Le serveur génère alors du HTML après divers traitement.
Le Javascript permet de traiter dynamiquement du HTML ainsi que d'interagir avec le navigateur. Une utilisation courante du Javascript est la vérification de formulaire. Mais le Javascript est chargé une fois pour toute lors du chargement de la page. Il est compris dans le code HTML.
Le XML est un langage à balises permettant, entre autres, de stocker des données.
L'AJAX est un condensé de tout cela grâce à l'objet Javascript XMLHttpRequest.
L'objet XMLHttpRequest
Comme son nom l'indique, XMLHttpRequest permet de récupérer des informations XML ( ou du texte simple ) grâce à des requêtes HTTP.
De plus, XMLHttpRequest possède quelques méthodes intéressantes: onreadystatechange() et readyState() qui nous indique l'état de la requête ainsi que si toutes les informations nous sont bien parvenues.
Passons à un exemple
Maintenant que nous avons étudiez les principes essayons de comprendre comment fonctionne XMLHTTPrequest sur un exemple: un preloader.
Considérons la page sleep.php
// Assurons nous que le format de la page est correct:
header('Content-type: text/html; charset=iso-8859-1');
// Ralentissons l'execution de 4 secondes:
sleep(4);
// Effectuons un affichage quelconque:
echo "Hello World !";
?>
Maintenant regardons les grandes lignes de notre fonction Javascript:
if(window.XMLHttpRequest) xhr_object = new XMLHttpRequest(); // Firefox
else if(window.ActiveXObject) xhr_object = new ActiveXObject("Microsoft.XMLHTTP"); // Internet Explorer
else {
// XMLHttpRequest non supporté par le navigateur
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
return;
}
C'est maintenant que les choses sérieuses commencent:
On prépare notre requête vers la page sleep.php. Les informations peuvent être transmises par méthode POST ou GET, ce qui ne nous concerne pas ici car nous n'enverrons pas d'informations. Le troisième paramètre est un drapeau de synchronisation. On peut aussi indiqué un couple login / password.
Maintenant détectons les changements dans le flux.
xhr_object.onreadystatechange = function() {
//le fichier est completement chargé. Alors on affiche notre texte:
if(xhr_object.readyState == 4) {
// le fichier est chargé
document.getElementsById('display') = xhr_object.responseText;
}
else {
// si la page n'est pas encore chargé:
document.getElementsById('display') = "Chargement... ";
}
On définit le header.
On exécute la requête:
null signifie que l'on n'envoie pas d'information:
xhr_object.send(null);
Démonstration
Pour voir le code dans son intégralité, il vous suffit d'afficher la source.
XMLHttpRequest et le XML
Plus généralement, on se sert du script pour générer un page XML contenant une liste de valeur. Comme par exemple:
<villes>
<valeur>Coulaines</valeur>
<valeur>Sargé Lès Le Mans</valeur>
<valeur>Neuville Sur Sarthe</valeur>
<valeur>Saint Pavace</valeur>
</villes>
Qui sont les villes correspondant au code postal 72190.
On peut ensuite traiter ces informations avec l'objet DOM de JavaScript.
Par la suite je vous présenterais ce script de code postal dans un prochain billet. Je parlerais aussi d'un système de navigation dans une liste à index multiples ( Nomenclature des Activités Françaises ).