Les Chevaliers de Malte/Développeur - JavaScript - «AJAX»


L'AJAX, abréviation adopté par la communauté de «Asynchrone Javascript And Xml». Dans les modèles d'optimisation les plus intéressants des dernières années, l'AJAX est sans nulle doute la technique la plus interessante. Toutefois, elle ne fonctionne pas avec tous les navigateurs, ce modèle est supporté Internet Explorer avec l'Active X autorisé, Netscape, Firefox, Opera et Safari, mais lorsqu'on entre dans les navigateurs moins classique, sous DOS et ne supportant pas le JavaScript, alors cette technique devient impossible. En faite, on devrait dire que pour une application professionnel cette technique est crucial, mais pour un simple site informatif, la chose est beaucoup moins certaine.

L'idée dernière le AJAX c'est bien simple, effectuer un chargement d'un morceau de la page suite à une action ou un événement utilisateur.

Ecran de sortie

Le code présenté ici est inspiré d'à peu près tous les codes existant sur Internet, je n'ai pas réinventé la roue. Il est en deux morceaux, la page HTML contenant le code JavaScript et une fichier XML le plus simple possible. Voici enfin le petit code source permettant de produire cette effet:

<script language="JavaScript" type="text/javascript">
function makeRequest(URL,Caption) {
 var RequeteHTTP=false;
 if(window.XMLHttpRequest) { // Mozilla, Safari,...
  RequeteHTTP = new XMLHttpRequest();
  if(RequeteHTTP.overrideMimeType) RequeteHTTP.overrideMimeType('text/xml');
 } else if(window.ActiveXObject) { // Internet Explorer
  try {
   RequeteHTTP = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (e) {
   try {
    RequeteHTTP = new ActiveXObject("Msxml2.XMLHTTP");
   } catch (e) {}
  }
 }
 if(RequeteHTTP) {
  RequeteHTTP.onreadystatechange = function() { 
   var DocumentXML = RequeteHTTP.responseXML;
   try {
    document.getElementById(Caption).innerHTML=DocumentXML.getElementsByTagName("root").item(0).firstChild.data;
   } catch(e) {}
  };
  RequeteHTTP.open("GET", URL, true);
  RequeteHTTP.send(null);
 }
  else 
 alert("Opération annuler: Impossible de créer une instance XML par HTTP");
}
</script>
<INPUT TYPE=BUTTON Value="Appellez la page XML" onclick="makeRequest('test.xml','spSortie')">
<TABLE Border=1 BgColor="#000000" BorderColor="#000000" Width=100%><TR><TD>
<FONT COLOR=White>
<SPAN COLOR=White ID=spSortie>
Ecran de sortie<BR>
</SPAN>
</FONT>
</TD></TR></TABLE>
Et le code source «test.xml» charger lorsque vous appuyez sur le bouton:
<?xml version="1.0" ?>
<root>
Je suis un test.
</root>


Dernière mise à jour: Vendredi, le 10 novembre 2006