Uso del objeto XMLHttpRequest

Noviembre 2016





Introducción


Cada vez más los sitios web dinámicos (por ejemplo que requieren de una base de datos) requieren actualizar sus páginas, o una parte de sus páginas, sin que el mismo usuario tenga que refrescar la página.

A esto es lo que comúnmente llamamos el método Ajax. Esta metodología se encuentra bajo diversas técnicas, especialmente el uso de objetos XMLHttpRequest de Javascript.

En este artículo veremos lo que es el objeto XHR, y cómo implementarlo en nuestros códigos de manera sencilla.

Prerrequisitos


A fin de entender las explicaciones dadas en este artículo, es preferible:
  • Conocer acerca de formularios HTML
  • Tener algunas nociones de lenguaje Javascript
  • Tener algunas nociones de lenguaje PHP

II. Presentación

2.1 Principio


El uso de XHR es relativamente sencillo. Basta con instanciar un objeto de este tipo, abrir una url y enviar una petición (de tipo GET o POST) con o sin parámetros.
A pesar de que el objeto XHR puede ser utilizado con varios tipos de protocolo, en este articulo veremos su uso únicamente con el protocolo HTTP.
El código de estado HTTP de la petición (respuesta) así como los datos (el documento) asociados estarán disponibles mediante esta instancia de objeto.

2.2 Uso asíncrono


El objeto XHR dispone de un método de llamado y retorno, lo que permite al navegador seguir funcionando hasta que la petición enviada llegue y sea tratada y devuelta

De aquí, XHR puede ser utilizado para varias cosas:
  • Actualizar datos de una base de datos
  • Recuperar datos de una base de datos
  • Refrescar la página actual del navegador, por datos provenientes de una base de datos o de una sesión.

2.3 Ventajas

  • Reducción del ancho de banda: en comparación a tener que refrescar o ejecutar una página, aquí solo los datos son enviados, y no el documento completo.
  • Mejor interactividad del sitio: los controles, actualizaciones o el refresco de las páginas efectuados con esta tecnología se harán sin que el usuario se dé cuenta.

2.4 Desventajas

  • No funciona sin javascript. El problema es que los usuario pueden tener bloqueado los controles javascript del navegador.
  • Limitado número de uso simultáneo: el numero de uso simultaneo de peticiones XHR es por defecto 2. Esto puede ocasionar problemas si un usuario abre dos o más pestañas en sitios utilizando esta tecnología, provocando un bloqueo del navegador.

III. Arquitectura


A continuación presentaré una esquema comparativo entre el método XHR y el método básico para el envió de un formulario HTML.
La parte superior del esquema describe el uso de XHR, la parte de abajo representa el envío normal de un formulario.

Por lo que se puede apreciar, el camino de ejecución es el mismo, pero con las siguientes diferencias:
  • XHR se hace de manera asíncrona
  • XHR devuelve datos XML que puede ser interpretado o mostrado en el navegador, mientras que el envío normal devuelve una nueva página web en el navegador.

IV. Implementación


En lo que sigue veremos cómo simplificar el uso del objeto XHR en tus páginas web.

4.1 Implementación de la función genérica 'callScript'

4.1.1 Código 1


function callScript ( scriptName, args ){  
   
 var xhr_object = null;   
        
 // ### Construcción del objeto XMLHttpRequest según el tipo de navegador  
 if(window.XMLHttpRequest)   
     xhr_object = new XMLHttpRequest();   
 else if(window.ActiveXObject)  
     xhr_object = new ActiveXObject("Microsoft.XMLHTTP");  
 else {   
                // XMLHttpRequest no es soportado por el navegador   
     alert("Su navegador no soporta los objetos XMLHTTPRequest...");   
       return;   
 }   
    
 xhr_object.open("POST", scriptName, true);  
   
 //  Definición del comportamiento a adoptar en el cambio de estado del objeto XMLHttpRequest  
 xhr_object.onreadystatechange = function() {   
     if(xhr_object.readyState == 4) {  
   //alert(xhr_object.responseText); // DEBUG MODE  
   //document.write(xhr_object.responseText);  
   eval(xhr_object.responseText);  
   }  
  return xhr_object.readyState;  
 }   
 xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded");  
   
 //  Envio de la petición  
 xhr_object.send(args);  

}  

4.1.2 Explicación del código 1


La función 'callScript' tiene por objetivo ser genérica.

Los parámetros
  • scriptName; ruta al script de tratamiento que deseas llamar
  • args; lista de parámetros pasados al script en formato STRING. La sintaxis de esta lista siempre será de la siguiente forma: param_name1=param_val1¶m_name2=param_val2&...

Instanciación del objeto XHR
  • para los navegadores de tipo Netscape & co:

if(window.XMLHttpRequest)   
      xhr_object = new XMLHttpRequest();   
  • para los navegadores de tipo Internet Explorer:

else if(window.ActiveXObject)  
      xhr_object = new ActiveXObject("Microsoft.XMLHTTP");  

Abrir la url / el script

xhr_object.open("POST", scriptName, true);

Definición del comportamiento a adoptar en caso de cambio de estado de la petición

xhr_object.onreadystatechange = function() {   
 if(xhr_object.readyState == 4) {  
         //alert(xhr_object.responseText); // DEBUG MODE  
  //document.write(xhr_object.responseText);  
  eval(xhr_object.responseText);  
 }  
 return xhr_object.readyState;  
}   


Por terminar

Consulta también :
El documento «Uso del objeto XMLHttpRequest» de CCM (es.ccm.net) se encuentra disponible bajo una licencia Creative Commons. Puedes copiarlo o modificarlo siempre y cuando respetes las condiciones de dicha licencia y des crédito a CCM.