Programmation Ajax

Généralités

Ajax utilise un objet Javascript : XmlHttpRequest (XHR) qui permet d'obtenir des données depuis un serveur sans avoir à recharger la page dans son intégralité. XHR est une classe qui est reconnue par tous les navigateurs actuels et par le langage de programmation fonctionnant coté client JavaScript.
  1. un évènement de la page web provoque un appel XHR (XmlHttpRequest)
  2. Le service serveur invoqué par XHR traite la requête
  3. Le code Javascript de la couche client exploite la réponse ou intègre les données de la réponse dans l'arbre DOM de la page HTML

Problèmes courants

Utilisation en local

Chrome bloque l'utilisation de XHR en local. Solution: ajouter l'option --allow-file-access-from-files
IE bloque l'utilisation de XHR en local. Solution: utiliser ActiveXObject 

var xhr=null;
if (window.ActiveXObject) 	xhr = new ActiveXObject("Microsoft.XMLHTTP");
else if (window.XMLHttpRequest)  xhr = new XMLHttpRequest();

problème des accents

L'encodage doit rester celui de la page HTML qui envoie les requêtes. Sous Apache, cela nécessite éventuellement une petite reconfiguration: modifier la variable suivante dans httpd.conf: AddDefaultCharset Off

Le problème de mémoire cache

L'anté-mémoire fonctionne mal avec l'objet. Le fichier chargé par la méthode GET n'est pas toujours la dernière version mais le plus souvent une version conservée en mémoire cache. Si le fichier n'est pas trop gros, cela peut se résoudre en utilisant: 
xhr.open("GET", "data.xml?nocache=" + Math.random(), true);

Programme de base synchrone

send() ne prend pas de paramètre pour méthode GET 
xhr = new XMLHttpRequest();
xhr.open('GET', 'reponse_ajax.txt', false); //false=synchrone
xhr.send();
alert(xhr.responseText);

Programme de base asynchrone

var xhr= new XMLHttpRequest();
xhr.open('GET', 'reponse_ajax.txt', true); //true=asynchrone
xhr.onload=function () {alert(this.responseText)} //callback en xhr2. Pour xhr voir exemple utilisant onreadystatechange
xhr.send();

Exemples

Exemple simple
Autres exemples

XMLHttpRequest

2 modes possibles : synchrone et asynchrone,
2 méthodes possibles : GET et POST 
var xhr;		// objet XmlHttpRequest
var mode;                     // true (asynchrone) ou false (synchrone)
var params = "p1=v1&p2=v2"    // paramètres de la requête
  
// appel avec la méthode GET avec paramètres
xhr.open("GET", urlServeur + "?" + params, mode);
xhr.send(null);
  
// appel avec la méthode POST avec paramètres
xhr.open("POST", urlServeur, mode);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(params);

Exemples de Flux

Attributs de la classe xhr

attributdescription
xhr.responseTextContient les données chargées, au fur et à mesure, sous forme de chaine de caractères. Elle est complètement remplie quand l'état vaut 4.
xhr.responseXMLContient un fichier XML chargé, et les méthodes de DOM permettront d'en extraire les données. Elle est assignée seulement au moment ou l'état est 4, et vaut null avant.
xhr.response*utilisé pour type 'arraybuffer'
xhr.responseType*Définir en 'arraybuffer' pour chargement de donnée binaire. Autres types existant: "blob", "document", "json", et "text".
xhr.onload*invoqué quand chargement terminé. Définir avant appel de xhr.send(). Passe xhr en paramètre de la fonction callback.
xhr.onreadystatechangeinvoqué quand readyState est assigné
xhr.readyStateLe code change successivement de valeur jusqu'à ce que le serveur soit prêt de, passant de 0 à 4. 
xhr.onreadystatechange = function()   {
 retour="readyState="+xhr.readyState;                
 if(xhr.readyState == 4) 
	retour="status code= "+xhr.status+" "+ xhr.statusText;
}
xhr.statusCode retour HTTP. 200 = ok, 404= pas trouvé
* xhr2

Méthodes de la classe xhr

attributdescription
xhr.abort()stoppe activité
xhr.getResponseHeader(nomEntete)Retourne l'en-tête HTTP des données reçues après la dernière requête. Par exemple, xhr.getResponseHeader("Content-Type")
xhr.getAllResponseHeaders()Retourne tous les entêtes HTTP sauf Set-Cookie
xhr.open(mode, url, asynchrone [,login, password])mode: type de requête HTTP, GET, POST, HEAD
url: le chemin du fichier.
asynchrone: faux → synchrone.
xhr.send(param)param vide avec mode GET
setRequestHeader(DOMString, DOMString)Les arguments sont le nom de l'en-tête et la valeur. Plusieurs valeurs peuvent être envoyées successivement.

xhrGet

function xhrGet(reqUri, callback, type) {
	var caller=xhrGet.caller
    var xhr=new XMLHttpRequest
    xhr.open("GET",reqUri,true)
    if (callback) xhr.load=function(xhr) {
		try {callback(xhr)}
		catch(e) {throw 'Erreur xhrGet\n URL: '+reqUri+'\nErreur: '+e+'responseText: '+xhr.responseText+'\nCaller: '+caller} 
	}
    if (type) xhr.responseType=type
    xhr.send()
}

parseJSON = function (xhr) {
    parsedJSON = JSON.parse(xhr.responseText);
    x = parsedJSON['frames']['chaingun_impact.png']['spriteSourceSize']['x'];
    console.log(x);
    return x;
};

    xhrGet('/media/js/standalone/libs/gamedev_assets/weapon.json', parseJSON, null);
    xhrGet('/media/js/standalone/libs/gamedev_assets/bg_menu.ogg', playSound, 'arraybuffer');
exemple implémentation de xhrGet

Données EXIF d'une image

Données EXIF d'un fichier JPEG