ajax tutorial0

Tutorial AJAX 1 : entorno de desarrollo y 'Hello Ajax Demo!'

Sistemas de la información

Versión 1.0

Tutorial AJAX 1: entorno de desarrollo y 'Hello Ajax

Demo!'

Autor: Diego Arnáiz García

[email protected]

http://www.arnaid.com

(arnai+d)

Fecha: 24/10/2006

Pág.1 de 28

mailto:[email protected]

http://www.arnaid.com/



Versión 1.0

CONTROL DE VERSIONES

Versión Fecha Autor Cambios

1.0 24/10/2006 Diego Arnáiz García

creación

Pág.2 de 28



Versión 1.0

ÍNDICE1Introducción......................................................................................... 4

1.1Herramientas y aplicaciones necesarias.............................................. 42Instalación del entorno de desarrollo........................................................4

2.1PASO 1: instalar el JDK 5.0...............................................................42.2PASO 2: instalar Firefox....................................................................42.3PASO 3: instalar Tomcat...................................................................52.4PASO 4: instalar IDE........................................................................5

2.4.1Instalación de NetBeans............................................................. 52.4.2Instalación de Eclipse.................................................................6

2.5PASO 5: instalar FireBug.................................................................103Hello Ajax Demo!.................................................................................12

3.1creación de un proyecto AJAX desde '0'............................................ 123.1.1Hello World Demo! con NetBeans...............................................123.1.2Hello World Ajax! con Eclipse.....................................................19

3.2Ciclo de vida y depuración de Hello Ajax Demo!................................. 25

Pág.3 de 28



Versión 1.0

1 Introducción.“Tutorial AJAX 1: entorno de desarrollo” pertenece a la primera serie de tutoriales sobre AJAX presentados en http://www.arnaid.com.

Este primer tutorial tiene como objetivo instalar desde '0' un entorno de desarrollo para poder implementar aplicaciones AJAX. Se mostrarán dos IDE's (Eclipse, NetBeans) siendo decisión del lector cual utilizar. Como explorador para la ejecución de nuestras aplicaciones se utilizará 'Firefox'. 'Firefox' aporta muy buenas herramientas para la depuración del código JavaScript y de exploración del DOM de la página.

Como punto final de mostrará el funcionamiento del entorno de desarrollo instalado mediante un sencillo ejemplo (Hello Ajax Demo!)

1.1 Herramientas y aplicaciones necesariasPara el entorno de desarrollo se van a instalar las siguientes aplicaciones y herramientas:

– Java Standard Development Kit (JDK™) version 5.0.

– Explorador Firefox.

– NetBeans IDE 5.5 o Eclipse 3.2.

– FireBug Plugin para Firefox.

– Servidor de aplicaciones Tomcat 5.5

2 Instalación del entorno de desarrollo.A continuación se van a mostrar cada uno de los pasos para instalar cada componente de nuestro entorno de desarrollo AJAX.

2.1 PASO 1: instalar el JDK 5.0.Descargar e instalar la última versión del JDK 5.0, en este momento “update 9” (http://java.sun.com/javase/downloads/index.jsp).

2.2 PASO 2: instalar Firefox.Descargar e instalar la última versión de explorador 'Firefox' (http://www.mozillafirefoxinstall.com).

Pág.4 de 28

http://www.mozillafirefoxinstall.com/

http://java.sun.com/javase/downloads/index.jsp




Versión 1.0

2.3 PASO 3: instalar TomcatInstalar Tomcat es sencillo, basta con descargarlo de la página en su última versión (http://tomcat.apache.org/), en este momento la 5.5. Una vez tengamos el .zip en nuestro PC, lo descomprimimos por ejemplo en 'C/Tomcat' y ya lo tenemos.

2.4 PASO 4: instalar IDE.Actualmente para el desarrollo de aplicaciones Java los dos IDE's más potentes son Elicpse y NetBeans. No es objetivo de este tutorial la elección del IDE, así que será decisión del alumno elegir cual instalar.

2.4.1 Instalación de NetBeansDescargar e instalar la última versión de NetBeans, actualmente la 5.5 RC2. (http://www.netbeans.org/downloads/index.html).

Una vez instalado ejecuturamos NetBeans, entraremos en el panel de Propiedades (Tools->Options) y eligiéremos como explorador 'Firefox'

Pág.5 de 28

http://www.netbeans.org/downloads/index.html

http://tomcat.apache.org/



Versión 1.0

2.4.2 Instalación de EclipseDescargar la última versión de Eclipse, actualmente la Eclipse SDK 3.2.1. (http://www.eclipse.org/downloads/).

Instalamos mediante 'Calisto' los plugins necesarios para el desarrollo de aplicaciones web con Eclipse. Para ellos arrancamos Eclipse, vamos a actualizaciones (Help->Software Update->Find & Install) y seleccionamos 'Web Tools Plataform'.

Pág.6 de 28

http://www.eclipse.org/downloads/



Versión 1.0

Seleccionamos 'Search for new features to install' y pulsamos 'next'

Pág.7 de 28



Versión 1.0

Seleccionamos todas las fuentes de actualización y pulsamos ' Finish'.

Seleccionamos un mirror y pulsamos 'OK'

Pág.8 de 28



Versión 1.0

Seleccionamos 'web and j2ee development', vemos que da un error en la parte superior, es porque nos faltan otros paquetes para poder instalarlo. Se arregla pulsando 'Select Required'.

Pág.9 de 28



Versión 1.0

Ahora si pulsamos 'Next'. Nos aparecerán distintas pantalla de 'licencias' y confirmaciones. Pulsamos 'Next' hasta finalizar la instalación.

¡Y ya tenemos nuestro Eclipse instalado para desarrollar todo tipo de aplicaciones web, AJAX incluido!

2.5 PASO 5: instalar FireBugDescargar el depurador de JavaScript Firebug (https://addons.mozilla.org/firefox/1843):

Pág.10 de 28

https://addons.mozilla.org/firefox/1843



Versión 1.0

tras la instalación debería aparecer la siguiente entrada en la barra de herramientas:

Pág.11 de 28



Versión 1.0

3 Hello Ajax Demo!A continuación vamos a probar nuestro entorno de desarrollo creando un proyecto AJAX desde '0' con la IDE correspondiente (Eclipse, NetBeans), ejecutándolo en el explorador web firefox y depurando con FireBug.

3.1 creación de un proyecto AJAX desde '0'A continuación mostramos como crear un proyecto desde '0' con los dos IDE's disponibles para nuestro desarrollo. Al igual que antes es decisión del alumno cual elegir.

3.1.1 Hello World Demo! con NetBeansArrancamos NetBeans.

Creamos un proyecto nuevo (File->New Project...). Seleccionamos un

Pág.12 de 28



Versión 1.0

proyecto de tipo 'web->web application'.

Asignamos un nombre a nuestro proyecto, elegimos el servidor donde desplegar la aplicación y pulsamos 'Next' hasta finalizar el proceso. De esta manera habremos creado nuestro proyecto web vació

Pág.13 de 28



Versión 1.0

Sustituimos el archivo 'index.jsp' por el siguiente.

<html><head> <script type="text/javascript" src="ajax.js"></script> <title>Hello AJAX Demo!!</title> </head>

<body> <h1>Hello Ajax Demo!!</h1> <hr/> <p> Con este ejemplo observamos como mediante el uso de AJAX podemos realizar

peticionesal servidor que cambian la apariencia de la pagina mostrada sin necesidad de refrescarla en su totalidad.

</p> <p> Operativa: cada vez que se modifique el campo de texto se realizará una petición

asincrona al servidor para que nos devuelva el numero de caracteres

Pág.14 de 28



Versión 1.0

contenido en dicho campo. De este modo se actualizará el campo 'contador' sin necesidad de refrescar la página y sin que quedebloqueada la operativa funcional de la página.

</p> <table border="0" cellpadding="5" cellspacing="0"> <tr> <td><b>Introduzca una cadena de texto: </b></td> <td><input type="text" size="20" id="textoid" name="id" onkeyup="contar()"> </td> <td> <div id="contadorid"></div> </td> </tr> </table> <hr/> <p> Demo by arnai+d (<a href="http://www.arnaid.com"> http://www.arnaid.com

</a> ) </p></body></html>

Creamos debajo de la carpeta 'web pages' el fichero 'ajax.js' siguiente.

var req;

//llama al servlet ContarCaracteresfunction contar(){ var cadena = document.getElementById("textoid"); var url = "ContarCaracteres?id=" + escape(cadena.value); iniciarPeticion(); req.onreadystatechange = callback; req.open("POST", url, true); req.send(null);}

//crear el objeto XMLHttpRequestfunction iniciarPeticion() { if (window.XMLHttpRequest) { req = new XMLHttpRequest(); } else if (window.ActiveXObject) { req = new ActiveXObject("Microsoft.XMLHTTP"); }}

//funcion que obtiene la respuesta del servlet ContarCaracteres (asincronamente)function callback() {

if (req.readyState == 4) {

Pág.15 de 28





Versión 1.0

if (req.status == 200) {var numCaracteres =

req.responseXML.getElementsByTagName("numeroCaracteres")[0].childNodes[0].nodeValue; var divContador = document.getElementById("contadorid"); divContador.innerHTML = "<div style=\"color:red\">"+numCaracteres+" caracteres</div>";

} }}

Creamos debajo de la carpeta 'source packages' la clase (servlet) que se llame 'ContarCaracteres.java' con el siguiente contenido.

/* * ContarCaracteres.java */

package com.arnaid.ajax.helloajax;

import java.io.*;import java.net.*;

import javax.servlet.*;import javax.servlet.http.*;

/** * @author Diego Arnaiz * @version 1.0 */public class ContarCaracteres extends HttpServlet { protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String cadena = request.getParameter("id"); int num = cadena.length(); response.setContentType("text/xml"); response.setHeader("Cache-Control", "no-cache"); response.getWriter().write("<numeroCaracteres>"+num+"</numeroCaracter es>"); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processRequest(request, response); }

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processRequest(request, response);

Pág.16 de 28



Versión 1.0

} public String getServletInfo() { return "ContarCarateres"; }}

Configuramos el fichero 'web.xml' de la carpeta 'configuration files' del siguiente modo:

<?xml version="1.0" encoding="UTF-8"?><web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"> <servlet> <servlet-name>ContarCaracteres</servlet-name> <servlet-class>com.arnaid.ajax.helloajax.ContarCaracteres</servlet-class> </servlet> <servlet-mapping> <servlet-name>ContarCaracteres</servlet-name> <url-pattern>/ContarCaracteres</url-pattern> </servlet-mapping> <session-config> <session-timeout> 30 </session-timeout> </session-config> <welcome-file-list>

<welcome-file> index.jsp </welcome-file> </welcome-file-list></web-app>

A continuación y podríamos ejecutar la aplicación. Nos situamos sobre el proyecto en el explorador de NetBeans, pulsamos botón derecho y 'Run Project'. Aparecerá en el explorador la siguiente pantalla:

Pág.17 de 28



Versión 1.0

Al completar el campo texto veremos que se actualiza el contador automáticamente sin que la página se refresque en su totalidad, no perdiendo así la funcionalidad en ningún momento.

Pág.18 de 28



Versión 1.0

3.1.2 Hello World Ajax! con EclipseArrancamos Eclipse.

Creamos un proyecto nuevo (File->New->Project). Seleccionamos un proyecto de tipo 'web->dinamic web project'.

Asignamos un nombre a nuestro proyecto, elegimos el servidor TOMCAT donde desplegar la aplicación (tendremos que decirle donde hemos instalado Tomcat en nuestro PC) y pulsamos 'Next' hasta finalizar el proceso. De esta manera habremos creado nuestro proyecto web vacío.

Pág.19 de 28



Versión 1.0

Creamos el fichero 'index.jsp' bajo la carpeta 'WebContent'.

<html><head> <script type="text/javascript" src="ajax.js"></script> <title>Hello AJAX Demo!!</title> </head>

<body> <h1>Hello Ajax Demo!!</h1> <hr/> <p> Con este ejemplo observamos como mediante el uso de AJAX podemos realizar

peticionesal servidor que cambian la apariencia de la pagina mostrada sin necesidad de refrescarla en su totalidad.

</p> <p> Operativa: cada vez que se modifique el campo de texto se realizará una petición

asincrona al servidor para que nos devuelva el numero de caracteres

Pág.20 de 28



Versión 1.0

contenido en dicho campo. De este modo se actualizará el campo 'contador' sin necesidad de refrescar la página y sin que quedebloqueada la operativa funcional de la página.

</p> <table border="0" cellpadding="5" cellspacing="0"> <tr> <td><b>Introduzca una cadena de texto: </b></td> <td><input type="text" size="20" id="textoid" name="id" onkeyup="contar()"> </td> <td> <div id="contadorid"></div> </td> </tr> </table> <hr/> <p> Demo by arnai+d (<a href="http://www.arnaid.com"> http://www.arnaid.com

</a> ) </p></body></html>

Creamos el fichero 'ajax.js' bajo la carpeta 'WebContent'.

var req;

//llama al servlet ContarCaracteresfunction contar(){ var cadena = document.getElementById("textoid"); var url = "ContarCaracteres?id=" + escape(cadena.value); iniciarPeticion(); req.onreadystatechange = callback; req.open("POST", url, true); req.send(null);}

//crear el objeto XMLHttpRequestfunction iniciarPeticion() { if (window.XMLHttpRequest) { req = new XMLHttpRequest(); } else if (window.ActiveXObject) { req = new ActiveXObject("Microsoft.XMLHTTP"); }}

//funcion que obtiene la respuesta del servlet ContarCaracteres (asincronamente)function callback() {

if (req.readyState == 4) {

Pág.21 de 28





Versión 1.0

if (req.status == 200) {var numCaracteres =

req.responseXML.getElementsByTagName("numeroCaracteres")[0].childNodes[0].nodeValue; var divContador = document.getElementById("contadorid"); divContador.innerHTML = "<div style=\"color:red\">"+numCaracteres+" caracteres</div>";

} }}

Creamos debajo de la carpeta 'Java resources' la clase (servlet) que se llame 'ContarCaracteres.java' con el siguiente contenido.

/* * ContarCaracteres.java */

package com.arnaid.ajax.helloajax;

import java.io.*;import java.net.*;

import javax.servlet.*;import javax.servlet.http.*;

/** * @author Diego Arnaiz * @version 1.0 */public class ContarCaracteres extends HttpServlet { protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String cadena = request.getParameter("id"); int num = cadena.length(); response.setContentType("text/xml"); response.setHeader("Cache-Control", "no-cache"); response.getWriter().write("<numeroCaracteres>"+num+"</numeroCaracter es>"); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processRequest(request, response); }

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processRequest(request, response);

Pág.22 de 28



Versión 1.0

} public String getServletInfo() { return "ContarCarateres"; }}

Configuramos el fichero 'web.xml' de la carpeta 'WebContent/WEB-INF' del siguiente modo:

<?xml version="1.0" encoding="UTF-8"?><web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"> <servlet> <servlet-name>ContarCaracteres</servlet-name> <servlet-class>com.arnaid.ajax.helloajax.ContarCaracteres</servlet-class> </servlet> <servlet-mapping> <servlet-name>ContarCaracteres</servlet-name> <url-pattern>/ContarCaracteres</url-pattern> </servlet-mapping> <session-config> <session-timeout> 30 </session-timeout> </session-config> <welcome-file-list>

<welcome-file> index.jsp </welcome-file> </welcome-file-list></web-app>

A continuación y podríamos ejecutar la aplicación. Nos situamos sobre el proyecto en el explorador de Eclipse, pulsamos botón derecho y 'Run AS->Run on Server', y seleccionamos nuestro servidor Tomcat. Aparecerá en el explorador la siguiente pantalla:

Pág.23 de 28



Versión 1.0

Al completar el campo texto veremos que se actualiza el contador automáticamente sin que la página se refresque en su totalidad, no perdiendo así la funcionalidad en ningún momento.

Pág.24 de 28



Versión 1.0

3.2 Ciclo de vida y depuración de Hello Ajax Demo!A continuación se muestran los pasos por los que pasaría la ejecución de nuestro código:

FICHERO FUNCION DESCRIPCIÓNindex.jsp OnKeyUp() El usuario introduce texto en el campo y se

llama OnKeyUp="contar()"

Ajax.js contar() Se crea un objeto XMLHttpRequest llamando a la función iniciarPeticion()

Ajax.js contar() Registra la función que recibirá la respuesta del servlet, callback()

Ajax.js contar() Realiza la petición asíncrona al servlet ContarCaracteres() enviándole la cadena que escribió el usuario en el campo

ContarCaracteres.java Post() Llama a ProcessRequest()

ContarCaracteres.java ProcessRequest() Recupera la cadena, cuenta los caracteres y devuelve un XML con el numero decaracteres.

Ajax.js callback() La respuesta del servlet genera una llamada a la función callback() que registramos anteriormente

Ajax.js callback() Recoge el XML que envía el servlet y recupera de el, el numero de caracteres.

Ajax.js callback() Obtiene el objeto 'contadorid' de index.jsp y le asigna una cadena de texto con el numero de caracteres obtenido del XML

index.jsp Refresca únicamente el objeto 'contadorid' sin necesidad de recargar toda la página.

Para depurar y localizar posibles errores en el código JavaScript (ajax.js) utilizaremos el plugin 'FireBug' que instalamos para 'Firefox'.

Arrancamos Hello Ajax Demo!, si se instalo correctamente el 'FireBug' podremos ver como aparece un icono en la parte inferior derecha del explorador:

Pág.25 de 28



Versión 1.0

Pulsamos sobre el icono y nos mostrará una pantalla con tres pestañas (console, debugger, inspector), nos situamos sobre la pestaña 'debugger' que muestra el código de nuestro fichero 'ajax.js'

Pág.26 de 28



Versión 1.0

Clickeando sobre una de las líneas se colocará un 'breakpoint' que se indicará con un punto rojo. Y si ahora introducimos un carácter en el campo de la página podemos observar como se para en nuestro punto.

Pág.27 de 28



Versión 1.0

Ahora con los botones inferiores podremos pausar la depuración, ejecutar paso a paso, meternos dentro de una función, etc....

Y esto es todo, recuerda que podrá encontrar más tutoriales sobre AJAX en el área AJAX de http://www.arnaid.com

Pág.28 de 28


ajax tutorial0

Documents