S.E.P.            S.E.I.T.       D.G.I.T.         INSTITUTO TECNOLÓGICO                                      Del Istmo.   ...
INDICEDefiniendo Ajax                         2Como es diferente Ajax                  4Quien esta usando Ajax            ...
Definiendo AjaxAjax no es una tecnología. Es realmente muchas tecnologías, cadauna floreciendo por su propio mérito, unién...
Figura 1: El modelo tradicional para las aplicaciones Web (izq.)comparado con el modelo de AJAX (der.).Este acercamiento t...
Cómo es diferente AJAXUna aplicación AJAX elimina la naturaleza “arrancar-frenar- arrancar-frenar” de la interacción en la...
Figura 2: El patrón de interacción sincrónica de una aplicación Webtradicional (arriba) comparada con el patrón asincrónic...
¿Quién está usando Ajax?Google está haciendo una significativa inversión en el acercamientoAjax. Todos los grandes product...
AJAXAjax, acrónimo de Asynchronous JavaScript And XML (JavaScriptasíncrono y XML), es una técnica de desarrollo web para c...
funcionar, incluyendo HTML preformateado, texto plano, JSON y     hasta EBML.Como el DHTML, LAMP o SPA, Ajax no constituye...
usuarios3 al Microsofts Remote Scripting para reemplazar el appletJava por XMLHttpRequest.Frameworks de Scripting Remoto c...
Navegadores que permiten AjaxHa de tenerse en cuenta que ésta es una lista general, y el soporte delas aplicaciones Ajax d...
Primeros pasos con AJAXBreve historia de AJAXLa historia de AJAX está íntimamente relacionada con un objeto deprogramación...
empresa, Alex consiguió que su tecnología se incluyera en la libreríaMSXML que incluye Internet Explorer.De hecho, el nomb...
// Obtener la instancia del objeto XMLHttpRequest        if(window.XMLHttpRequest) {            peticion_http = new XMLHtt...
window.onload = descargaArchivo;</script></head><body></body></html>En el ejemplo anterior, cuando se carga la página se e...
if(window.XMLHttpRequest)    {   //   Navegadores   que    siguen   losestándarespeticion_http = new XMLHttpRequest();}els...
paréntesis, ya que de otro modo se estaría ejecutando la función yalmacenando el valor devuelto en la propiedad onreadysta...
}    }}La función muestraContenido() comprueba en primer lugar que se harecibido la respuesta del servidor (mediante el va...
Como se verá más adelante, la respuesta del servidor sólo puedecorresponder a alguno de los cinco estados definidos por la...
La función definida admite tres parámetros: la URL del contenido quese va a cargar, el método utilizado para realizar la p...
if(peticion_http.readyState == READY_STATE_COMPLETE) {        if(peticion_http.status == 200) {            alert(peticion_...
<title>Hola Mundo con AJAX, version 2</title><script type="text/javascript" language="javascript">var READY_STATE_UNINITIA...
function inicializa_xhr() {    if(window.XMLHttpRequest) {        return new XMLHttpRequest();    }    else if(window.Acti...
window.onload = descargaArchivo;</script></head><body></body></html>                                   23
Métodos y propiedades del objeto XMLHttpRequestEl objeto XMLHttpRequest posee muchas otras propiedades ymétodos diferentes...
statusText          El código de estado HTTP devuelto por el                    servidor en forma de cadena de texto: "OK"...
Los métodos disponibles para el objeto XMLHttpRequest son lossiguientes:Método                         Descripciónabort() ...
El método open() requiere dos parámetros (método HTTP y URL) yacepta de forma opcional otros tres parámetros. Definición f...
Upcoming SlideShare
Loading in...5
×

Ajax

611

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
611
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
15
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Ajax"

  1. 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. 2. INDICEDefiniendo Ajax 2Como es diferente Ajax 4Quien esta usando Ajax 6Ajax 7Tecnologías incluidas en Ajax 7Antecedentes de Ajax 8Problemas e inconvenientes 9Navegadores que permiten Ajax 10Navegadores que no permiten Ajax 10Primeros pasos con Ajax 11Breve historia de Ajax 11La primera aplicación 12 Código fuente 12 Análisis detallado 14Refactorizando la primera aplicación 17Métodos y propiedades del objetoXMLHttpRequest 24 1
  3. 3. Definiendo AjaxAjax no es una tecnología. Es realmente muchas tecnologías, cadauna floreciendo por su propio mérito, uniéndose en poderosas nuevasformas. 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: Lamayoría de las acciones del usuario en la interfaz disparan unrequerimiento HTTP al servidor web. El servidor efectúa un proceso(recopila información, procesa números, hablando con varios sistemaspropietarios), y le devuelve una pagina HTLM al cliente.Este es un modelo adaptado del uso original de la Web como unmedio hipertextual, pero como fans de “The Elements of UserExperience” sabemos, lo que hace a la Web buena para el hipertexto,no la hace necesariamente buena para las aplicaciones de software. 2
  4. 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 lotiene para una gran experiencia de usuario. Mientras el servidor estahaciendo 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 paraaplicaciones, no querríamos hacer esperar a los usuarios. Una vezque la interfaz esta cargada, porque la interacción del usuario deberíadetenerse cada vez que la aplicación necesita algo del servidor? Dehecho, porque debería el usuario ver la aplicación yendo al servidor? 3
  5. 5. Cómo es diferente AJAXUna aplicación AJAX elimina la naturaleza “arrancar-frenar- arrancar-frenar” de la interacción en la Web introduciendo un intermediario -unmotor AJAX- entre el usuario y el servidor. Parecería que sumar unacapa a la aplicación la haría menos reactiva, pero la verdad es locontrario.En vez de cargar un pagina Web, al inicio de la sesión, el navegadorcarga al motor AJAX (escrito en JavaScript y usualmente “sacado” enun frame oculto). Este motor es el responsable por renderizar lainterfaz que el usuario ve y por comunicarse con el servidor en nombredel usuario.El motor AJAX permite que la interacción del usuario con la aplicaciónsuceda asincrónicamente (independientemente de la comunicacióncon el servidor). Así el usuario nunca estará mirando una ventana enblanco del navegador y un icono de reloj de arena esperando a que elservidor haga algo. 4
  6. 6. Figura 2: El patrón de interacción sincrónica de una aplicación Webtradicional (arriba) comparada con el patrón asincrónico de unaaplicación AJAX (abajo).Cada acción de un usuario que normalmente generaría unrequerimiento HTTP toma la forma de un llamado JavaScript al motorAJAX en vez de ese requerimiento. Cualquier respuesta a una accióndel usuario que no requiera una viaje de vuelta al servidor (como unasimple validación de datos, edición de datos en memoria, incluso algode navegación) es manejado por su cuenta.Si el motor necesita algo del servidor para responder (sea enviandodatos para procesar, cargar código adicional, o recuperando nuevosdatos) hace esos pedidos asincrónicamente, usualmente usando XML,sin frenar la interacción del usuario con la aplicación. 5
  7. 7. ¿Quién está usando Ajax?Google está haciendo una significativa inversión en el acercamientoAjax. Todos los grandes productos que Google ha introducido en elultimo año (Orkut, Gmail, la última versión de Google Groups, GoogleSuggest, y Google Maps ) son aplicaciones Ajax. (Para datos mástécnicos de estas implementaciones Ajax, lean estos excelentesanálisis de Gmail, Google Suggest, y Google Maps.) Otros estánsiguiendo la tendencia: muchas de las funciones que la gente ama enFlickr dependen de Ajax, y el motor de búsqueda de Amazon A9.comaplica tecnologías similares.Estos proyectos demuestran que Ajax no es solo técnicamenteimportante, sino también prácticos para aplicaciones en el mundo real.Esta no es otra tecnología que solo trabaja en un laboratorio. Y lasaplicaciones Ajax pueden ser de cualquier tamaño, de lo más simple,funciones simples como Google Suggest a las muy complejas ysofisticadas como Google Maps. 6
  8. 8. AJAXAjax, acrónimo de Asynchronous JavaScript And XML (JavaScriptasíncrono y XML), es una técnica de desarrollo web para crearaplicaciones interactivas o RIA (Rich Internet Applications). Estasaplicaciones se ejecutan en el cliente, es decir, en el navegador de losusuarios mientras se mantiene la comunicación asíncrona con elservidor en segundo plano. De esta forma es posible realizar cambiossobre las páginas sin necesidad de recargarlas, lo que significaaumentar la interactividad, velocidad y usabilidad en las aplicaciones.Ajax es una tecnología asíncrona, en el sentido de que los datosadicionales se requieren al servidor y se cargan en segundo plano sininterferir con la visualización ni el comportamiento de la página.JavaScript es el lenguaje interpretado (scripting language) en el quenormalmente se efectúan las funciones de llamada de Ajax mientrasque el acceso a los datos se realiza mediante XMLHttpRequest, objetodisponible en los navegadores actuales. En cualquier caso, no esnecesario que el contenido asíncrono esté formateado en XML.Ajax es una técnica válida para múltiples plataformas y utilizable enmuchos sistemas operativos y navegadores dado que está basado enestándares abiertos como JavaScript y Document Object Model(DOM).Tecnologías incluidas en AjaxAjax 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. 9. funcionar, incluyendo HTML preformateado, texto plano, JSON y hasta EBML.Como el DHTML, LAMP o SPA, Ajax no constituye una tecnología ensí, sino que es un término que engloba a un grupo de éstas quetrabajan conjuntamente.Antecedentes de AjaxA pesar de que el término «Ajax» fuese creado en 2005, la historia delas tecnologías que permiten Ajax se remonta a una década antes conla iniciativa de Microsoft en el desarrollo de Scripting Remoto. Sinembargo, las técnicas para la carga asíncrona de contenidos en unapágina existente sin requerir recarga completa remontan al tiempo delelemento iframe (introducido en Internet Explorer 3 en 1996) y el tipode elemento layer (introducido en Netscape 4 en 1997, abandonadodurante las primeras etapas de desarrollo de Mozilla). Ambos tipos deelemento tenían el atributo src que podía tomar cualquier direcciónURL externa, y cargando una página que contenga javascript quemanipule la página paterna, pueden lograrse efectos parecidos al Ajax.El Microsofts Remote Scripting (o MSRS, introducido en 1998) resultóun sustituto más elegante para estas técnicas, con envío de datos através de un applet Java el cual se puede comunicar con el clienteusando JavaScript. Esta técnica funcionó en ambos navegadores,Internet Explorer versión 4 y Netscape Navigator versión 4. Microsoftla utilizó en el Outlook Web Access provisto con la versión 2000 deMicrosoft Exchange Server.La comunidad de desarrolladores web, primero colaborando por mediodel grupo de noticias microsoft.public.scripting.remote y despuésusando blogs, desarrollaron una gama de técnicas de scripting remotopara conseguir los mismos resultados en diferentes navegadores. Losprimeros ejemplos incluyen la biblioteca JSRS en el año 2000, laintroducción a la técnica imagen/cookie1 en el mismo año y la técnicaJavaScript bajo demanda (JavaScript on Demand)2 en 2002. En eseaño, se realizó una modificación por parte de la comunidad de 8
  10. 10. usuarios3 al Microsofts Remote Scripting para reemplazar el appletJava por XMLHttpRequest.Frameworks de Scripting Remoto como el ARSCIF4 aparecieron en2003 poco antes de que Microsoft introdujera Callbacks en ASP. NET.5Desde que XMLHttpRequest está implementado en la mayoría de losnavegadores, raramente se usan técnicas alternativas. Sin embargo,todavía se utilizan donde se requiere una mayor compatibilidad, unareducida implementación, o acceso cruzado entre sitios web. Unaalternativa, el Terminal SVG6 (basado en SVG), emplea una conexiónpersistente para el intercambio continuo entre el navegador y elservidor.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. 11. Navegadores que permiten AjaxHa de tenerse en cuenta que ésta es una lista general, y el soporte delas aplicaciones Ajax dependerá de las características que elnavegador 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. 12. Primeros pasos con AJAXBreve historia de AJAXLa historia de AJAX está íntimamente relacionada con un objeto deprogramación llamado XMLHttpRequest. El origen de este objeto seremonta al año 2000, con productos como Exchange 2000, InternetExplorer 5 y Outlook Web Access.Todo comenzó en 1998, cuando Alex Hopmann y su equipo seencontraban desarrollando la entonces futura versión de Exchange2000. El punto débil del servidor de correo electrónico era su clientevía web, llamado OWA (Outlook Web Access).Durante el desarrollo de OWA, se evaluaron dos opciones: un clienteformado sólo por páginas HTML estáticas que se recargabanconstantemente y un cliente realizado completamente con HTMLdinámico o DHTML. Alex Hopmann pudo ver las dos opciones y sedecantó por la basada en DHTML. Sin embargo, para ser realmenteútil a esta última le faltaba un componente esencial: "algo" que evitaratener que enviar continuamente los formularios con datos al servidor.Motivado por las posibilidades futuras de OWA, Alex creó en un solofin de semana la primera versión de lo que denominó XMLHTTP. Laprimera demostración de las posibilidades de la nueva tecnología fueun éxito, pero faltaba lo más difícil: incluir esa tecnología en elnavegador Internet Explorer.Si el navegador no incluía XMLHTTP de forma nativa, el éxito delOWA se habría reducido enormemente. El mayor problema es quefaltaban pocas semanas para que se lanzara la última beta de InternetExplorer 5 previa a su lanzamiento final. Gracias a sus contactos en la 11
  13. 13. empresa, Alex consiguió que su tecnología se incluyera en la libreríaMSXML que incluye Internet Explorer.De hecho, el nombre del objeto (XMLHTTP) se eligió para tener unabuena excusa que justificara su inclusión en la librería XML de InternetExplorer, ya que este objeto está mucho más relacionado con HTTPque con XML.La primera aplicaciónCódigo fuenteLa aplicación AJAX completa más sencilla consiste en una adaptacióndel clásico "Hola Mundo". En este caso, una aplicación JavaScriptdescarga un archivo del servidor y muestra su contenido sin necesidadde 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. 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. 15. window.onload = descargaArchivo;</script></head><body></body></html>En el ejemplo anterior, cuando se carga la página se ejecuta el métodoJavaScript que muestra el contenido de un archivo llamadoholamundo.txt que se encuentra en el servidor. La clave del códigoanterior es que la petición HTTP y la descarga de los contenidos delarchivo se realizan sin necesidad de recargar la página.Análisis detalladoLa aplicación AJAX del ejemplo anterior se compone de cuatrograndes bloques: instanciar el objeto XMLHttpRequest, preparar lafunción de respuesta, realizar la petición al servidor y ejecutar lafunción de respuesta.Todas las aplicaciones realizadas con técnicas de AJAX debeninstanciar en primer lugar el objeto XMLHttpRequest, que es el objetoclave que permite realizar comunicaciones con el servidor en segundoplano, sin necesidad de recargar las páginas. La implementación delobjeto XMLHttpRequest depende de cada navegador, por lo que esnecesario emplear una discriminación sencilla en función delnavegador en el que se está ejecutando el código: 14
  16. 16. if(window.XMLHttpRequest) { // Navegadores que siguen losestándarespeticion_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 deforma 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 tipoActiveX.Una vez obtenida la instancia del objeto XMLHttpRequest, se preparala función que se encarga de procesar la respuesta del servidor. Lapropiedad onreadystatechange del objeto XMLHttpRequest permiteindicar esta función directamente incluyendo su código mediante unafunción anónima o indicando una referencia a una funciónindependiente. En el ejemplo anterior se indica directamente elnombre de la función:peticion_http.onreadystatechange = muestraContenido;El código anterior indica que cuando la aplicación reciba la respuestadel servidor, se debe ejecutar la función muestraContenido(). Como eshabitual, la referencia a la función se indica mediante su nombre sin 15
  17. 17. paréntesis, ya que de otro modo se estaría ejecutando la función yalmacenando el valor devuelto en la propiedad onreadystatechange.Después de preparar la aplicación para la respuesta del servidor, serealiza 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 sencilloque se puede enviar al servidor. En concreto, se trata de una peticiónde tipo GET simple que no envía ningún parámetro al servidor. Lapetición HTTP se crea mediante el método open(), en el que se incluyeel 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 elmé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 quepermiten hacer las peticiones al servidor. Por último, cuando se recibela respuesta del servidor, la aplicación ejecuta de forma automática lafunción establecida anteriormente.function muestraContenido() { if(peticion_http.readyState == 4) { if(peticion_http.status == 200) { alert(peticion_http.responseText); 16
  18. 18. } }}La función muestraContenido() comprueba en primer lugar que se harecibido la respuesta del servidor (mediante el valor de la propiedadreadyState). Si se ha recibido alguna respuesta, se comprueba quesea válida y correcta (comprobando si el código de estado HTTPdevuelto es igual a 200).Una vez realizadas las comprobaciones, simplemente se muestra porpantalla el contenido de la respuesta del servidor (en este caso, elcontenido del archivo solicitado) mediante la propiedad responseText.Refactorizando la primera aplicaciónAcontinuación, se refactoriza su código ampliándolo y mejorándolopara que se adapte mejor a otras situaciones. En primer lugar, sedefinen unas variables que se utilizan en la función que procesa larespuesta 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. 19. Como se verá más adelante, la respuesta del servidor sólo puedecorresponder a alguno de los cinco estados definidos por las variablesanteriores. De esta forma, el código puede utilizar el nombre de cadaestado en vez de su valor numérico, por lo que se facilita la lectura y elmantenimiento de las aplicaciones.Además, la variable que almacena la instancia del objetoXMLHttpRequest se va a transformar en una variable global, de formaque todas las funciones que hacen uso de ese objeto tengan accesodirecto al mismo:var peticion_http;A continuación, se crea una función genérica de carga de contenidosmediante 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. 20. La función definida admite tres parámetros: la URL del contenido quese va a cargar, el método utilizado para realizar la petición HTTP y unareferencia a la función que procesa la respuesta del servidor.En primer lugar, la función cargaContenido() inicializa el objetoXMLHttpRequest (llamado xhr de forma abreviada). Una vezinicializado, se emplea el objeto peticion_http para establecer lafunción que procesa la respuesta del servidor. Por último, la funcióncargaContenido() realiza la petición al servidor empleando la URL y elmétodo HTTP indicados como parámetros.La función inicializa_xhr() se emplea para encapsular la creación delobjeto 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 emplearlas variables globales definidas:function muestraContenido() { 19
  21. 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 unallamada 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 dela 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. 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. 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
  24. 24. window.onload = descargaArchivo;</script></head><body></body></html> 23
  25. 25. Métodos y propiedades del objeto XMLHttpRequestEl objeto XMLHttpRequest posee muchas otras propiedades ymétodos diferentes a las manejadas por la primera aplicación deAJAX. A continuación se incluye la lista completa de todas laspropiedades y métodos del objeto y todos los valores numéricos desus propiedades.Las propiedades definidas para el objeto XMLHttpRequest son:Propiedad DescripciónreadyState Valor numérico (entero) que almacena el estado de la peticiónresponseText El contenido de la respuesta del servidor en forma de cadena de textoresponseXML El contenido de la respuesta del servidor en formato XML. El objeto devuelto se puede procesar como un objeto DOMstatus 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. 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ón0 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. 27. Los métodos disponibles para el objeto XMLHttpRequest son lossiguientes:Método Descripciónabort() Detiene la petición actualgetAllResponseHeaders() Devuelve una cadena de texto con todas las cabeceras de la respuesta del servidorgetResponseHeader("cabecera") Devuelve una cadena de texto con el contenido de la cabecera Solicitadaonreadystatechange 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 JavaScriptopen("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 servidorsetRequestHeader("cabecera", Permite establecer cabeceras personalizadas en la petición HTTP."valor") Se debe invocar el método open() antes que setRequestHeader () 26
  28. 28. El método open() requiere dos parámetros (método HTTP y URL) yacepta de forma opcional otros tres parámetros. Definición formal delmé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 indicala información que se va a enviar al servidor junto con la peticiónHTTP. Si no se envían datos, se debe indicar un valor igual a null. Enotro caso, se puede indicar como parámetro una cadena de texto, unarray de bytes o un objeto XML DOM. 27

×