DOM - Oggetto XMLHttpRequest

L'oggetto XMLHttpRequest stabilisce un mezzo tra il lato client e il lato server di una pagina Web che può essere utilizzato da molti linguaggi di scripting come JavaScript, JScript, VBScript e altri browser Web per trasferire e manipolare i dati XML.

Con l'oggetto XMLHttpRequest è possibile aggiornare la parte di una pagina web senza ricaricare l'intera pagina, richiedere e ricevere i dati da un server dopo che la pagina è stata caricata e inviare i dati al server.

Sintassi

Un oggetto XMLHttpRequest può essere istanziato come segue:

xmlhttp = new XMLHttpRequest();

Per gestire tutti i browser, inclusi IE5 e IE6, controlla se il browser supporta l'oggetto XMLHttpRequest come di seguito:

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");
}

Gli esempi per caricare un file XML utilizzando l'oggetto XMLHttpRequest possono essere indicati qui

Metodi

La tabella seguente elenca i metodi dell'oggetto XMLHttpRequest -

S.No. Metodo e descrizione
1

abort()

Termina la richiesta corrente effettuata.
2

getAllResponseHeaders()

Restituisce tutte le intestazioni della risposta come stringa o null se non è stata ricevuta alcuna risposta.
3

getResponseHeader()

Restituisce la stringa contenente il testo dell'intestazione specificata o null se la risposta non è stata ancora ricevuta o l'intestazione non esiste nella risposta.
4

open(method,url,async,uname,pswd)

Viene utilizzato in combinazione con il metodo Send per inviare la richiesta al server. Il metodo open specifica i seguenti parametri:

  • method - specifica il tipo di richiesta, ovvero Get o Post.

  • url - è la posizione del file.

  • async- indica come deve essere gestita la richiesta. È un valore booleano. dove,

    • "true" significa che la richiesta viene elaborata in modo asincrono senza attendere una risposta Http.

    • "false" significa che la richiesta viene elaborata in modo sincrono dopo aver ricevuto la risposta Http.

  • uname - è il nome utente.

  • pswd - è la password.
5

send(string)

Serve per inviare la richiesta lavorando in coniugazione con il metodo Open.
6

setRequestHeader()

L'intestazione contiene la coppia etichetta / valore a cui viene inviata la richiesta.

Attributi

La tabella seguente elenca gli attributi dell'oggetto XMLHttpRequest -

S.No. Attributo e descrizione
1

onreadystatechange

È una proprietà basata su eventi che viene attivata ad ogni cambio di stato.
2

readyState

Descrive lo stato attuale dell'oggetto XMLHttpRequest. Sono disponibili cinque stati possibili della proprietà readyState:

  • readyState = 0 - significa che la richiesta deve ancora essere inizializzata.

  • readyState = 1 - la richiesta è impostata.

  • readyState = 2 - la richiesta viene inviata.

  • readyState = 3 - la richiesta è in elaborazione.

  • readyState = 4 - la richiesta è completata.
3

responseText

Questa proprietà viene utilizzata quando la risposta dal server è un file di testo.
4

responseXML

Questa proprietà viene utilizzata quando la risposta dal server è un file XML.
5

status

Fornisce lo stato dell'oggetto richiesta HTTP come numero. Ad esempio, "404" o "200".
6

statusText

Fornisce lo stato dell'oggetto richiesta HTTP come stringa. Ad esempio, "Non trovato" o "OK".

Esempi

I contenuti di node.xml sono i seguenti:

<?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>

Recupera informazioni specifiche di un file di risorse

L'esempio seguente mostra come recuperare informazioni specifiche di un file di risorse utilizzando il metodo getResponseHeader () e la proprietà 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>

Esecuzione

Salva questo file come elementattribute_removeAttributeNS.htm nel percorso del server (questo file e node_ns.xml dovrebbero trovarsi sullo stesso percorso nel tuo server). Otterremo l'output come mostrato di seguito -

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

Recupera le informazioni di intestazione di un file di risorse

L'esempio seguente mostra come recuperare le informazioni di intestazione di un file di risorse, utilizzando il metodo getAllResponseHeaders() utilizzando la proprietà 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>

Esecuzione

Salvare questo file come http_allheader.html sul percorso del server (questo file e node.xml dovrebbero trovarsi sullo stesso percorso nel server). Otterremo l'output come mostrato di seguito (dipende dal browser) -

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