UNIDAD 4AJAX

UNIDAD IV AJAX
ndice

Introduccin Objetivo

3 4

Ajax
1. Definicin 2. Historia 3. XMLHttpRequest 4. Caractersticas 5. Navegadores 6. Ventajas y desventajas 7. Estructura de Ajax 8. Funcionamiento de Ajax 9. Listado de libreras, frameworks y herramientas para AJAX 10. reas de trabajo 11. Aplicaciones 12. Ejercicios Conclusiones Bibliografa 4 5 6 7 7 8 9 11 11

14 14 16 25 26

Sistemas WEB

UNIDAD IV AJAX

INTRODUCCION

AJAX es la unin de varias tecnologas de desarrollo Web que buscan crear aplicaciones interactivas, la importancia de sta tcnica est en que al utilizarla, sta se ejecuta en el lado del cliente, pero por debajo mantiene una comunicacin con el servidor. Una de las caractersticas ms importantes de esta tecnologa es que se basa en la construccin de otras como XML, CSS, XHTML, JavaScript, entre otras.

Sistemas WEB

UNIDAD IV AJAX

OBJETIVO: Conocer las caractersticas y funcionamiento de Ajax.

AJAX 1. Definicin
El trmino AJAX se present por primera vez en el artculo "Ajax: A New Approach to Web Applications (http://www.adaptivepath.com/publications/essays/archives/000385.php) " publicado por Jesse James Garrett el 18 de Febrero de 2005. Hasta ese momento, no exista un trmino normalizado que hiciera referencia a un nuevo tipo de aplicacin web que estaba apareciendo. El trmino AJAX es un acrnimo de Asynchronous JavaScript + XML, que se puede traducir como "JavaScript asncrono + XML". El artculo define AJAX de la siguiente forma: Ajax no es una tecnologa en s mismo. En realidad, se trata de varias tecnologas independientes que se unen de formas nuevas y sorprendentes. Las tecnologas que forman AJAX son: XHTML y CSS, para crear una presentacin basada en estndares. DOM, para la interaccin y manipulacin dinmica de la presentacin. XML, XSLT y JSON, para el intercambio y la manipulacin de informacin. XMLHttpRequest, para el intercambio asncrono de informacin. JavaScript, para unir todas las dems tecnologas.

Sistemas WEB

UNIDAD IV AJAX

2. Historia
A pesar de que el trmino "AJAX" fuese creado en 2005, la historia de las tecnologas que permiten AJAX se remonta a una dcada antes con la iniciativa de Microsoft en el desarrollo de Scripting Remoto. Sin embargo, las tcnicas para la carga asncrona de contenidos en una pgina existente desde la introduccin del elemento iframe en Internet Explorer 3 en 1996 y el tipo de elemento layer en Netscape 4 en 1997, abandonado durante las primeras etapas de desarrollo de Mozilla. Ambos tipos de elemento tenan el atributo src que poda tomar cualquier direccin URL externa, y cargando una pgina que contenga javascript que manipule la pgina paterna, pudiendo lograrse efectos parecidos al AJAX. El Microsoft's Remote Scripting (o MSRS, introducido en 1998) result un sustituto ms elegante para estas tcnicas, con envo de datos a travs de un applet Java el cual se puede comunicar con el cliente usando JavaScript. Esta tcnica funcion en ambos navegadores, Internet Explorer versin 4 y Netscape Navigator versin 4. Microsoft la utiliz en el Outlook Web Access provisto con la versin 2000 de Microsoft Exchange Server. La comunidad de desarrolladores Web, primero colaborando por medio del grupo de noticias microsoft.public.scripting.remote y despus usando blogs, desarrollaron una gama de tcnicas de scripting remoto para conseguir los mismos resultados en diferentes navegadores. Los primeros ejemplos incluyen la librera JSRS en el ao 2000, la introduccin a la tcnica imagen/cookie en el mismo ao y la tcnica JavaScript bajo demanda (JavaScript on Demand) en 2002. En ese ao, se realiz una modificacin por parte de la comunidad de usuarios al Microsoft's Remote Scripting para reemplazar el applet Java por XMLHttpRequest. Frameworks de Scripting Remoto como el ARSCIF aparecieron en 2003 poco antes de que Microsoft introdujera Callbacks en ASP.NET. Desde que XMLHttpRequest est implementado en la mayora de los navegadores, raramente se usan tcnicas alternativas. Sin embargo, todava se utilizan donde se requiere una mayor compatibilidad, una reducida implementacin, o acceso cruzado entre sitios web. Una alternativa, el Terminal SVG (basado en SVG), emplea una conexin persistente para el intercambio continuo entre el navegador y el servidor.

Sistemas WEB

UNIDAD IV AJAX
3. XMLHttpRequest
XMLHttpRequest (XHR), tambin referida como XMLHTTP (Extensible Markup Language / Hypertext Transfer Protocol), es una interfaz empleada para realizar peticiones HTTP y HTTPS a servidores Web. Para los datos transferidos se usa cualquier codificacin basada en texto, incluyendo: texto plano, XML, JSON, HTML y codificaciones particulares especficas. La interfaz se presenta como una clase de la que una aplicacin cliente puede generar tantas instancias como necesite para manejar el dilogo con el servidor. El uso ms popular, si bien no el nico, de esta interfaz es proporcionar contenido dinmico y actualizaciones asncronas en pginas WEB mediante tecnologas construidas sobre ella como por ejemplo AJAX. Caractersticas de XMLHttpRequest Comunicacin GET/POST Documentos pueden ser texto plano/xml Trabaja en background Nmero limitado de peticiones Permite especificar un manejador para el control de cambios de estado Manejador notifica el estado de la peticin: Inicializada Iniciada En proceso de retornar la informacin Operacin completada

Mtodos de XMLHttpRequest
open("method", "URL", syn/asyn):Asigna la URL de destino, el mtodo y otros parmetros opcionales de una peticin pendiente send(content):Enva la peticin, opcionalmente se puede enviar una cadena de texto o un objeto DOM abort():Detiene la peticin actual getAllResponseHeaders(): Devuelve todas las cabeceras de la respuesta como pares de etiqueta y valores en una cadena getResponseHeader("headerLabel"): Devuelve el valor de una cabecera determinada. setRequestHeader("label", "value"):Asigna un valor al par label/valuepara la cabecera enviada.

Sistemas WEB

UNIDAD IV AJAX
Propiedades de XMLHttpRequest onreadystatechange: El manejador del evento llamado en cada cambio de estado del objeto. readyState: Indica el estado del objeto o la peticin 0 = sin inicializar 1 =cargando 2 = fin de la carga 3 = actualizando la informacin recibida 4 = Operacin completada status: Estado HTTP devuelto por el servidor 404 si la pgina no se encuentra 200 si todo ha ido bien responseText: Cadena de texto con los datos devueltos por el servidor responseXML: Objeto DOM devuelto por el servidor statusText: Respuesta del servidor asociada al status (mensaje de texto).

4. Caractersticas de Ajax
Las aplicaciones son ms interactivas, responden a las interacciones del usuario ms rpidamente, al estilo aplicaciones de escritorio. Estas aplicaciones tienen un aspecto (look and feel) muy similar a las aplicaciones de escritorio tradicionales sin depender de plugins o caractersticas especficas de los navegadores. Se reduce el tamao de la informacin intercambiada o Muchas micro-peticiones, pero el flujo de datos global es inferior Se libera de procesamiento a la parte servidora (se realiza en la parte cliente) AJAX actualiza porciones de la pgina en vez de la pgina completa. 5. Navegadores

Navegadores que permiten Ajax

Navegadores basados en Gecko como Mozilla, Mozilla Firefox, SeaMonkey, Camino, Flock, Epiphany, Galeon y Netscape versin 7.1 y superiores Microsoft Internet Explorer para Windows versin 5.0 y superiores, y los navegadores basados en l Navegadores con el API KHTML versin 3.2 y superiores implementado, incluyendo Konqueror versin 3.2 y superiores, Apple Safari versin 1.2 y

Navegadores que no permiten Ajax

Opera 7 y anteriores Microsoft Internet Explorer para Windows versin 4.0 y anteriores Microsoft Internet Explorer para Macintosh, todas las versiones Dillo Navegadores basados en texto como Lynx y Links Navegadores para incapacitados visuales (braille)

Sistemas WEB

UNIDAD IV AJAX
superiores, y el Web Browser for S60 de Nokia tercera generacin y posteriores Opera versin 8.0 y superiores, incluyendo Opera Mobile Browser versin 8.0 y superiores

Navegadores

6. Ventajas y desventajas de Ajax

Ventajas
Utiliza tecnologas ya existentes. Soportada por la mayora de los navegadores modernos. Interactividad. El usuario no tiene que esperar hasta que llegen los datos del servidor. Portabilidad (no requiere plug-in como Flash y Applet de Java) Mayor velocidad, esto debido que no hay que retornar toda la pgina nuevamente. La pgina se asemeja a una aplicacin de escritorio.

Desventajas
Se pierde el concepto de volver a la pgina anterior. Si se guarda en favoritos no necesariamente al visitar nuevamente el sitio se ubique donde nos encontrabamos al grabarla. La existencia de pginas con AJAX y otras sin esta tecnologa hace que el usuario se desoriente. Problemas con navegadores antiguos que no implementan esta tecnologa. No funciona si el usuario tiene desactivado el JavaScript en su navegador. Requiere programadores que conozcan todas las tecnologas que intervienen en AJAX. Dependiendo de la carga del servidor podemos experimentar tiempos tardos de respuesta que desconciertan al visitante.

Ventajas y desventajas de Ajax

Sistemas WEB

UNIDAD IV AJAX
7. Estructura de Ajax
El modelo clsico de aplicaciones Web funciona de esta forma: La mayora de las acciones del usuario en la interfaz disparan un requerimiento HTTP al servidor web. El servidor efecta un proceso (recopila informacin, procesa nmeros, hablando con varios sistemas propietarios), y le devuelve una pgina 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.

Figura 1: El modelo tradicional para las aplicaciones Web comparado con el modelo de AJAX.

Esta tcnica tradicional para crear aplicaciones web funciona correctamente, pero no crea una buena sensacin al usuario. Al realizar peticiones continuas al servidor, el usuario debe esperar a que se recargue la pgina con los cambios solicitados. Si la aplicacin debe realizar peticiones continuas, su uso se convierte en algo molesto. AJAX permite mejorar completamente la interaccin del usuario con la aplicacin, evitando las recargas constantes de la pgina, ya que el intercambio de informacin con el servidor se produce en un segundo plano. Las aplicaciones construidas con AJAX eliminan la recarga constante de pginas mediante la creacin de un elemento intermedio entre el usuario y el servidor. La nueva capa intermedia de AJAX mejora la respuesta de la aplicacin, ya que el usuario nunca se encuentra con una ventana del navegador vaca esperando la respuesta del servidor. Sistemas WEB 9

UNIDAD IV AJAX
Diferencias entre Ajax y una aplicacin tradicional

Comparacin entre las comunicaciones sncronas de las aplicaciones web tradicionales y las comunicaciones asncronas de las aplicaciones AJAX (Imagen original creada por Adaptive Path y utilizada con su permiso)

Las peticiones HTTP al servidor se sustituyen por peticiones JavaScript que se realizan al elemento encargado de AJAX. Las peticiones ms simples no requieren intervencin del servidor, por lo que la respuesta es inmediata. Si la interaccin requiere una respuesta del servidor, la peticin se realiza de forma asncrona mediante AJAX. En este caso, la interaccin del usuario tampoco se ve interrumpida por recargas de pgina o largas esperas por la respuesta del servidor. Desde su aparicin, se han creado cientos de aplicaciones web basadas en AJAX. En la mayora de casos, AJAX puede sustituir completamente a otras tcnicas como Flash. Adems, en el caso de las aplicaciones web ms avanzadas, pueden llegar a sustituir a las aplicaciones de escritorio.

Sistemas WEB

10

UNIDAD IV AJAX
8. Funcionamiento de Ajax
1. Usuario provoca un evento 2. Se crea y configura un objeto XMLHttpRequest 3. El objeto XMLHttpRequestrealiza una llamada al servidor 4. La peticin se procesa en el servidor 5. El servidor retorna un documento XML que contienen el resultado 6. El objeto XMLHttpRequestllama a la funcin callback() y procesa el resultado 7. Se actualiza el DOM de la pgina asociado con la peticin con el resultado devuelto.

9. Libreras, frameworks y herramientas para AJAX

Prototype es un framework basado en JavaScript que se orienta al desarrollo sencillo y dinmico de aplicaciones web. Es una herramienta que implementa las tcnicas AJAX y su potencial es aprovechado al mximo cuando se desarrolla con Ruby On Rails. AHAH (Asychronous HTML and HTTP) es un microformato que permite la actualizacin asncrona del contenido (X)HTML, y su formateo con CSS, al estilo de lo que hace AJAX. La diferencia con ste es que esto se realiza utilizando (X)HTML y no XML. Pero como (X)HTML puede ser visto como un dialecto de XML, entonces podemos decir que AHAH est includo en AJAX (por lo que lo de llamarlo AJAX 2.0 es muy sensacionalista y poco estricto). dojo es un Framework que contiene APIs y widgets (controles) para facilitar el desarrollo de aplicaciones Web que utilicen tecnologa AJAX. Contiene un sistema de empaquetado inteligente, los efectos de UI, drag and drop APIs, widget APIs, abstraccin de eventos, almacenamiento de APIs en el cliente, e interaccin de APIs con AJAX. Dojo resuelve asuntos de usabilidad comunes como pueden ser la navegacin y deteccin del navegador, soportar cambios de URL en la barra de URLs para luego regresar a ellas(bookmarking), y la habilidad de degradar cuando AJAX/JavaScript no es completamente soportado en el cliente. AjaxAC es un marco de trabajo escrito en PHP y que utiliza AJAX para la relacin con el servidor. Este framework es liberado bajo la licencia de Apache v2.0. Sistemas WEB 11

UNIDAD IV AJAX
Ajax.NET Professional es uno de las primeras libreras AJAX disponibles para Microsoft ASP.NET y trabaja con .NET 1.1 y 2.0. AjaxRequest Library es producto de AjaxToolbox.com, que simplifica y extiende las capacidades del objeto XMLHttpRequest (el corazn de AJAX) y te permite desarrollar tus proyectos, sin tener que preocuparte por los procesos a bajo nivel. Bajax es una pequea y simple librera JavaScript para usar AJAX en nuestra pginas web. Es independiente del lenguaje de programacin. Podemos mostrar contenido dinmico usando comandos simples. DHTMLgoodies.com nos ofrece una gran cantidad de utilidades/scripts de DHTML, JavaScript y Ajax. Taconite es framework que simplifica la creacin de aplicaciones web Ajax. Automatiza las tediosas tareas relacionadas con Ajax, tales como la creacin y gestin del objeto XMLHttpRequest y la creacin de contenido dinmico. Taconite se puede utilizar con todos los navegadores web actuales (Firefox, Safari, Internet Explorer, Opera y Konqueror, por citar algunos) y puede utilizarse con tecnologas del lado del servidor como Java EE, .Net, PHP cualquier lenguaje que retorne como respuesta XHTML. jQuery es un nuevo tipo de librerias de Javascript que permite simplificar la manera de interactuar con los documentos HTML, permitiendo manejar eventos,desarrollar animaciones, y agregar interaccin con la tecnologa AJAX a nuestras pginas web. jQuery esta diseado para cambiar la forma de escribir cdigo JavaScript. moo.fx es un librera Javascript liviana y pequea (3KB) con la cual podemos conseguir unos efectos muy interesantes. Trabaja con los frameworks Prototype y Mootools. Simple y fcil de usar. Podemos controlar modificar las propiedades CSS y los elementos HTML. TurboWidgets son controles JavaScript del lado del cliente para proporcionan un agradable y manejable interfaz de usuario para aplicaciones web estilo AJAX. Construido con Dojo Toolkit, TurboWidgets estn diseados para un uso fcil. qForms JavaScript API es uno de los ms completas API JavaScript para la fcil creacin y manipulacin de formularios en nuestro proyectos web. Zapatec AJAX Suite te brinda una cantidad de herramientas para interfaces de usuarios en tus aplicaciones web, como por ejemplo: calendarios, mens, explorador rbol, formularios, grid, slider, tabs, drag-drgop, efectos y ms. Rico es una librera de efectos Ajax disponible en OpenRico que permite simplificar el desarrollo de aplicaciones que utilicen esta tecnologa. Mediante Rico es muy sencillo definir la operacin bsica de Ajax: enviar una solicitud al servidor para que devuelva informacin. Dispone tambin de algunos efectos grficos, tablas actualizables y secciones de drag & drop. Sajax es una herramienta de cdigo abierto diseada para ayudar a los sitios web que usan AJAX framework (tambin conocido como XMLHttpRequest). Permite al Sistemas WEB 12

UNIDAD IV AJAX
programador llamar a funciones PHP, Perl o Python desde su pgina web por medio de JavaScript sin necesidad de forzar una actualizacin de la pgina en el navegador. sardalya herramienta API la creacin de pginas DHTML, diseada para trabajar en todos los navegadores que soportan DOM. script.aculo.us es una librera JavaScript que permite el uso de controles AJAX, drag & drop, y otros efectos visuales en una pgina web. Se distribuye mediante descargas en varios formatos de archivo, y tambin est incluido en Ruby on Rails y otros frameworks de desarrollo web. Spry Framework for Ajax es una librera JavaScript de Adobe que facilita el uso de funciones con AJAX. Se encarga de manejar la complejidad interna del AJAX y permite al desarrollador crear fcilmente aplicaciones web 2.0. Tacos librera que proporciona componentes AJAX para Tapestry (framework para el desarrollo aplicaciones web en Java). Su funcionalidad est basada en el framework Dojo. Yahoo! User Interface Library es un paquete de utilidades y controles, escritos en JavaScript, que facilitan la construccin de aplicaciones interactivas (RIA). [Tales como] Drag and drops, animaciones, aplicaciones con Ajax, DOM, etc. Todas muy completas y fciles de poner en prctica (con pocas lneas de cdigo). Zebda es una librera en JavaScript para diversos propsitos. Se basa en Prototype 1.4.0. Zephyr es un framework para crear aplicaciones AJAX con PHP5. Puedes desarrollar fcilmente aplicaciones empresariales utilizando este robusto framework. Es muy fcil de aprender y muy sencillo de implementar. ZK es un framework Ajax de cdigo abierto que dispone de herramientas controles para crear interfaces de usuarios similares a las de escritorio.

Sistemas WEB

13

UNIDAD IV AJAX
10. reas de trabajo de Ajax

Validacin de datos de formularios en tiempo real . Identificadores de usuario, nde serie, cdigos postales u otro cdigo especial que necesite validacin en el lado del servidor antes de ser enviado el formulario. Autocompletado Direcciones de correo, nombres, ciudades Operaciones de detalle Obtener informacin ms detallada de un producto. GUI avanzadas Controles en rbol, mens, barras de progreso. Refresco de datos Notificaciones del servidor Actualizar o eliminar registros Expandir formularios web Devolver peticiones simples de bsqueda Editar rboles de categoras

11.

Aplicaciones de Ajax

AJAX ha permitido a los desarrolladores web de todo el mundo para agregar funcionalidad a sus sitios como nunca antes. Algunas aplicaciones : Dragable Boxes Crear cajas de contenido drag and drop. o

JqUploader Use AJAX y jQuery para subir archivos. o

Sistemas WEB

14

UNIDAD IV AJAX

Embed Google Maps o

amCharts Crear pie charts usando AJAX. o

Whizzywig AJAX Editor What You See Is What You Get (WYSIWYG).

Gmail. GoogleMaps GoogleSuggest Microsoft:Windows LiveMail. Windows Local Live(antesMSN Virtual Earth) Amazon: HousingMaps(http://www.housingmaps.com/), con GoogleMaps Nuevo Yahoo! Mail Aplicaciones de Escritorio: Suite de oficina gOffice Thinkfree Zimbra Procesadores de texto Writely FCKeditor Hoja de clculo Num Sum Numbler Calendarios Kiko Sistemas WEB 15

UNIDAD IV AJAX
12. Ejemplos de Ajax

I. Pgina 1 <html> <head> </head> <body> <script> var ajax; function funcionCallback() { // Comprobamos si la peticion se ha completado (estado 4) if( ajax.readyState == 4 ) { // Comprobamos si la respuesta ha sido correcta (resultado HTTP 200) if( ajax.status == 200 ) { // Escribimos el resultado en la pagina HTML mediante DHTML document.all.salida.innerHTML = "<b>"+ajax.responseText+"</b>"; } } } function recuperaResidencia() { // Creamos el control XMLHttpRequest segun el navegador en el que estemos if( window.XMLHttpRequest ) ajax = new XMLHttpRequest(); // No Internet Explorer else ajax = new ActiveXObject("Microsoft.XMLHTTP"); // Internet Explorer // Almacenamos en el control al funcion que se invocara cuando la peticion // cambie de estado ajax.onreadystatechange = funcionCallback; // Enviamos la peticion ajax.open( "GET", "pagina2.jsp?persona="+document.all.entrada.value, true ); ajax.send( "" ); } </script> <img src="http://www.adictosaltrabajo.com/imagenes/adic000.jpg"/> <br/> <br/> <input type="text" id="entrada" size="77"/> <input type="button" value="Consultar" onclick="recuperaResidencia()"/> <br/> <br/> Lugar de residencia: <span id="salida"></span> <br/> <br/>

Sistemas WEB

16

UNIDAD IV AJAX
<img src="http://www.autentia.com/img/autentia.gif"/> </body> </html> Pagina2 <% // Obtener el parametro con el nombre de la persona String persona = request.getParameter("persona"); // Devolver el lugar de residencia de la persona if( persona.equalsIgnoreCase("Jesus Hernandez") ) { out.print("GUADALAJARA"); } else if( persona.equalsIgnoreCase("Fulano de tal") ) { out.print("PINTO"); } else if( persona.equalsIgnoreCase("Fulano de cual") ) { out.print("VALDEMORO"); } else { out.print("PERSONA DESCONOCIDA"); } %>

Sistemas WEB

17

UNIDAD IV AJAX
II.
<html> <head> <title>Ejemplo1</title> <script language = "javascript"> var XMLHttpRequestObject = false; if (window.XMLHttpRequest) { XMLHttpRequestObject = new XMLHttpRequest(); } else if (window.ActiveXObject) { XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP"); } function pedirDatos(fuenteDatos, divID){ if(XMLHttpRequestObject) { var obj = document.getElementById(divID); XMLHttpRequestObject.open("GET", fuenteDatos); XMLHttpRequestObject.onreadystatechange = function(){ if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) { obj.innerHTML = XMLHttpRequestObject.responseText; } } XMLHttpRequestObject.send(null); } } </script> </head> <body> <H1>Mostrando datos con AJAX</H1> <form> <input type = "button" value = "Mostrar mensaje" onclick = "pedirDatos('datos.txt','targetDiv')"> </form> <div id="targetDiv" style="background-color:#99FF66;"> <p>Aqu&iacute; aparecer&aacute; texto</p> </div> </body> </html>

Sistemas WEB

18

UNIDAD IV AJAX

III.

Pagina1.html

<html> <head> <title>Problema</title> <script src="funciones.js" language="JavaScript"></script> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <h1>Signos del horscopo.</h1> <div id="menu"> <p><a id="enlace1" href="pagina1.php?cod=1">Aries</a></p> <p><a id="enlace2" href="pagina1.php?cod=2">Tauro</a></p> <p><a id="enlace3" href="pagina1.php?cod=3">Geminis</a></p> <p><a id="enlace4" href="pagina1.php?cod=4">Cancer</a></p> <p><a id="enlace5" href="pagina1.php?cod=5">Leo</a></p> <p><a id="enlace6" href="pagina1.php?cod=6">Virgo</a></p> <p><a id="enlace7" href="pagina1.php?cod=7">Libra</a></p> <p><a id="enlace8" href="pagina1.php?cod=8">Escorpio</a></p> <p><a id="enlace9" href="pagina1.php?cod=9">Sagitario</a></p> <p><a id="enlace10" href="pagina1.php?cod=10">Capricornio</a></p> <p><a id="enlace11" href="pagina1.php?cod=11">Acuario</a></p> <p><a id="enlace12" href="pagina1.php?cod=12">Piscis</a></p> </div> <div id="detalles">Seleccione su signo.</div> </body> </html>

Sistemas WEB

19

UNIDAD IV AJAX
IV. Archivo.html <html> <head> <title>Problema</title> <script src="funciones.js" language="JavaScript"></script> </head> <body> <h1>Datos de paises.</h1> <p>Seleccione el pais <select id="pais"> <option value="0" selected>seleccione</option> <option value="Argentina">Argentina</option> <option value="Brasil">Brasil</option> <option value="Chile">Chile</option> </select><br> <input type="button" id="boton1" value="Recuperar"> </p> <div id="resultados"></div> </body> </html> Funciones.js addEvent(window,'load',inicializarEventos,false); function inicializarEventos() { var ob=document.getElementById('boton1'); addEvent(ob,'click',presionBoton,false); } function presionBoton(e) { var ob1=document.getElementById('pais'); recuperarDatos(ob1.value); } var conexion1; function recuperarDatos(pais) { conexion1=crearXMLHttpRequest(); conexion1.onreadystatechange = procesarEventos; conexion1.open('GET','pagina1.php?pa='+pais, true); conexion1.send(null); } function procesarEventos() { var resultados = document.getElementById("resultados"); if(conexion1.readyState == 4) { var xml = conexion1.responseXML; var capital=xml.getElementsByTagName('capital'); var superficie=xml.getElementsByTagName('superficie'); var idioma=xml.getElementsByTagName('idioma'); var poblacion=xml.getElementsByTagName('poblacion'); resultados.innerHTML='Capital='+capital[0].firstChild.nodeValue + '<br>' + 'Superficie='+superficie[0].firstChild.nodeValue + '<br>' +

Sistemas WEB

20

UNIDAD IV AJAX
'Idioma='+idioma[0].firstChild.nodeValue '<br>' + 'Poblacion='+poblacion[0].firstChild.nodeValue ; } else { resultados.innerHTML = 'Cargando...'; } } //*************************************** //Funciones comunes a todos los problemas //*************************************** function addEvent(elemento,nomevento,funcion,captura) { if (elemento.attachEvent) { elemento.attachEvent('on'+nomevento,funcion); return true; } else if (elemento.addEventListener) { elemento.addEventListener(nomevento,funcion,captura); return true; } else return false; } function crearXMLHttpRequest() { var xmlHttp=null; if (window.ActiveXObject) xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); else if (window.XMLHttpRequest) xmlHttp = new XMLHttpRequest(); return xmlHttp; } Pagina.php <?php if ($_REQUEST['pa']=='Argentina') { $superficie=2700000; $capital="Buenos Aires"; $idioma="Castellano"; $poblacion=38000000; } if ($_REQUEST['pa']=='Brasil') { $superficie=8500000; $capital="Brasilia"; $idioma="Portugues"; $poblacion=163000000; } if ($_REQUEST['pa']=='Chile') +

Sistemas WEB

21

UNIDAD IV AJAX
{ $superficie=750000; $capital="Santiago"; $idioma="Castellano"; $poblacion=15000000; } $xml="<?xml version=\"1.0\"?>\n"; $xml.="<pais>\n"; $xml.="<superficie>$superficie</superficie>\n"; $xml.="<capital>$capital</capital>\n"; $xml.="<idioma>$idioma</idioma>\n"; $xml.="<poblacion>$poblacion</poblacion>\n"; $xml.="</pais>\n"; header('Content-Type: text/xml'); echo $xml; ?>

V.

Pagina1.html

<html> <head> <title>Problema</title> <script src="funciones.js" language="JavaScript"></script> </head> <body> <form action="pagina1.php" method="post" id="formulario"> Ingrese nro:<input type="text" name="nro" id="nro" size="10"><br> <input type="submit" value="Calcular el cuadrado" id="enviar"> <div id="resultados"></div> </form> </body> </html>

Funciones.js
addEvent(window,'load',inicializarEventos,false); function inicializarEventos() {

Sistemas WEB

22

UNIDAD IV AJAX
var ref=document.getElementById('formulario'); addEvent(ref,'submit',enviarDatos,false); } function enviarDatos(e) { if (window.event) window.event.returnValue=false; else if (e) e.preventDefault(); enviarFormulario(); } var conexion1; function enviarFormulario() { conexion1=crearXMLHttpRequest(); conexion1.onreadystatechange = procesarEventos; var num=document.getElementById('nro').value; alert('Valor de la propiedad readyState:'+conexion1.readyState); conexion1.open('GET','pagina1.php?numero='+num, true); conexion1.send(null); } function procesarEventos() { alert('Valor de la propiedad readyState:'+conexion1.readyState); var resultados = document.getElementById("resultados"); if(conexion1.readyState == 4) { resultados.innerHTML = conexion1.responseText; } else if (conexion1.readyState==1 || conexion1.readyState==2 conexion1.readyState==3) { resultados.innerHTML = 'Procesando...'; } }

||

//*************************************** //Funciones comunes a todos los problemas //*************************************** function addEvent(elemento,nomevento,funcion,captura) { if (elemento.attachEvent) { elemento.attachEvent('on'+nomevento,funcion); return true; } else if (elemento.addEventListener) { elemento.addEventListener(nomevento,funcion,captura);

Sistemas WEB

23

UNIDAD IV AJAX
return true; } else return false; } function crearXMLHttpRequest() { var xmlHttp=null; if (window.ActiveXObject) xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); else if (window.XMLHttpRequest) xmlHttp = new XMLHttpRequest(); return xmlHttp; }

Pagina1.php
<?php $cuadrado=$_REQUEST['numero']*$_REQUEST['numero']; echo $cuadrado; ?>

Sistemas WEB

24

UNIDAD IV AJAX

Conclusiones En el presente trabajo se aprendi como se utiliza Ajax basndose en aplicaciones de Javascript y Php , utilizando los estilos para generar aplicaciones dinmicas. Uno de los aspectos importantes de Ajax es que se utilizado para realizar muchas aplicaciones tanto para la web , como para trabajos de oficina , uno de los desarrollos ms destacados son los que se encuentran en Google como el Google Maps y aplicaciones de Yahoo. Igualmente resalta que se realizan aplicaciones en las que no es necesario refrescar.

Sistemas WEB

25

UNIDAD IV AJAX

BIBLIOGRAFIA
1. Ajax (Asynchronous JavaScript and http://searchwindevelopment.techtarget.com/definition/Ajax. 23 Oct 2007 XML).

2. Sergio Tarrilla. AJAX, ventajas y desventajas. http://geeks.ms/blogs/sergiotarrillo/archive/2007/01/09/8420.aspx. 9/1/2007

3. Molina Ivan. Introduccin a AJAX. http:/ /www.rediris.es /gt/middleware/ coord/

gt2006 /IntroduccionAJAX_v1.0.pdf. 2006

Sistemas WEB

26