XMLHttpRequest
| ||||
XMLHttpRequest es un API que puede invocarse desde JavaScript, JScript, VBScript y otros lenguajes de script incluidos en un navegador web, que se usa para transferir y manipular datos XML hacia y desde el navegador web, estableciéndose un canal de conexión independiente entre el lado del cliente de la página web y el servidor.
Los datos devueltos por la llamada a XMLHttpRequest serán, por lo general, obtenidos desde bases de datos en el servidor. La llamada puede devolver datos en XML o, más generalmente, en cualquier otro formato textual, como JSON o incluso texto plano.
XMLHttpRequest es una parte fundamental de la técnica de desarrollo web conocida como AJAX, y es usada en muchos sitios web para implementar aplicaciones dinámicas e interactivas. Ejemplos de aplicaciones que usan XMLHttpRequest incluyen el servicio Gmail de Google, Meebo, Virtual Earth de Microsoft, y los mapas de MapQuest.
Sumario
Métodos
| Método | Descripción |
|---|---|
| abort() | Cancela la petición en curso |
| getAllResponseHeaders() | Devuelve el conjunto de cabeceras HTTP como una cadena. |
| getResponseHeader( nombreCabecera ) | Devuelve el valor de la cabecera HTTP especificada. |
| open( método, URL [, asíncrono [, nombreUsuario [, clave]]] ) | Especifica el método, URL y otros atributos opcionales de una petición.
El parámetro de método puede tomar los valores "GET", "POST", o "PUT" ("GET" se usa cuando se solicitan datos y "POST" cuando se envían, especialmente si la longitud de los datos es de más de 512 bytes). El parámetro URL puede ser una URL relativa o completa. El parámetro "asíncrono" especifica si la petición debería ser gestionada asíncronamente o no —"true" indica que el proceso del script continúa después del método send(), sin esperar a la respuesta, y "false" indica que el script se detiene hasta que vuelve una respuesta, tras lo cual se reanuda la ejecución—. En el caso asíncrono se especifican métodos de callback, que se ejecutan ante cada cambio de estado y permiten tratar los resultados de la consulta una vez que se reciben, o bien gestionar eventuales errores.
|
| send( contenido ) | Envía la petición |
| setRequestHeader( etiqueta, valor ) | Añade un par etiqueta/valor a la cabecera HTTP a enviar. |
Propiedades
| Propiedad | Descripción |
|---|---|
| onreadystatechange | Función de gestión de evento para un evento que se activa con cada cambio de estado. |
| readyState | Devuelve el estado del objeto como sigue:
0 = sin inicializar, 1 = cargando, 2 = cargado, 3 = interactivo y 4 = completado. |
| responseText | Devuelve la respuesta como una cadena |
| responseXML | Devuelve la respuesta como XML. Esta propiedad devuelve un objeto documento XML, que puede ser examinado usando las propiedades y métodos del árbol del DOM. |
| status | Devuelve el estado como un número (p. ej. 404 para "Not Found" y 200 para "OK"). |
| statusText | Devuelve el estado como una cadena (p. ej. "Not Found" o "OK"). |
Historia y soporte
El concepto de XMLHttpRequest fue desarrollado originalmente por Microsoft. La implementación de Microsoft se denomina XMLHTTP y, como objeto ActiveX, difiere ligeramente de la norma estándar publicada. Ha estado disponible desde Internet Explorer 5.0. y es accesible por medio de JScript, VBScript y otros lenguajes de scripting soportados por este navegador.
El proyecto Mozilla incorporó la primera implementación nativa compatible de XMLHttpRequest en la versión 1.0 de la Suite Mozilla en 2002. Esta implementación sería seguida por Apple a partir de Safari 1.2, Konqueror, Opera Software a partir del Opera 8.0 e iCab desde la versión 3.0b352.
El World Wide Web Consortium publicó una especificación para el API del objetoXMLHttpRequest object's API el 5 de abril de 2006[1]. Si bien continúa siendo un trabajo en progreso, su objetivo es "documentar el conjunto mínimo de prestaciones interoperables basadas en las implementaciones actuales, permitiendo a los desarrolladores web utilizarlas sin necesidad de escribir código específico para cada plataforma". El borrador se basa en las implementaciones más populares, para ayudar a mejorar y asegurar la interoperabilidad del código en diferentes plataformas web.
Las páginas web que utilizan XMLHttpRequest o XMLHTTP pueden soslayar las pequeñas diferencias entre implementaciones o bien encapsulando el objeto XMLHttpRequest en un envoltorio Javascript o bien usando algún framework que lo haga. En cualquier caso, el envoltorio debería detectar las capacidades de la implementación sobre la que se ejecuta y trabajar conforme a sus requisitos.
Tradicionalmente, ha habido otros métodos para obtener resultados similares utilizando lenguajes de script:
- Frames en línea invisibles (iframes)
- LiveConnect de Netscape.
- ActiveX de Microsoft
- XML Data Islands de Microsoft
- Flash Player de Macromedia
- Applets Java
Problemas conocidos
Problemas con la caché en Microsoft Internet Explorer
Internet Explorer implementa una caché de peticiones GET. Los desarrolladores que no están familiarizados con la caché HTTP suponen que GET no será cacheada o que la caché puede evitarse pulsando el botón de refresco de la página. En ciertas situaciones, la imposibilidad de evitar la caché se considera como un fallo. Una solución es usar el método POST, que nunca se cachea; sin embargo debería ser usado en operaciones no idempotentes.
Otra forma de impedir la caché de la respuesta es indicar a los posibles caches que no deben reutilizar una versión antigua de la información mediante las cabeceras adecuadas. Una posibilidad es poner cabeceras indicando esto en el pedido, como en el siguiente fragmento en PHP
header( "Expires: Mon, 26 Jul 1997 05:00:00 GMT" ); // disable IE caching header( "Last-Modified: " . gmdate( "D, d M Y H:i:s" ) . "GMT" ); header( "Cache-Control: no-cache, must-revalidate" ); header( "Pragma: no-cache" );
También se pueden incluir cabeceras en la respuesta, como en este servlet en Java:
response.setHeader( "Pragma", "no-cache" );
response.addHeader( "Cache-Control", "must-revalidate" );
response.addHeader( "Cache-Control", "no-cache" );
response.addHeader( "Cache-Control", "no-store" );
response.setDateHeader("Expires", 0);
Alternativamente, también se puede obligar al objeto XMLHttpRequest a que recupere el contenido en cualquier caso:
req.open( "GET", "xmlprovider.php" ); req.setRequestHeader( "If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT" ); req.send( null );
Es importante observar que estas técnicas deberían ser usadas sólo si no es apropiado cachear las respuestas. Por lo general, es mejor obtener los beneficios de rendimientos de la caché, tal vez combinándolos con el detalle explícito de las fechas de modificación u otras cabeceras relevantes en el servidor, para evitar rendimientos pobres.
Muchos programadores usan las técnicas descritas más arriba de manera indiscriminada, lo que puede resultar en la reducción drástica del rendimiento.
Problemas con caracteres acentuados y no ASCII
Si la respuesta del servidor no encapsula el resultado en una formato XML, el texto de la respuesta puede no ser correctamente visualizado si incluye caracteres no ASCII, por ejemplo, caracteres acentuados como la é. Aunque Firefox sí permite trabajar con estos datos, Internet Explorer sólo los gestionará correctamente en la primera petición. Si se repite la respuesta e Internet Explorer reutiliza un resultado cacheado, se producirá un error de JavaScript.
Para trabajar con cualquier carácter UTF-8 se recomienda devolver resultados formateados en XML y el uso del método 'responseXML'.
Si por el contrario se va a utilizar el método 'responseText' es necesario incluir en la página que devuelve los datos al objeto 'XMLHttpRequest' un encabezado como el siguiente: Response.AddHeader "Content-Type", "text/html; charset=iso-8859-1" Esto para páginas ASP.
Reutilización del objeto XMLHttpRequest en IE
Si el método open se llama después de ajustar la función onreadystatechange, habrá un problema al reutilizar el objeto XMLHttpRequest en IE. Así pues, para reutilizar el objeto XMLHttpRequest en IE, se debe invocar primero el método open y ajustar onreadystatechange después. Esto se debe a que IE inicializa el objeto implícitamente si se completa el estado. Para una explicación con mayor detalle: http://keelypavan.blogspot.com/2006/03/reusing-xmlhttprequest-object-in-ie.html Reusing XMLHttpRequest Object in IE.]
Ejemplo objeto XMLHttpRequest (AJAX)
En primer lugar crearemos nuestro objeto ActiveX en IExplorer y un objeto nativo en el resto de navegadores que lo soportan, y es por ello que tendremos que ver qué objeto creamos, controlandolo con diferentes condiciones, con esto conseguimos que el navegador cree una instancia del objeto apropiado, dependiendo del navegador usado por el usuario.
function nuevoAjax(){ var xmlhttp=false; try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (E) { xmlhttp = false; } } if (!xmlhttp && typeof XMLHttpRequest!='undefined') { xmlhttp = new XMLHttpRequest(); } return xmlhttp; } Una vez hayamos comprendido y realizado este paso tendremos que tener en cuenta los métodos y propiedades que nos ofrece AJAX:
Enlaces externos
Implementaciones y documentación
- El objeto XMLHttpRequest en ProgramacionWeb.net
- The XMLHttpRequest Object — W3C Working Draft ( en inglés )
- Apple Safari 1.2( en inglés )
- Microsoft IXMLHTTPRequest ( en inglés )
- Mozilla XML Extras ( en inglés )
