DOM - Objeto XMLHttpRequest

El objeto XMLHttpRequest establece un medio entre el lado del cliente y el lado del servidor de una página web que puede ser utilizado por muchos lenguajes de scripting como JavaScript, JScript, VBScript y otros navegadores web para transferir y manipular los datos XML.

Con el objeto XMLHttpRequest es posible actualizar parte de una página web sin recargar toda la página, solicitar y recibir los datos de un servidor después de que la página haya sido cargada y enviar los datos al servidor.

Sintaxis

Un objeto XMLHttpRequest se puede instalar de la siguiente manera:

xmlhttp = new XMLHttpRequest();

Para manejar todos los navegadores, incluidos IE5 e IE6, verifique si el navegador admite el objeto XMLHttpRequest como se muestra a continuación:

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

Aquí se pueden consultar ejemplos para cargar un archivo XML utilizando el objeto XMLHttpRequest

Métodos

La siguiente tabla enumera los métodos del objeto XMLHttpRequest:

S.No.	Método y descripción
1	abort() Termina la solicitud actual realizada.
2	getAllResponseHeaders() Devuelve todos los encabezados de respuesta como una cadena, o nulo si no se ha recibido respuesta.
3	getResponseHeader() Devuelve la cadena que contiene el texto del encabezado especificado, o un valor nulo si la respuesta aún no se ha recibido o el encabezado no existe en la respuesta.
4	open(method,url,async,uname,pswd) Se utiliza en conjugación con el método Send para enviar la solicitud al servidor. El método abierto especifica los siguientes parámetros: method - especifica el tipo de solicitud, es decir, obtener o publicar. url - es la ubicación del archivo. async- indica cómo se debe manejar la solicitud. Es un valor booleano. dónde, 'verdadero' significa que la solicitud se procesa de forma asincrónica sin esperar una respuesta Http. 'falso' significa que la solicitud se procesa sincrónicamente después de recibir la respuesta Http. uname - es el nombre de usuario. pswd - es la contraseña.
5	send(string) Se utiliza para enviar la solicitud trabajando en conjugación con el método Open.
6	setRequestHeader() El encabezado contiene el par etiqueta / valor al que se envía la solicitud.

Atributos

La siguiente tabla enumera los atributos del objeto XMLHttpRequest:

S.No.	Atributo y descripción
1	onreadystatechange Es una propiedad basada en eventos que se activa en cada cambio de estado.
2	readyState Esto describe el estado actual del objeto XMLHttpRequest. Hay cinco estados posibles de la propiedad readyState: readyState = 0 - significa que la solicitud aún no se ha inicializado. readyState = 1 - la solicitud está configurada. readyState = 2 - se envía la solicitud. readyState = 3 - la solicitud se está procesando. readyState = 4 - la solicitud está completa.
3	responseText Esta propiedad se utiliza cuando la respuesta del servidor es un archivo de texto.
4	responseXML Esta propiedad se utiliza cuando la respuesta del servidor es un archivo XML.
5	status Da el estado del objeto de solicitud Http como un número. Por ejemplo, "404" o "200".
6	statusText Da el estado del objeto de solicitud Http como una cadena. Por ejemplo, "No encontrado" o "Aceptar".

Ejemplos

El contenido de node.xml es el siguiente:

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

Recuperar información específica de un archivo de recursos

El siguiente ejemplo demuestra cómo recuperar información específica de un archivo de recursos utilizando el método getResponseHeader () y la propiedad 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>

Ejecución

Guarde este archivo como elementattribute_removeAttributeNS.htm en la ruta del servidor (este archivo y node_ns.xml deben estar en la misma ruta en su servidor). Obtendremos el resultado como se muestra a continuación:

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

Recuperar información de encabezado de un archivo de recursos

El siguiente ejemplo demuestra cómo recuperar la información del encabezado de un archivo de recursos, utilizando el método getAllResponseHeaders() usando la propiedad 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>

Ejecución

Guarde este archivo como http_allheader.html en la ruta del servidor (este archivo y node.xml deben estar en la misma ruta en su servidor). Obtendremos el resultado como se muestra a continuación (depende del navegador):

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

↰ Previous page Next page ↱