Hello World Ajax! con Eclipse

Tamaño: px

Comenzar la demostración a partir de la página:

Download "Hello World Ajax! con Eclipse"

María Pinto Godoy
hace 6 años
Vistas:

Hello World Ajax! con Eclipse Arrancamos Eclipse. Creamos un proyecto nuevo (File->New->Project). Seleccionamos un proyecto de tipo 'web->dinamic web project'.

1 Hello World Ajax! con Eclipse Arrancamos 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.

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!

2 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 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">

3 <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=" </a> ) </p> </body> </html> Creamos el fichero 'ajax.js' bajo la carpeta 'WebContent'. var req; //llama al servlet ContarCaracteres function 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 XMLHttpRequest function 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) { if (req.status == 200) { var numcaracteres =

4 req.responsexml.getelementsbytagname("numerocaracteres")[0].childnodes[0]. n odevalue; 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.*; /** 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+"</numerocar acter 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 Tutorial AJAX 1 : entorno de desarrollo y 'Hello Ajax Demo!' Sistemas de la información Versión 1.0 public String getservletinfo() {

5 return "ContarCarateres"; Configuramos el fichero 'web.xml' de la carpeta 'WebContent/WEB-INF' delsiguiente modo: <?xml version="1.0" encoding="utf-8"?> <web-app version="2.4" xmlns=" xmlns:xsi=" xsi:schemalocation=" <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:

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

Documentos relacionados

Curso de Ajax con Java. Manual del alumno

Curso de Ajax con Java. Manual del alumno Curso de Ajax con Java Manual del alumno Ing. Cedric Simon Tel: 2268 0974 Cel: 8888 2387 Email: c e d r i c @ s o l u c i o n j a v a. c o m Web: www.solucionjava.com SolucionJava.com Copyright Cédric