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');
} elseif(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