mardi 24 juillet 2007

La base d'AJAX : XMLHttpRequest()

Un exemple très (trop) simple d'utilisation de XMLHttpRequest() sous Firefox (*). Quand on clique sur 'click-me', la fonction click() va chercher la page supplement.php avec XMLHttpRequest(). Le résultat s'affiche dans une boîte d'alerte...


<html>
<head>
<title>Simplest AJAX</title>
<script>
function click()
{
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function()
{
if (xmlHttp.readyState == 4)
{
alert(xmlHttp.responseText);
var resp = xmlHttp.responseXML;
var z = resp.getElementsByTagName("tagada");
alert(z[0].childNodes[0].nodeValue);
}
}
xmlHttp.open("GET", "http://localhost/tests/supplement.php");
xmlHttp.send(null);
}
</script>
</head>
<body>
<h1>A (very) simple use of XMLHttpRequest()</h1>
<p style="background-color:yellow;" onclick="click()">click-me</p>
</body>
</html>


Avec, sur le serveur, supplement.php qui fournit une page de type 'text/xml' pour pouvoir utiliser responseXML.


<?php
header("Content-Type: text/xml");
header("Cache-Control: no-cache, must-revalidate");
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
?>
<xml>
<tagada>
haha...
</tagada>
<tagb> Ho </tagb>
</xml>



(*) Pour IE et Firefox, il faut remplacer la ligne

var xmlHttp = new XMLHttpRequest();

par

var xmlHttp = null;

if(window.XMLHttpRequest) // Firefox
xmlHttp = new XMLHttpRequest();
else if(window.ActiveXObject) // Internet Explorer
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
else { // XMLHttpRequest non supporté par le navigateur
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
return;
}

...Quand on peut faire simple...

Aucun commentaire: