SlideShare una empresa de Scribd logo
1 de 28
Descargar para leer sin conexión
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
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
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
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
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
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
¿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
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
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
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
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
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
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
// 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
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
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
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
}

    }

}



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
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
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
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
<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
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
window.onload = descargaArchivo;



</script>




</head>

<body></body>

</html>




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

Más contenido relacionado

Similar a Ajax (20)

Herramientas web "Ajax"
Herramientas web "Ajax"Herramientas web "Ajax"
Herramientas web "Ajax"
 
Ajax
AjaxAjax
Ajax
 
Ajax tecnologia
Ajax tecnologiaAjax tecnologia
Ajax tecnologia
 
Uts Lenguaje Ajax
Uts Lenguaje AjaxUts Lenguaje Ajax
Uts Lenguaje Ajax
 
Uts Lenguaje Ajax
Uts Lenguaje AjaxUts Lenguaje Ajax
Uts Lenguaje Ajax
 
AJAX
AJAXAJAX
AJAX
 
IntroduccióN Ajax
IntroduccióN AjaxIntroduccióN Ajax
IntroduccióN Ajax
 
Ajax
AjaxAjax
Ajax
 
Ajax
AjaxAjax
Ajax
 
Presentacion Monografia
Presentacion MonografiaPresentacion Monografia
Presentacion Monografia
 
ajax
ajaxajax
ajax
 
Presentacion ajax
Presentacion ajaxPresentacion ajax
Presentacion ajax
 
Ajax
AjaxAjax
Ajax
 
Tecnología ajax para el manejo de la web 2.0
Tecnología ajax para el manejo de la web 2.0Tecnología ajax para el manejo de la web 2.0
Tecnología ajax para el manejo de la web 2.0
 
Qué es y para qué sirve ajax?
Qué es y para qué sirve ajax?Qué es y para qué sirve ajax?
Qué es y para qué sirve ajax?
 
Ajax
AjaxAjax
Ajax
 
AJAX EN CURSO PHP
AJAX EN CURSO PHPAJAX EN CURSO PHP
AJAX EN CURSO PHP
 
Desarrollo de Aplicaciones con Microsoft Ajax 1.0 y Ajax Control Toolkit
Desarrollo de Aplicaciones con Microsoft Ajax 1.0 y Ajax Control ToolkitDesarrollo de Aplicaciones con Microsoft Ajax 1.0 y Ajax Control Toolkit
Desarrollo de Aplicaciones con Microsoft Ajax 1.0 y Ajax Control Toolkit
 
Libro introducción a ajax
Libro introducción a ajaxLibro introducción a ajax
Libro introducción a ajax
 
AJAX
AJAXAJAX
AJAX
 

Ajax

  • 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