DOM - Objet XMLHttpRequest

L'objet XMLHttpRequest établit un support entre le côté client et le côté serveur d'une page Web qui peut être utilisé par les nombreux langages de script tels que JavaScript, JScript, VBScript et d'autres navigateurs Web pour transférer et manipuler les données XML.

Avec l'objet XMLHttpRequest, il est possible de mettre à jour la partie d'une page Web sans recharger la page entière, demander et recevoir les données d'un serveur après que la page a été chargée et envoyer les données au serveur.

Syntaxe

Un objet XMLHttpRequest peut être installé comme suit -

xmlhttp = new XMLHttpRequest();

Pour gérer tous les navigateurs, y compris IE5 et IE6, vérifiez si le navigateur prend en charge l'objet XMLHttpRequest comme ci-dessous -

if(window.XMLHttpRequest) // for Firefox, IE7+, Opera, Safari, ... {
   xmlHttp = new XMLHttpRequest();
} else if(window.ActiveXObject) // for Internet Explorer 5 or 6 {
   xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}

Des exemples pour charger un fichier XML à l'aide de l'objet XMLHttpRequest peuvent être consultés ici

Méthodes

Le tableau suivant répertorie les méthodes de l'objet XMLHttpRequest -

S.No.	Méthode et description
1	abort() Met fin à la demande en cours.
2	getAllResponseHeaders() Renvoie tous les en-têtes de réponse sous forme de chaîne, ou null si aucune réponse n'a été reçue.
3	getResponseHeader() Renvoie la chaîne contenant le texte de l'en-tête spécifié, ou null si la réponse n'a pas encore été reçue ou si l'en-tête n'existe pas dans la réponse.
4	open(method,url,async,uname,pswd) Il est utilisé en conjugaison avec la méthode Send pour envoyer la requête au serveur. La méthode ouverte spécifie les paramètres suivants - method - spécifie le type de demande, c'est-à-dire Get ou Post. url - c'est l'emplacement du fichier. async- indique comment la demande doit être traitée. C'est une valeur booléenne. où, «true» signifie que la demande est traitée de manière asynchrone sans attendre une réponse Http. «false» signifie que la demande est traitée de manière synchrone après réception de la réponse Http. uname - est le nom d'utilisateur. pswd - est le mot de passe.
5	send(string) Il est utilisé pour envoyer la requête fonctionnant en conjugaison avec la méthode Open.
6	setRequestHeader() L'en-tête contient la paire étiquette / valeur à laquelle la demande est envoyée.

Les attributs

Le tableau suivant répertorie les attributs de l'objet XMLHttpRequest -

S.No.	Attribut et description
1	onreadystatechange Il s'agit d'une propriété basée sur des événements qui est activée à chaque changement d'état.
2	readyState Cela décrit l'état actuel de l'objet XMLHttpRequest. Il existe cinq états possibles de la propriété readyState - readyState = 0 - signifie que la demande n'a pas encore été initialisée. readyState = 1 - la demande est définie. readyState = 2 - la demande est envoyée. readyState = 3 - la demande est en cours de traitement. readyState = 4 - la demande est terminée.
3	responseText Cette propriété est utilisée lorsque la réponse du serveur est un fichier texte.
4	responseXML Cette propriété est utilisée lorsque la réponse du serveur est un fichier XML.
5	status Donne le statut de l'objet de requête Http sous forme de nombre. Par exemple, "404" ou "200".
6	statusText Donne l'état de l'objet de requête Http sous forme de chaîne. Par exemple, "Non trouvé" ou "OK".

Exemples

Le contenu de node.xml est comme ci-dessous -

<?xml version = "1.0"?>
<Company>
   <Employee category = "Technical">
      <FirstName>Tanmay</FirstName>
      <LastName>Patil</LastName>
      <ContactNo>1234567890</ContactNo>
      <Email>[email protected]</Email>
   </Employee>
   
   <Employee category = "Non-Technical">
      <FirstName>Taniya</FirstName>
      <LastName>Mishra</LastName>
      <ContactNo>1234667898</ContactNo>
      <Email>[email protected]</Email>
   </Employee>
   
   <Employee category = "Management">
      <FirstName>Tanisha</FirstName>
      <LastName>Sharma</LastName>
      <ContactNo>1234562350</ContactNo>
      <Email>[email protected]</Email>
   </Employee>
</Company>

Récupérer des informations spécifiques d'un fichier de ressources

L'exemple suivant montre comment récupérer des informations spécifiques d'un fichier de ressources à l'aide de la méthode getResponseHeader () et de la propriété readState .

<!DOCTYPE html>
<html>
   <head>
      <meta http-equiv = "content-type" content = "text/html; charset = iso-8859-2" />
         <script>
            function loadXMLDoc() {
               var xmlHttp = null;
               if(window.XMLHttpRequest) // for Firefox, IE7+, Opera, Safari, ... {
                  xmlHttp = new XMLHttpRequest();
               }
               else if(window.ActiveXObject) // for Internet Explorer 5 or 6 {
                  xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
               }

               return xmlHttp;
            }

            function makerequest(serverPage, myDiv) {
               var request =  loadXMLDoc();
               request.open("GET", serverPage);
               request.send(null);

               request.onreadystatechange = function() {
                  if (request.readyState == 4) {
                     document.getElementById(myDiv).innerHTML = request.getResponseHeader("Content-length");
                  }
               }
            }
      </script>
   </head>
   <body>
      <button type = "button" onclick="makerequest('/dom/node.xml', 'ID')">Click me to get the specific ResponseHeader</button>
      <div id = "ID">Specific header information is returned.</div>
   </body>
</html>

Exécution

Enregistrez ce fichier sous le nom elementattribute_removeAttributeNS.htm sur le chemin du serveur (ce fichier et node_ns.xml doivent être sur le même chemin sur votre serveur). Nous obtiendrons la sortie comme indiqué ci-dessous -

Before removing the attributeNS: en
After removing the attributeNS: null

Récupérer les informations d'en-tête d'un fichier de ressources

L'exemple suivant montre comment récupérer les informations d'en-tête d'un fichier de ressources à l'aide de la méthode getAllResponseHeaders() en utilisant la propriété readyState.

<!DOCTYPE html>
<html>
   <head>
      <meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
      <script>
         function loadXMLDoc() {
            var xmlHttp = null;

            if(window.XMLHttpRequest) // for Firefox, IE7+, Opera, Safari, ... {
               xmlHttp = new XMLHttpRequest();
            } else if(window.ActiveXObject) //  for Internet Explorer 5 or 6 {
               xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }

            return xmlHttp;
         }

         function makerequest(serverPage, myDiv) {
            var request =  loadXMLDoc();
            request.open("GET", serverPage);
            request.send(null);
            request.onreadystatechange = function() {
               if (request.readyState == 4) {
                  document.getElementById(myDiv).innerHTML = request.getAllResponseHeaders();
               }
            }
         }
      </script>
   </head>
   <body>
      <button type = "button" onclick = "makerequest('/dom/node.xml', 'ID')">
         Click me to load the AllResponseHeaders</button>
      <div id = "ID"></div>
   </body>
</html>

Exécution

Enregistrez ce fichier sous http_allheader.html sur le chemin du serveur (ce fichier et node.xml doivent être sur le même chemin sur votre serveur). Nous obtiendrons la sortie comme indiqué ci-dessous (dépend du navigateur) -

Date: Sat, 27 Sep 2014 07:48:07 GMT Server: Apache Last-Modified: 
      Wed, 03 Sep 2014 06:35:30 GMT Etag: "464bf9-2af-50223713b8a60" Accept-Ranges: bytes Vary: Accept-Encoding,User-Agent 
      Content-Encoding: gzip Content-Length: 256 Content-Type: text/xml