XMLHttpRequest : introduction

L’ objet XMLHttpRequest permet de dialoguer avec un serveur, d’échanger des données tous en restant sur le même page. Cela permet d’avoir une page qui peut changer d’aspect.
Il y a plusieurs étapes dans un échange :

1. Création d’un requêteur
2. Définition de la requête (mode de synchronisation, méthode HTTP (GET,POST...) URL destinataire, paramètres et données éventuelles.
3. Envoi de la requête
4. Invocation du gestionnaire d’état au fil du cycle de vie de la requête
5. Lorsque la réponse est complétement reçue, traitementde celle-ci par JavaScript

Création d’un requêteur

function getRequester() {
   try {
	result = new XMLHttpRequest();
   } catch (e) {
       result = false;
   }
  return result;
} // getRequester

Voici c’est simple sauf que cela ne marche pas sur MSIE version 5 et 6. Comme je n’utilise pas ses navigateurs, je ne vais pas m’embêter.

decrire la requête

var requester = getRequester();
requester.open('POST','/hi',true);

la méthode HTTP utilisé :

• GET : les informations nécessaire au serveur vont être envoyées dans l’URL : _ www.toto.fr ?article=15&nom=ed les données article = 15 et nom = ed sont être connu par le serveur). Le corps de la requête peut être vide si l’on a transmis toutes les informations dans l’URL.
• POST : les informations vont être envoyées dans le corps. _TAF : revoir en java, je pensais que l’on envoyait des beans.

envoyer une requete

// exemple en POST 
requester.open('POST','/hi',true);
requester.send('article=15&nom=ed');

// exemple en GET 
requester.open('GET','/hi?article=15&nom=ed',true);
requester.send(null);

Rappel : les informations à envoyées sont codé avec urlencoded.

Recevoir et traiter la réponse

Pour suivre la progression de la requête, il faut mettre un fonction "mouchard". L’objet requester possède une propriété readyState qui prend successivement 5 valeurs récapitulées dans le tableau suivant :
 0 non initialisé ( pas encore de open)
 1 ouvert ( open s’est correctement exécuté)
 2 envoyé ( requête préparée et send fait)
 3 en réception ( des données arrivent mais ce n’est pas la fin )
 4 réception terminée ( toutes les données sont arrivées )
Et lors de chaque changement d’état de readyState, la fonction onreadystatechange est appelée. C’est l’état 4 qui nous intéresse.

requester.onreadystatechange = function() {
    if (4 == requester.readyState && 200 == requester.status)
        alert("Maintenant : " + requester.responseText);
};

exemple simple

voir le code JavaSCript

 
function getRequester() {
   try {
       result = new XMLHttpRequest();
   } catch (e) {
 	result = false;
   }
   return result;
} // getRequester

function askTime(e) {
	var requester = getRequester();
	requester.onreadystatechange = function() {
		if (4 == requester.readyState && 200 == requester.status)
			alert("Maintenant : " + requester.responseText);
	};
	requester.open("GET", "php/time.php", true);
	requester.send(null);
} // askTime

coté serveur en Ruby
Avec Ruby, le code du coté serveur est beaucoup plus propre, c’est facile à tester localement mais difficile à déployer chez un héberger de site internet.

 
#! /usr/bin/env ruby
require 'webrick'
include WEBrick

# Configure le serveur HTTP sur le port 8042
server = HTTPServer.new(:Port => 8042)

server.mount('/',HTTPServlet::FileHandler,'../exercice/XMLHttpRequest')

server.mount_proc('/hi') do |request, response|
  response.body = 'Bonjour !'
end

server.mount_proc('/time') do |request, response|
  response.body = Time.now.to_s
end
# le Ctrl+C arrêtera le serveur
trap('INT') {server.shutdown }

server.start

coté serveur en PHP

faire le test

Pour visualiser les échanges, on peut utiliser firebug.