Ajax

— Laisser un commentaire

Exemple de transaction Ajax :
On affiche une page avec un bouton (« connaitre le statut de la LED ») si dans le fichier texte ledstatus.txt il est écrit LED=ON alors on affiche la LED est ON sinon on affiche la LED est OFF.

Fichier TestLed.html :

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
 <title>Techniques AJAX - XMLHttpRequest</title>  
 <script type="text/javascript" src="oXHR.js"></script>  
 <script type="text/javascript">  
 <!--   
 function request(callback) {  
      var xhr = getXMLHttpRequest();  
      xhr.onreadystatechange = function() {  
           if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {  
                callback(xhr.responseText);  
                //xhr.responseText  
                //xhr.responseXML  
           }  
      };  
      xhr.open("GET", "ledstatus.txt", true);  
      xhr.send(null);  
 }  
 function drawData(stringDataIn) { // fonction de gestion des donnees recues - fonction de callback passee en parametre a la fonction de requete AJAX  
 if (stringDataIn.indexOf("ON")>0)  
   alert("Super, la LED est ON");   
 else   
   alert("La LED est OFF.....");   
 } // fin fonction drawData  
 //--------------------------  
 </script>  
 </head>  
 <body>  
      <p>  
      <button onclick="request(drawData);">Afficher le statut de la LED</button>  
      <div id="output"></div>  
 </p>  
 <p>  
 </p>  
 </body>  
 </html>

Qui a besoin du fichier oXHR.js :

 /* ** cartouche ********************************************************************* */  
 /* Script complet de gestion d'une requête de type XMLHttpRequest           */  
 /* Par Sébastien de la Marck (aka Thunderseb)                     */  
 /* ********************************************************************************** */  
 function getXMLHttpRequest() {  
      var xhr = null;  
      if (window.XMLHttpRequest || window.ActiveXObject) {  
           if (window.ActiveXObject) {  
                try {  
                     xhr = new ActiveXObject("Msxml2.XMLHTTP");  
                } catch(e) {  
                     xhr = new ActiveXObject("Microsoft.XMLHTTP");  
                }  
           } else {  
                xhr = new XMLHttpRequest();   
           }  
      } else {  
           alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");  
           return null;  
      }  
      return xhr;  
 }

Et du fichier ledstatus.txt

Le serveur recevra l’entête Http suivante :

 GET xxxx HTTP/1.1  
 Host: 192.168.10.10  
 User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux i686; rv:18.0)

Où xxxx est le paramètre passé dans l’instruction xhr.open(« GET », « xxxx », true);

Exemple : xhr.open(« GET », « ledstatus.txt », true);

Nous enverrons dans xxxx le paramètre que l’on désire faire traiter à la carte Arduino (normalement c’est le nom d’un fichier qui peut être texte ou xml qui doit exister sur le serveur)