Este documento proporciona una introducción a la tecnología AJAX. Explica que AJAX no es una tecnología en sí misma, sino una combinación de tecnologías que incluyen XHTML, CSS, DOM, XMLHttpRequest y JavaScript. Describe cómo AJAX permite la carga asíncrona de datos en segundo plano sin recargar la página, mejorando la interactividad. También brinda una breve historia de AJAX y sus antecedentes, así como ejemplos de aplicaciones que lo usan como Google y Amazon.
1. S.E.P. S.E.I.T. D.G.I.T.
INSTITUTO TECNOLÓGICO
Del Istmo.
MATERIA:
PROGRAMACION WEB
TEMA:
AJAX
TITULAR:
Ing. José Antonio López Posada
PRESENTA:
ERVING GIOVANNI SANCHEZ SANCHEZ
ESPECIALIDAD:
Lic. Informátic
0
2. INDICE
Definiendo Ajax 2
Como es diferente Ajax 4
Quien esta usando Ajax 6
Ajax 7
Tecnologías incluidas en Ajax 7
Antecedentes de Ajax 8
Problemas e inconvenientes 9
Navegadores que permiten Ajax 10
Navegadores que no permiten Ajax 10
Primeros pasos con Ajax 11
Breve historia de Ajax 11
La primera aplicación 12
Código fuente 12
Análisis detallado 14
Refactorizando la primera aplicación 17
Métodos y propiedades del objeto
XMLHttpRequest 24
1
3. Definiendo Ajax
Ajax no es una tecnología. Es realmente muchas tecnologías, cada
una floreciendo por su propio mérito, uniéndose en poderosas nuevas
formas. AJAX incorpora:
presentación basada en estándares usando XHTML y CSS;
exhibición e interacción dinámicas usando el Document Object
Model;
Intercambio y manipulación de datos usando XML and XSLT;
Recuperación de datos asincrónica usando XMLHttpRequest;
y JavaScript poniendo todo junto.
El modelo clásico de aplicaciones Web funciona de esta forma: La
mayoría de las acciones del usuario en la interfaz disparan un
requerimiento HTTP al servidor web. El servidor efectúa un proceso
(recopila información, procesa números, hablando con varios sistemas
propietarios), y le devuelve una pagina HTLM al cliente.
Este es un modelo adaptado del uso original de la Web como un
medio hipertextual, pero como fans de “The Elements of User
Experience” sabemos, lo que hace a la Web buena para el hipertexto,
no la hace necesariamente buena para las aplicaciones de software.
2
4. Figura 1: El modelo tradicional para las aplicaciones Web (izq.)
comparado con el modelo de AJAX (der.).
Este acercamiento tiene mucho sentido a nivel técnico, pero no lo
tiene para una gran experiencia de usuario. Mientras el servidor esta
haciendo lo suyo, que esta haciendo el usuario? Exacto, esperando. Y,
en cada paso de la tarea, el usuario espera por mas.
Obviamente, si estuviéramos diseñando la Web desde cero para
aplicaciones, no querríamos hacer esperar a los usuarios. Una vez
que la interfaz esta cargada, porque la interacción del usuario debería
detenerse cada vez que la aplicación necesita algo del servidor? De
hecho, porque debería el usuario ver la aplicación yendo al servidor?
3
5. Cómo es diferente AJAX
Una aplicación AJAX elimina la naturaleza “arrancar-frenar- arrancar-
frenar” de la interacción en la Web introduciendo un intermediario -un
motor AJAX- entre el usuario y el servidor. Parecería que sumar una
capa a la aplicación la haría menos reactiva, pero la verdad es lo
contrario.
En vez de cargar un pagina Web, al inicio de la sesión, el navegador
carga al motor AJAX (escrito en JavaScript y usualmente “sacado” en
un frame oculto). Este motor es el responsable por renderizar la
interfaz que el usuario ve y por comunicarse con el servidor en nombre
del usuario.
El motor AJAX permite que la interacción del usuario con la aplicación
suceda asincrónicamente (independientemente de la comunicación
con el servidor). Así el usuario nunca estará mirando una ventana en
blanco del navegador y un icono de reloj de arena esperando a que el
servidor haga algo.
4
6. Figura 2: El patrón de interacción sincrónica de una aplicación Web
tradicional (arriba) comparada con el patrón asincrónico de una
aplicación AJAX (abajo).
Cada acción de un usuario que normalmente generaría un
requerimiento HTTP toma la forma de un llamado JavaScript al motor
AJAX en vez de ese requerimiento. Cualquier respuesta a una acción
del usuario que no requiera una viaje de vuelta al servidor (como una
simple validación de datos, edición de datos en memoria, incluso algo
de navegación) es manejado por su cuenta.
Si el motor necesita algo del servidor para responder (sea enviando
datos para procesar, cargar código adicional, o recuperando nuevos
datos) hace esos pedidos asincrónicamente, usualmente usando XML,
sin frenar la interacción del usuario con la aplicación.
5
7. ¿Quién está usando Ajax?
Google está haciendo una significativa inversión en el acercamiento
Ajax. Todos los grandes productos que Google ha introducido en el
ultimo año (Orkut, Gmail, la última versión de Google Groups, Google
Suggest, y Google Maps ) son aplicaciones Ajax. (Para datos más
técnicos de estas implementaciones Ajax, lean estos excelentes
análisis de Gmail, Google Suggest, y Google Maps.) Otros están
siguiendo la tendencia: muchas de las funciones que la gente ama en
Flickr dependen de Ajax, y el motor de búsqueda de Amazon A9.com
aplica tecnologías similares.
Estos proyectos demuestran que Ajax no es solo técnicamente
importante, sino también prácticos para aplicaciones en el mundo real.
Esta no es otra tecnología que solo trabaja en un laboratorio. Y las
aplicaciones Ajax pueden ser de cualquier tamaño, de lo más simple,
funciones simples como Google Suggest a las muy complejas y
sofisticadas como Google Maps.
6
8. AJAX
Ajax, acrónimo de Asynchronous JavaScript And XML (JavaScript
asíncrono y XML), es una técnica de desarrollo web para crear
aplicaciones interactivas o RIA (Rich Internet Applications). Estas
aplicaciones se ejecutan en el cliente, es decir, en el navegador de los
usuarios mientras se mantiene la comunicación asíncrona con el
servidor en segundo plano. De esta forma es posible realizar cambios
sobre las páginas sin necesidad de recargarlas, lo que significa
aumentar la interactividad, velocidad y usabilidad en las aplicaciones.
Ajax es una tecnología asíncrona, en el sentido de que los datos
adicionales se requieren al servidor y se cargan en segundo plano sin
interferir con la visualización ni el comportamiento de la página.
JavaScript es el lenguaje interpretado (scripting language) en el que
normalmente se efectúan las funciones de llamada de Ajax mientras
que el acceso a los datos se realiza mediante XMLHttpRequest, objeto
disponible en los navegadores actuales. En cualquier caso, no es
necesario que el contenido asíncrono esté formateado en XML.
Ajax es una técnica válida para múltiples plataformas y utilizable en
muchos sistemas operativos y navegadores dado que está basado en
estándares abiertos como JavaScript y Document Object Model
(DOM).
Tecnologías incluidas en Ajax
Ajax es una combinación de cuatro tecnologías ya existentes:
XHTML (o HTML) y hojas de estilos en cascada (CSS) para el
diseño que acompaña a la información.
Document Object Model (DOM) accedido con un lenguaje de
scripting por parte del usuario, especialmente implementaciones
ECMAScript como JavaScript y JScript, para mostrar e
interactuar dinámicamente con la información presentada.
El objeto XMLHttpRequest para intercambiar datos de forma
asíncrona con el servidor web. En algunos frameworks y en
algunas situaciones concretas, se usa un objeto iframe en lugar
del XMLHttpRequest para realizar dichos intercambios.
XML es el formato usado generalmente para la transferencia de
datos solicitados al servidor, aunque cualquier formato puede
7
9. funcionar, incluyendo HTML preformateado, texto plano, JSON y
hasta EBML.
Como el DHTML, LAMP o SPA, Ajax no constituye una tecnología en
sí, sino que es un término que engloba a un grupo de éstas que
trabajan conjuntamente.
Antecedentes de Ajax
A pesar de que el término «Ajax» fuese creado en 2005, la historia de
las tecnologías que permiten Ajax se remonta a una década antes con
la iniciativa de Microsoft en el desarrollo de Scripting Remoto. Sin
embargo, las técnicas para la carga asíncrona de contenidos en una
página existente sin requerir recarga completa remontan al tiempo del
elemento iframe (introducido en Internet Explorer 3 en 1996) y el tipo
de elemento layer (introducido en Netscape 4 en 1997, abandonado
durante las primeras etapas de desarrollo de Mozilla). Ambos tipos de
elemento tenían el atributo src que podía tomar cualquier dirección
URL externa, y cargando una página que contenga javascript que
manipule la página paterna, pueden lograrse efectos parecidos al Ajax.
El Microsoft's Remote Scripting (o MSRS, introducido en 1998) resultó
un sustituto más elegante para estas técnicas, con envío de datos a
través de un applet Java el cual se puede comunicar con el cliente
usando JavaScript. Esta técnica funcionó en ambos navegadores,
Internet Explorer versión 4 y Netscape Navigator versión 4. Microsoft
la utilizó en el Outlook Web Access provisto con la versión 2000 de
Microsoft Exchange Server.
La comunidad de desarrolladores web, primero colaborando por medio
del grupo de noticias microsoft.public.scripting.remote y después
usando blogs, desarrollaron una gama de técnicas de scripting remoto
para conseguir los mismos resultados en diferentes navegadores. Los
primeros ejemplos incluyen la biblioteca JSRS en el año 2000, la
introducción a la técnica imagen/cookie1 en el mismo año y la técnica
JavaScript bajo demanda (JavaScript on Demand)2 en 2002. En ese
año, se realizó una modificación por parte de la comunidad de
8
10. usuarios3 al Microsoft's Remote Scripting para reemplazar el applet
Java por XMLHttpRequest.
Frameworks de Scripting Remoto como el ARSCIF4 aparecieron en
2003 poco antes de que Microsoft introdujera Callbacks en ASP. NET.5
Desde que XMLHttpRequest está implementado en la mayoría de los
navegadores, raramente se usan técnicas alternativas. Sin embargo,
todavía se utilizan donde se requiere una mayor compatibilidad, una
reducida implementación, o acceso cruzado entre sitios web. Una
alternativa, el Terminal SVG6 (basado en SVG), emplea una conexión
persistente para el intercambio continuo entre el navegador y el
servidor.
Problemas e Inconvenientes
Las páginas con AJAX son mas difíciles de desarrollar que las
páginas estáticas.
Las páginas creadas dinámicamente mediante peticiones
sucesivas AJAX, no son registradas de forma automática en el
historial del navegador, así que haciendo clic en el botón de
"volver" del navegador, el usuario no sera devuelto a un estado
anterior de la página, en cambio puede volver a la última página
que visitó. Soluciones incluyen el uso de IFrames invisible para
desencadenar cambios en el historial del navegador y el cambio
de la porción de anclaje de la dirección (después de un #).
Los motores de búsquedas no entienden JavaScript. La
información en la página dinámica no se almacena en los
registros del buscador.
Hay problemas usando Ajax entre nombres de dominios. Eso es
una función de seguridad.
El sitio con Ajax usa más recursos en el servidor.
Es posible que páginas con Ajax no puedan funcionar en
telefonos moviles, PDA u otros aparatos. Ajax no es compatible
con todos los software para ciegos u otras discapacidades.
9
11. Navegadores que permiten Ajax
Ha de tenerse en cuenta que ésta es una lista general, y el soporte de
las aplicaciones Ajax dependerá de las características que el
navegador permita.
Navegadores basados en Gecko como Mozilla, Mozilla Firefox,
SeaMonkey, Camino, K-Meleon, IceWeasel, Flock, Epiphany,
Galeon y Netscape versión 7.1 y superiores
Google Chrome
Microsoft Internet Explorer para Windows versión 5.0 y
superiores, y los navegadores basados en él
Navegadores con el API KHTML versión 3.2 y superiores
implementado, incluyendo Konqueror versión 3.2 y superiores,
Apple Safari versión 1.2 y superiores, y el Web Browser for S60
de Nokia tercera generación y posteriores
Opera versión 8.0 y superiores, incluyendo Opera Mobile
Browser versión 8.0 y superiores.
Navegadores que no permiten Ajax
Opera 7 y anteriores
Microsoft Internet Explorer para Windows versión 4.0 y
anteriores
Safari 1.2 y anteriores
Dillo
Navegadores basados en texto como Lynx y Links
Navegadores para personas con capacidades especiales
visuales (Braille)
Algunos navegadores de teléfonos móviles
Navegador de la PSP
10
12. Primeros pasos con AJAX
Breve historia de AJAX
La historia de AJAX está íntimamente relacionada con un objeto de
programación llamado XMLHttpRequest. El origen de este objeto se
remonta al año 2000, con productos como Exchange 2000, Internet
Explorer 5 y Outlook Web Access.
Todo comenzó en 1998, cuando Alex Hopmann y su equipo se
encontraban desarrollando la entonces futura versión de Exchange
2000. El punto débil del servidor de correo electrónico era su cliente
vía web, llamado OWA (Outlook Web Access).
Durante el desarrollo de OWA, se evaluaron dos opciones: un cliente
formado sólo por páginas HTML estáticas que se recargaban
constantemente y un cliente realizado completamente con HTML
dinámico o DHTML. Alex Hopmann pudo ver las dos opciones y se
decantó por la basada en DHTML. Sin embargo, para ser realmente
útil a esta última le faltaba un componente esencial: "algo" que evitara
tener que enviar continuamente los formularios con datos al servidor.
Motivado por las posibilidades futuras de OWA, Alex creó en un solo
fin de semana la primera versión de lo que denominó XMLHTTP. La
primera demostración de las posibilidades de la nueva tecnología fue
un éxito, pero faltaba lo más difícil: incluir esa tecnología en el
navegador Internet Explorer.
Si el navegador no incluía XMLHTTP de forma nativa, el éxito del
OWA se habría reducido enormemente. El mayor problema es que
faltaban pocas semanas para que se lanzara la última beta de Internet
Explorer 5 previa a su lanzamiento final. Gracias a sus contactos en la
11
13. empresa, Alex consiguió que su tecnología se incluyera en la librería
MSXML que incluye Internet Explorer.
De hecho, el nombre del objeto (XMLHTTP) se eligió para tener una
buena excusa que justificara su inclusión en la librería XML de Internet
Explorer, ya que este objeto está mucho más relacionado con HTTP
que con XML.
La primera aplicación
Código fuente
La aplicación AJAX completa más sencilla consiste en una adaptación
del clásico "Hola Mundo". En este caso, una aplicación JavaScript
descarga un archivo del servidor y muestra su contenido sin necesidad
de recargar la página.
Código fuente completo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/
xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Hola Mundo con AJAX</title>
<script type="text/javascript">
function descargaArchivo() {
12
14. // Obtener la instancia del objeto XMLHttpRequest
if(window.XMLHttpRequest) {
peticion_http = new XMLHttpRequest();
}
else if(window.ActiveXObject) {
peticion_http = new ActiveXObject("Microsoft.XMLHTTP");
}
// Preparar la funcion de respuesta
peticion_http.onreadystatechange = muestraContenido;
// Realizar peticion HTTP
peticion_http.open('GET', 'http://localhost/holamundo.txt', true);
peticion_http.send(null);
function muestraContenido() {
if(peticion_http.readyState == 4) {
if(peticion_http.status == 200) {
alert(peticion_http.responseText);
}
}
}
}
13
15. window.onload = descargaArchivo;
</script>
</head>
<body></body>
</html>
En el ejemplo anterior, cuando se carga la página se ejecuta el método
JavaScript que muestra el contenido de un archivo llamado
holamundo.txt que se encuentra en el servidor. La clave del código
anterior es que la petición HTTP y la descarga de los contenidos del
archivo se realizan sin necesidad de recargar la página.
Análisis detallado
La aplicación AJAX del ejemplo anterior se compone de cuatro
grandes bloques: instanciar el objeto XMLHttpRequest, preparar la
función de respuesta, realizar la petición al servidor y ejecutar la
función de respuesta.
Todas las aplicaciones realizadas con técnicas de AJAX deben
instanciar en primer lugar el objeto XMLHttpRequest, que es el objeto
clave que permite realizar comunicaciones con el servidor en segundo
plano, sin necesidad de recargar las páginas. La implementación del
objeto XMLHttpRequest depende de cada navegador, por lo que es
necesario emplear una discriminación sencilla en función del
navegador en el que se está ejecutando el código:
14
16. if(window.XMLHttpRequest) { // Navegadores que siguen los
estándares
peticion_http = new XMLHttpRequest();
}
else if(window.ActiveXObject) { // Navegadores obsoletos
peticion_http = new ActiveXObject("Microsoft.XMLHTTP");
{
Los navegadores que siguen los estándares (Firefox, Safari, Opera,
Internet Explorer 7 y 8) implementan el objeto XMLHttpRequest de
forma nativa, por lo que se puede obtener a través del objeto window.
Los navegadores obsoletos (Internet Explorer 6 y anteriores)
implementan el objeto XMLHttpRequest como un objeto de tipo
ActiveX.
Una vez obtenida la instancia del objeto XMLHttpRequest, se prepara
la función que se encarga de procesar la respuesta del servidor. La
propiedad onreadystatechange del objeto XMLHttpRequest permite
indicar esta función directamente incluyendo su código mediante una
función anónima o indicando una referencia a una función
independiente. En el ejemplo anterior se indica directamente el
nombre de la función:
peticion_http.onreadystatechange = muestraContenido;
El código anterior indica que cuando la aplicación reciba la respuesta
del servidor, se debe ejecutar la función muestraContenido(). Como es
habitual, la referencia a la función se indica mediante su nombre sin
15
17. paréntesis, ya que de otro modo se estaría ejecutando la función y
almacenando el valor devuelto en la propiedad onreadystatechange.
Después de preparar la aplicación para la respuesta del servidor, se
realiza la petición HTTP al servidor:
peticion_http.open('GET', 'http://localhost/prueba.txt', true);
peticion_http.send(null);
Las instrucciones anteriores realizan el tipo de petición más sencillo
que se puede enviar al servidor. En concreto, se trata de una petición
de tipo GET simple que no envía ningún parámetro al servidor. La
petición HTTP se crea mediante el método open(), en el que se incluye
el tipo de petición (GET), la URL solicitada (http://localhost/prueba.txt)
y un tercer parámetro que vale true.
Una vez creada la petición HTTP, se envía al servidor mediante el
método send().
Este método incluye un parámetro que en el ejemplo anterior vale null.
Más adelante se ven en detalle todos los métodos y propiedades que
permiten hacer las peticiones al servidor. Por último, cuando se recibe
la respuesta del servidor, la aplicación ejecuta de forma automática la
función establecida anteriormente.
function muestraContenido() {
if(peticion_http.readyState == 4) {
if(peticion_http.status == 200) {
alert(peticion_http.responseText);
16
18. }
}
}
La función muestraContenido() comprueba en primer lugar que se ha
recibido la respuesta del servidor (mediante el valor de la propiedad
readyState). Si se ha recibido alguna respuesta, se comprueba que
sea válida y correcta (comprobando si el código de estado HTTP
devuelto es igual a 200).
Una vez realizadas las comprobaciones, simplemente se muestra por
pantalla el contenido de la respuesta del servidor (en este caso, el
contenido del archivo solicitado) mediante la propiedad responseText.
Refactorizando la primera aplicación
Acontinuación, se refactoriza su código ampliándolo y mejorándolo
para que se adapte mejor a otras situaciones. En primer lugar, se
definen unas variables que se utilizan en la función que procesa la
respuesta del servidor:
var READY_STATE_UNINITIALIZED = 0;
var READY_STATE_LOADING = 1;
var READY_STATE_LOADED = 2;
var READY_STATE_INTERACTIVE = 3;
var READY_STATE_COMPLETE = 4;
17
19. Como se verá más adelante, la respuesta del servidor sólo puede
corresponder a alguno de los cinco estados definidos por las variables
anteriores. De esta forma, el código puede utilizar el nombre de cada
estado en vez de su valor numérico, por lo que se facilita la lectura y el
mantenimiento de las aplicaciones.
Además, la variable que almacena la instancia del objeto
XMLHttpRequest se va a transformar en una variable global, de forma
que todas las funciones que hacen uso de ese objeto tengan acceso
directo al mismo:
var peticion_http;
A continuación, se crea una función genérica de carga de contenidos
mediante AJAX:
function cargaContenido(url, metodo, funcion) {
peticion_http = inicializa_xhr();
if(peticion_http) {
peticion_http.onreadystatechange = funcion;
peticion_http.open(metodo, url, true);
peticion_http.send(null);
}
}
18
20. La función definida admite tres parámetros: la URL del contenido que
se va a cargar, el método utilizado para realizar la petición HTTP y una
referencia a la función que procesa la respuesta del servidor.
En primer lugar, la función cargaContenido() inicializa el objeto
XMLHttpRequest (llamado xhr de forma abreviada). Una vez
inicializado, se emplea el objeto peticion_http para establecer la
función que procesa la respuesta del servidor. Por último, la función
cargaContenido() realiza la petición al servidor empleando la URL y el
método HTTP indicados como parámetros.
La función inicializa_xhr() se emplea para encapsular la creación del
objeto XMLHttpRequest:
function inicializa_xhr() {
if(window.XMLHttpRequest) {
return new XMLHttpRequest();
}
else if(window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
}
}
La función muestraContenido() también se refactoriza para emplear
las variables globales definidas:
function muestraContenido() {
19
21. if(peticion_http.readyState == READY_STATE_COMPLETE) {
if(peticion_http.status == 200) {
alert(peticion_http.responseText);
}
}
}
Por último, la función descargaArchivo() simplemente realiza una
llamada a la función cargaContenido() con los parámetros adecuados:
function descargaArchivo() {
cargaContenido("http://localhost/holamundo.txt", "GET",
muestraContenido);
}
A continuación se muestra el código completo de la refactorización de
la primera aplicación:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/
xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
20
22. <title>Hola Mundo con AJAX, version 2</title>
<script type="text/javascript" language="javascript">
var READY_STATE_UNINITIALIZED=0;
var READY_STATE_LOADING=1;
var READY_STATE_LOADED=2;
var READY_STATE_INTERACTIVE=3;
var READY_STATE_COMPLETE=4;
var peticion_http;
function cargaContenido(url, metodo, funcion) {
peticion_http = inicializa_xhr();
if(peticion_http) {
peticion_http.onreadystatechange = funcion;
peticion_http.open(metodo, url, true);
peticion_http.send(null);
}
}
21
23. function inicializa_xhr() {
if(window.XMLHttpRequest) {
return new XMLHttpRequest();
}
else if(window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
}
}
function muestraContenido() {
if(peticion_http.readyState == READY_STATE_COMPLETE) {
if(peticion_http.status == 200) {
alert(peticion_http.responseText);
}
}
}
function descargaArchivo() {
cargaContenido("http://localhost/holamundo.txt", "GET",
muestraContenido);
}
22
25. Métodos y propiedades del objeto XMLHttpRequest
El objeto XMLHttpRequest posee muchas otras propiedades y
métodos diferentes a las manejadas por la primera aplicación de
AJAX. A continuación se incluye la lista completa de todas las
propiedades y métodos del objeto y todos los valores numéricos de
sus propiedades.
Las propiedades definidas para el objeto XMLHttpRequest son:
Propiedad Descripción
readyState Valor numérico (entero) que almacena el
estado de la petición
responseText El contenido de la respuesta del servidor en
forma de cadena de texto
responseXML El contenido de la respuesta del servidor en
formato XML. El objeto devuelto se puede
procesar como un objeto DOM
status El código de estado HTTP devuelto por el
servidor (200 para una respuesta correcta, 404
para "No encontrado", 500 para un error de
servidor, etc.)
24
26. statusText El código de estado HTTP devuelto por el
servidor en forma de cadena de texto: "OK",
"Not Found", "Internal Server Error", etc.
Los valores definidos para la propiedad readyState son los siguientes:
Valor Descripción
0 No inicializado (objeto creado, pero no se ha invocado el
método open)
1 Cargando (objeto creado, pero no se ha invocado el
método send)
2 Cargado (se ha invocado el método send, pero el servidor
aún no ha respondido)
3 Interactivo (se han recibido algunos datos, aunque no se
puede emplear la propiedad
responseText)
4 Completo (se han recibido todos los datos de la respuesta
del servidor)
25
27. Los métodos disponibles para el objeto XMLHttpRequest son los
siguientes:
Método Descripción
abort() Detiene la petición actual
getAllResponseHeaders() Devuelve una cadena de texto con
todas las cabeceras de la
respuesta del servidor
getResponseHeader("cabecera") Devuelve una cadena de texto con
el contenido de la cabecera
Solicitada
onreadystatechange Responsable de manejar los
eventos que se producen. Se
invoca cada vez que se produce un
cambio en el estado de la petición
HTTP. Normalmente es una
referencia a una función JavaScript
open("método", "url") Establece los parámetros de la
petición que se realiza al servidor.
Los parámetros necesarios son el
método HTTP empleado y la URL
destino (puede indicarse de forma
absoluta o relativa)
send(contenido) Realiza la petición HTTP al servidor
setRequestHeader("cabecera", Permite establecer cabeceras
personalizadas en la petición HTTP.
"valor")
Se debe invocar el método open()
antes que setRequestHeader ()
26
28. El método open() requiere dos parámetros (método HTTP y URL) y
acepta de forma opcional otros tres parámetros. Definición formal del
método open():
open(string metodo, string URL [,boolean asincrono, string usuario,
string password]);
Por otra parte, el método send() requiere de un parámetro que indica
la información que se va a enviar al servidor junto con la petición
HTTP. Si no se envían datos, se debe indicar un valor igual a null. En
otro caso, se puede indicar como parámetro una cadena de texto, un
array de bytes o un objeto XML DOM.
27