Antonio de Jess Lpez Lpez

JAVA.
Ajax en JSP

Andor

Pg.

1. Introduccin
AJAX son las siglas de Asynchronous JavaScript And XML. No es un lenguaje de programacin sino un conjunto de tecnologas (HTML-JavaScript-CSS-DHTML-PHP/ASP.NET/JSP-XML) que nos permiten hacer pginas de internet ms interactivas. La caracterstica fundamental de AJAX es permitir actualizar parte de una pgina con informacin que se encuentra en el servidor sin tener que refrescar completamente la pgina. De modo similar podemos enviar informacin al servidor. La complejidad se encuentra en que debemos dominar varias tecnologas: HTML o XHTML CSS JavaScript PHP o algn otro lenguaje que se ejecute en el servidor (ASP.Net/JSP) Ventajas Utiliza tecnologas ya existentes. Soportada por la mayora de los navegadores modernos. Interactividad. El usuario no tiene que esperar hasta que lleguen los datos del servidor. Mayor velocidad, esto debido que no hay que retornar toda la pgina nuevamente. 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 encontrbamos al grabarla. La existencia de pginas con AJAX y otras sin esta tecnologa hace que el usuario se desoriente. No funciona si el usuario tiene desactivado el JavaScript en su navegador.

Andor

Pg.

2. Comparacin de trabajar con Ajax

La siguiente figura ilustra en el lado izquierdo como funcionan normalmente las paginas y en el lado derecho como funcionan utilizando la tecnologa Ajax.

Andor

Pg.

3. Flujo de Trabajo
Index.jsp
Comunicar con datosajax.js Elegir opcion

concodigo? Opcion = 0 Opcion =1

Crear url con la pagina seleccionada

Crear Ajax

Realizar peticin al servidor con Ajax

Andor

Pg.

4. Crear elementos

Crear proyecto con nombre 110217_EjemploAjax

Dentro de la carpeta paginas crear dos archivos: sincodigo.jsp y concodigo.jsp

Crear dos carpetas dentro del proyecto: Ajax y paginas

Dentro de la carpeta Ajax crear un archivo de JavaScript llamado datosajax.js

Andor

Pg.

5. Trabajar en index.jsp(1/2)
Para empezar abriremos la pagina index.jsp 1. Haremos referencia al archivo datosajax.js para poder utilizar sus elementos

2. Crearemos dos hipervinculos y un div para mandar a llamar el contenido de las paginas: 1. <a href=# onclick=cargardatos(0)>sin datos</a> 2. <a href=# onclick=cargardatos(1)>con datos</a> 3. <div id=divcontenido></div>

Andor

Pg.

5. Trabajar en index.jsp (2/2)

Andor

Pg.

6. Trabajar en datosajax.js (1/3)

Para empezar abriremos el archivo datosajax.js y crearemos el objeto de instanciacin de Ajax

Andor

Pg.

6. Trabajar en datosajax.js (2/3)

Posteriormente crearemos la funcin para que al momento que presionemos clic en el link seleccionado se ejecute esta funcin y pueda decidir a que pagina dirigirse para mostrar el resultado en el div seleccionado

Andor

Pg.

10

7. Trabajar en datosajax.js (3/3)

Andor

Pg.

11

8. Trabajar en los repositorios

Para empezar abriremos el archivo sincodigo.jsp y escribiremos algo simple que no tiene ningn cdigo jsp

Posteriormente abriremos el archivo concodigo.jsp y escribiremos algo con una decisin para cambiar el resultado

Andor

Pg.

12

9. Ajax en accin
Sin cdigo:

Con cdigo: