AJAX et XMLHTTPRequest - Partie II

Dev

posté le 15 mars 06 par Denis Hovart

tags: dom, http, ie, objet, xhtml, xml, xmlhttprequest, ajax

Ceci est la deuxième partie d’un article sur AJAX et XMLHTTPRequest en cinq parties.

Fonctionnement Global

Un système dans lequel le client occupe une place déterminante

Le principe de fonctionnement de l’objet est relativement simple à comprendre. Il repose entièrement sur une architecture client/serveur, où les deux jouent un rôle aussi important. Ces rôles sont plus ou moins inversés par rapport à l’ordinaire: le serveur ne génère pas la page, il ne fait que renvoyer un contenu donné, et la page fait office de contenant. C’est le client qui s’occupe d’arranger à sa guise la structure de la page, grâce à des manipulations DOM par Javascript.

Pour résumer, nous avons donc: – un contenant : la page XHTML – un contenu, renvoyé par le serveur après qu’on lui ait passé une requête, et qui est encodé au format XML, – un script Javascript, qui modifie le contenant pour l’emplir du contenu.

Je préfère préciser un point: je parle ici de page XHTML, de contenu renvoyé au format XML et de DOM. Il y a moyen de s’affranchir totalement du format XML, en renvoyant du texte simple ou du texte formaté en HTML, mais alors on ne respecte plus les standards. Voilà pourquoi:

1. pour afficher ce type de contenu, il faut passer soit par innerHTML, qui est une méthode propriétaire de Internet Explorer (bien que son utilisation se soit généralisée), soit par document.write, or dans la spécification DOM, le W3C ne définit aucune méthode write pour l’objet document.
2. il s’agit là de manipulation de chaînes de caractères et en XHTML, on ne manipule plus des chaînes mais des noeuds.

Le protocole HTTP: ce par quoi tout transite

Maintenant que nous avons mis cela au clair, analysons plus en détail la façon dont transite ce contenu. Cela sera essentiel par la suite. Nous avons parlé de XML, de XHTML, de Javascript, mais pas encore du protocole HTTP. Pour utiliser une comparaison un peu tordue, imaginons que sous sommes dans un bar, et que le client fasse au serveur la requête d’un café. Le protocole HTTP est l’”intelligence”, le cerveau de ce serveur: c’est ce qui lui permet de dire au client si effectivement il possède telle ou telle boisson, s’il peut ou non remplir le verre (le contenant) du client du contenu désiré. Si ce n’est pas le cas, il avertit le client que ça n’est pas possible.
Cela se passe ainsi à chaque fois que vous visitez une page web. En cas d’erreur, on vous renvoit un code: “404” pour “non trouvé”, “400” si la requête n’a pas été énoncée correctement (problème de syntaxe), ou encore “200” si tout s’est bien déroulé.

Il est important de connaître ces codes pour indiquer au client si sa recherche a pu ou non aboutir. Il en existe de très nombreux, mais vous n’aurez besoin que des plus essentiels (voire partie suivante).

Methodes et proprietés de l’objet.

Instanciation de l’objet

La création par le W3C d’une spécification sur l’objet XMLHTTPRequest est toute récente (voir http://www.w3.org/2006/webapi/), ce qui signifie que son utilisation dépend encore du navigateur utilisé. Pour Internet Explorer, en particulier, il faut passer par des méthodes ActiveX propriétaires pour instancier l’objet.

Instanciation de l’objet via ActiveX :

 var xhr = new ActiveXObject("Microsoft.XMLHTTP");

ou encore :

 var xhr = new ActiveXObject("Msxml2.XMLHTTP");

La différence entre les deux méthodes ? La première est indépendante des versions de Msxml, le moteur XML d’IE, et fonctionne sous IE 5, 5.5 et 6. Au contraire, la seconde se base sur une version de ce moteur en particulier.

Pour les autres navigateurs (Mozilla, Firefox, Safari, Konqueror, Opéra) :

 var xhr =new XMLHttpRequest();

Méthodes

• open
  Utilisation :

   open("méthode", "url", asyncFlag);

  Options pour méthodes : HEAD (headers http), GET ou POST Url: l’url du script serveur AsyncFlag : booléen (true ou false). Cela permet d’indiquer si la requête doit être synchrone ou asynchrone.
• send : envoyer une requête
  Utilisation :

   send(données);

  Il n’est pas nécéssaire d’envoyer des données en même temps que la requête (si par exemple les données sont définies dans l’URL, en GET), donc on peut mettre null à la place. En revanche, cela est indispensable si la méthode choisie est POST.



• abort : annuler la requête
  Utilisation :

   abort();

• getResponseHeader : r_etourne un header HTTP_
  Utilisation :

   getResponseHeader("nom_du_champ");

• getAllResponseHeaders : retourne tous les headers HTTP
  Utilisation :

   getResponseHeaders();

Propriétés :

• readyState: l’état de l’objet. Valeurs possibles: 0 = au point mort, 1 = instruction open effectuée, 2 = requête effectuée, 3 = en train de recevoir les données, 4 = données bien reçues.
• responseText: la réponse du script serveur au format texte
• responseXML: la réponse du script serveur au format XML
• onreadystatechange: vérifie si l’état de l’objet a changé (doit être suivi d’une fonction)
• status: le code HTTP renvoyé.
• statusText: le message lié au code de réponse du serveur HTTP

Vous trouverez à cette adresse une liste des différents codes HTTP et leur signification.