Exemple AJAX

L'objet XMLHttpRequest et AJAX

L'objet XMLHttpRequest peut différer selon les navigateurs (surtout sur les anciens). Ainsi, il est nécessaire d'écrire une petit fonction Javascript qui nous retournera le bon objet XMLHttpRequest en fonction du navigateur du client.

// Fonction permettant de récupérer l'objet XHR
// automatiquement en fonction du navigateur

function getXhr()
{
var xhr = null;

// Réupération de l'objet XHR d'Internet Explorer anciennes
// versions si il existe
try { xhr = new ActiveXObject('Msxml2.XMLHTTP'); }
catch (e1)
{
// Réupération de l'objet XHR d'Internet Explorer anciennes
// versions si il existe
try { xhr = new ActiveXObject('Microsoft.XMLHTTP'); }
catch (e2)
{
// Réupération de l'objet XHR des navigateurs modernes
// (Firefox, Chrome, Safari...) si il existe
try { xhr = new XMLHttpRequest(); }
catch (e3)
{
alert("AJAX n'est pas supporté par votre navigateur");
return false;
}
}
}

return xhr;
}

Une fois notre objet XMLHttpRequest a disposition il nous reste à envoyer une requête au serveur :

// Récupération de l'objet XMLHttpRequest

var xhr = getXhr();

// On assigne une fonction qui, lorsque l'état de la requête change, va traiter le résultat

xhr.onreadystatechange = function()
{
// readyState 4 = requête terminée
if (xhr.readyState == 4)
{
// status 200 = page requêtée trouvée
if (xhr.status == 200)
{
// ... traitement en cas de succès
}
// Page non trouvée
else
{
// ... traitement en cas d'échec
}
}
};

// Préparation de la requête (en HTTP GET et asynchrone)
var url = 'http://mon-site.fr/script-traitement-ajax.php?param=valeur';
xhr.open('GET', url, true);

// Execution de la requête
xhr.send(null);

On assigne ici une fonction de traitement à l'objet XHR via sa propriété .onreadystatechange. Cette fonction sera automatiquement appelée par l'objet XHR à chaque fois que son statut changera. C'est dans cette fonction que nous pourrons vérifier si la requête a bien été exécutée et traiter les données retournées.

A noter que, dans cette fonction liée à .onreadystatechange, la propriété .readyState de l'objet XHR retourne l'état de la requête (2 = résultat partiellement reçu, 3 = chargement, 4 = OK). Aussi, sa propriété .status retourne le code de statut HTTP (200 = OK, 404 = page non trouvée, 500 = erreur du serveur ; pour plus de codes HTTP, voir la page Wikipédia sur les codes de statuts HTTP).

Ensuite nous faisons appel à la méthode open(), qui prend 3 paramètres :

1. La méthode d'envoi de la requête (GET, POST) ;
2. L'URL à laquelle envoyer la requête ;
3. Booléen indiquant si la requête doit être asynchrone ou non (toujours à true pour faire du AJAX)

Enfin nous appelons la méthode send(), qui prend 1 paramètre si la requête est de type POST, ou null sinon :

1. Données à envoyer au serveur (reste à null dans 99% des cas, le reste étant des cas très spécifiques que nous ne traiterons pas ici)

Le résultat de la requête est ensuite retourné dans la propriété .responseText, ou dans .responseXML pour récupérer le contenu sous forme d'un objet DOM XML.

Exemple d'un script AJAX

Voici un petit exemple concret :

Au chargement de la page, on demande au serveur de nous retourner le résultat d'un script PHP, puis on l'affiche dans un élément HTML. Si la requête AJAX échoue, on affiche le texte "Error..." dans l'élément.

Fichier PHP

/*** Fichier PHP (script.php)
*
* Notre script va prendre un élément aléatoirement
* dans le tableau et l'afficher.
*/

<?php
$somebody = array('World', 'Foobar', 'John Doe');
shuffle($somebody);
printf('Hello %s!', $somebody[0]);
?>

Fichier HTML

/*** HTML ***/

<div id="ajaxBox"></div>

Fichier HTML

/*** Javascript ***/

// Au chargement de la page, déclencher la fonction ajaxBox_update()
window.onload = ajaxBox_update;

// Fonction effectuant la requête AJAX
function ajaxBox_update()
{
// Récupération de l'objet XHR
var xhr = getXhr();

// On assigne une fonction qui, lorsque l'état de la requête change, va traiter le résultat
xhr.onreadystatechange = function()
{
// readyState 4 = requête terminée
if (xhr.readyState == 4)
{
// status 200 = page requêtée trouvée
if (xhr.status == 200)
ajaxBox_setText(xhr.responseText);
// Page non trouvée
else
ajaxBox_setText('Error...');
}
};

// Préparation et éxecution de la requête
var url = 'http://site.com/script.php';
xhr.open('GET', url, true);
xhr.send(null);
}

// Fonction de mise à jour du contenu de la div #ajaxBox
// Cette fonction ajoute un element <p> contenant le message, dans le div #ajaxBox

function ajaxBox_setText(pText)
{
var elt = document.getElementById('ajaxBox');
var p = elt.appendChild(document.createElement('p'));
p.appendChild(document.createTextNode(pText));
}

Libre à vous donc de lier, sur différents évènements, des appels AJAX et leurs traitements spécifiques.