Exemple d'AJAX

<html>
<head>
<script>
function submitForm()
{
  var req = null;
  if(window.XMLHttpRequest) req = new XMLHttpRequest();
  else
    if (window.ActiveXObject)  req = new ActiveXObject(Microsoft.XMLHTTP);

  req.onreadystatechange = function()
  {
    if(req.readyState == 4)
    {
       if(req.status == 200)
           document.ajax.dyn="Received:" + req.responseText;
       else
           document.ajax.dyn="Error code " + req.status;
  };
  req.open( GET", "data.xml", true);
  req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  req.send(null);
}
</script>
</head>

<body>
<FORM method="POST" name="ajax" action="">
   <INPUT type="BUTTON" value="Submit" ONCLICK="submitForm()">
<INPUT type="text" name="dyn" value="">
</FORM>
</body>
</html>

Commente le code :

nouvel ActiveXObject (Microsoft.XMLHTTP)

Ce constructeur est seulement pour l'Internet Explorer.

nouveau XMLHttpRequest ()

Ce constructeur est seulement pour n'importe quel autre navigateur comprenant Firefox.

http.onreadystatechange

Une fonction anonyme est assignée aux indicateurs d'événement

== 4 de http.readyState

Les 4 moyens d'état pour la réponse est prêt à envoyer et envoyé par le serveur

== 200 de http.status

Ce statut signifie bien, autrement le code de quelques erreurs est retourné, 404 par exemple.

http.open (le « POTEAU », « data.xml », rectifient) ;

SIGNALER ou OBTENIR
URL des manuscrits à exécuter.
rectifier pour asynchrone.

http.setRequestHeader (« Contenu-Type », « applications/x-www-form-urlencoded ») ;

C'est pour la méthode de POTEAU seulement.

http.send (document.getElementById (« TYPEDTEXT ») .value) ;

Envoie des données au serveur. Les données viennent du throught rempli variable de « TYPEDTEXT » la forme par l'utilisateur.

2) Obtenir de XML

Pour nous obtenir à des données à partir d'un dossier de XML devons remplacer cette ligne :

document.ajax.dyn=""Received:" + req.responseText;

par ce code

var doc = req.responseXML; // assign the XML file to a var
var element = doc.getElementsByTagName('root').item(0); // read the first element with a dom's method
document.ajax.dyn.value= element.firstChild.data; // assign the content of the element to the form

3) Écrire au corps

Dans cet exemple, le texte lu est mis dans le corps de la page, et pas dans un textfield. Le code ci-dessous remplace l'objet de forme de textfield et la deuxième partie remplace la tâche dans la fonction de Javascript.

<div id="zone">
... some text to replace ...
</div>

document.getElementById("zone").innerHTML = "Received:" + req.responseText;

4) Signaler un texte

Dans cet exemple, un texte est envoyé au serveur et est écrit à un dossier. L'appel à la méthode « ouverte » change, l'argument est méthode de POTEAU, et « envoyer » la méthode a également maintenant une valeur pour l'argument.

req.open("POST", "ajax-post.xml", true);
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.send(document.getElementById("dyn").value);