[AJAX]T5 :Exemple de programme Ajax ~ Astuces et trucs informatique

Lire un texte

<html>

<head>

<script>

function submitForm()

{ 

    var xhr; 

    try {  xhr = new ActiveXObject('Msxml2.XMLHTTP');   }

    catch (e) 

    {

        try {   xhr = new ActiveXObject('Microsoft.XMLHTTP'); }

        catch (e2) 

        {

           try {  xhr = new XMLHttpRequest();  }

           catch (e3) {  xhr = false;   }

         }

    }

    xhr.onreadystatechange  = function() 

    { 

       if(xhr.readyState  == 4)

       {

        if(xhr.status  == 200) 

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

        else

            document.ajax.dyn="Error code " + xhr.status;

        }

    }; 

   xhr.open( GET", "data.xml",  true); 

   xhr.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>

Syntaxe de formulaire utilisant Ajax

Commentaires sur le code:

new ActiveXObject(Microsoft.XMLHTTP)
   Ce constructeur est pour Internet Explorer.

new XMLHttpRequest()
   Ce constructeur est pour tout autre navigateur incluant Firefox.

http.onreadystatechange
  On associe un traitement (une fonction anonyme en l'occurrence) à cet indicateur d'évènement.

http.readyState == 4
   L'état 4 signifie que la réponse est envoyée par le serveur et disponible.

http.status == 200
   Ce status signifie ok, sinon un code d'erreur quelconque est envoyé, 404 par exemple.

http.open( "POST", "data.xml", true);
   - POST ou GET
   -url du fichier.
   - true pour asynchrone (false pour synchrone).

http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
   Cette méthode s'utilise seulement avec POST.

http.send(document.getElementById("TYPEDTEXT").value);
   Envoi des données au serveur. Les données sont prises dans le champ dont l'id est "TYPEDTEXT" et qui est rempli par l'utilisateur grâce à un formulaire.

Démonstration

Lire dans un fichier XML

Pour lire des données dans un fichier XML il suffit de remplacer la ligne:

document.ajax.dyn="Reçu: " + xhr.responseText;

par ce code:

//  Assigner le fichier XML à une variable

var doc = xhr.responseXML; 

//  Lire le premier élément avec DOM

var element = doc.getElementsByTagName('root').item(0);

//  Copier le contenu dans le formulaire 

document.ajax.dyn.value= element.firstChild.data;

Démonstration

Ecrire dans la page

Le texte récupéré est inscrit dans le corps de la page et non dans un champ de texte. Le code ci-dessous remplace l'objet de formulaire textfield et la seconde partie remplace l'assignement dans la fonction JavaScript.

<div id="zone">

 <span class="Style1">... un texte à remplacer...</span>

 </div>

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

Démonstration

Reçu: Hello Issam!

Envoyer un texte

Un texte est envoyé au serveur et sera écrit dans un fichier. L'appel de la méthode "open" change, le premier argument est POST, le second est le nom du fichier ou du script qui recevra les données et doit les traiter. Et la méthode "send" aussi a pour argument une valeur qui est une chaîne de paramètres.

xhr.open("POST", "ajax-post-text.php", true);

xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  

xhr.send(data);

L'argument de send est au format des paramètres de la méthode POST. S'il y a plusieurs données, on les sépare par le symbole "et" commercial:

var data = "file=" + url +  "&content=" + content;

Le paramètre "file" est un fichier qui contiendra le contenu "content". Le nom du fichier doit être vérifié par le serveur pour éviter qu'un autre fichier ne puisse être modifié.

Téléchargement

Demonstrations et code source.
Les démonstrations de la page dans des fichiers individuels et la démonstration de POST.
On peut les tester localement avec un serveur local comme Wamp.

mercredi 30 mai 2012