AJAX

AJAX (Asynchronous Javascript And Xml)

Aperçu général

Ajax n'est pas un langage de programmation
dans le cycle normal de requête/réponse HTTP, le navigateur est bloqué en attendant une réponse et la page entière doit être affichée
avec Ajax, des requêtes asynchrones peuvent être envoyées et les réponses sont utilisées pour mettre à jour une partie de la page
- l'usager peut interagir avec la page lors du traitement d'une requête
- moins de données à transmettre
- la mise à jour de la page plus rapide
basé sur XMLHttpRequest
- Microsoft a introduit les objets XMLHTML pour faire des requêtes asynchrones à partir du code Javascript
- présentement, la plupart des navigateurs utilisent les objets XMLHttpRequest
permet d'effectuer des traitements sur le poste client (avec JavaScript) à partir d'informations prises sur le serveur
La classe XMLHttpRequest lit des données ou fichiers sur le serveur de façon asynchone
DOM peut etre utilisé pour accéder aux éléments de la page ou aux éléments d'un fichier xml pris sur le serveur (avec la méthode getElementByTagName par exemple)
un langage de scripts comme PHP peut être utilisé coté serveur

Classe XMLHttpRequest

méthodes :

open(méthode, url[, boolean[, user[, password]]])
- méthode: type de requête, GET ou POST
- url: l'endroit ou trouver les données, un fichier avec son chemin sur le disque
- boolean: true (asynchrone) / false (synchrone)
- en option on peut ajouter un login et un mot de passe
send("chaine") - envoie la requête HTTP au serveur en transmettant des données sous forme d'une chaine ou sous forme d'un objet DOM
abort() - annule la requête courante
setTimeouts(timeout) - spécifie la durée maximale accordée à une requête

attributs :

readyState

le code d'état passe successivement de 0 à 4 :

0	uninitialized	non initialisé
1	loading	début du transfert des données
2	loaded	données transférées
3	interactive	les données reçues sont accssibles en partie
4	complete	les données sont complètement accessibles

status

200 (ok), 404 (page n'est pas trouvée), ...

responseText

contient les données chargées dans une chaîne de caractères

responseXML

contient les données chargées sous forme xml

onreadystatechange

propriété activée par un évènement de changement d'état. On lui associe une fonction.

Construction d'une requête

if (window.XMLHttpRequest) { // Objet de la fenêtre courant requete = new XMLHttpRequest(); // Firefox, Safari, ... } else if (window.ActiveXObject) { // Version Active (pour IE < 7) requete = new ActiveXObject("Microsoft.XMLHTTP"); // Internet Explorer }

Avantages

On peut lire dans un fichier xml.
Exemple et son code source

Au lieu de générer la page entière sur le serveur, on peut modifier une page existante avec les données venant du serveur.
Exemple et son code source
Dans la ligne

document.getElementById("a_modifier").innerHTML = "Received:" + req.responseText;

la propriété innerHTML est utilisé pour définir le balisage et le contenu au sein de l'élément a_modifier.

Inconvénients

Si JavaScript est désactivé, Ajax ne peut fonctionner.

Si l'on charge les données à afficher de façon dynamique, elles ne sont pas prises en compte par les moteurs de recherche.

Nombreuses questions d'accessibilité (le contexte de navigation peut être modifié sans que l'utilisateur n'en soit nécessairement averti).