Ajax, JSP/Servlets

Introducción a Ajax

AJAX, es un acrónimo de Asynchronous JavaScript And XML (JavaScript asíncrono y XML), es una técnica de desarrollo web para crear aplicaciones interactivas o RIA (Rich Internet Applications). Estas aplicaciones se ejecutan en el cliente, es decir, en el navegador de los usuarios mientras se mantiene la comunicación asíncrona con el servidor en segundo plano. De esta forma es posible realizar cambios sobre las páginas sin necesidad de recargarlas, lo que significa aumentar la interactividad, velocidad y usabilidad en las aplicaciones.

Esto quiere decir entonces que mientras alguna petición es enviada al servidor, nosotros podemos seguir trabajando. Por ejemplo, si tenemos un formulario con un combo que contiene los países de todo el mundo y seleccionamos “México”, nosotros podemos continuar llenando los demás campos mientras el combo de estados se actualiza con respecto al país que seleccionamos (de ahí lo de “asíncrono”) .

Vamos a realizar un ejemplo introductorio con la tecnología Java, en específico con Servlets (este ejemplo se puede seguir con cualquier lenguaje como PHP, ASP, etc).

(Clic aquí si deseas leer antes un ejemplo sencillo de Servlets:

https://mundobyte.wordpress.com/2008/03/26/introduccion-a-los-servlets/)

El ejemplo consiste en lo siguiente: Tendremos una página con un simple botón, el cual ejecutara a nuestro Servlet al dar clic sobre el. Dicho Servlet, se encargará de leer un saludo desde un fichero de texto ubicado en nuestro disco duro y retornará dicho saludo al cliente (navegador) sin necesidad de recargar la página!

HERRAMIENTAS:

  • NetBeans 6.5

  • GlassFish V3 (prelude)

DESARROLLO

Primeramente, crearemos un nuevo proyecto web en NetBeans.NOusaremos ningún framework.

Una vez creado el proyecto,vamos a crear un archivo de JavaScript llamado“XHR”(XMLHttpRequest) el cual se encargará de crear al objeto correspondiente para hacer las peticiones asíncronas al servidor, y se creara en función del Navegador en el que nos encontremos! (Esto es así por que hay un navegador patito que siempre rompe con los estándares). Además, este archivo JavaScript también se encargará de recibir la respuesta del cliente y pintarlo en el navegador. En NetBeans, para crear el archivo JavaScript basta con dar clic derecho sobre la carpeta“Web Pages” New– File JavaScript.En dado caso de no ver dicha opción, debemos ir a la opción other y buscar el mencionado archivo.

Ahora, procedemos a copiar el siguiente código!

NO pierda de vista a la línea 44, dichos parámetros serán enviados al servidor y recuperados por el servlet.

La línea 57 permite obtener al div con el id=”contenido” y la línea 58 escribe en dicho div, la respuesta que envió el servidor

ALGUNOS MÉTODOS UTILIZADOS

open

Este método se encarga de configurar la conexión y dejarla lista para enviarla al servidor. Sus parámetros son los siguientes:

Método Se refiere a la forma en la que será enviada la petición, es decir, GET o POST
URL Se refiere a la URL que deseamos invocar en el servidor, en nuestro caso, deseamos invocar al Servlet.
Tipo True o false. Por default es true y se refiere a que la petición será asíncrona, un false la convierte en síncrona.
Usuario Es opcional y define el nombre de usuario con el que se debe identificar la petición en el server.
Contrasena La contraseña de usuario.

send

Este es el encargado de enviar una petición al navegador y su único parámetro es una cadena que contiene los datos que deseamos enviar al servidor. Si es más de un parámetro, ya sabemos que van separados por el símbolo de & (p.e. n=uno&n=dos). Como recomendación, hacerlo con el código UNICODE.

Los demás métodos, pueden ser vistos en la siguiente dirección del W3 http://www.w3.org/TR/XMLHttpRequest/ y para los no muy bilingües:

http://www.tufuncion.com/tutorial_basico_ajax

Ahora que ya tenemos nuestro archivo JavaScript, procedemos a crear una página HTML y dentro de la etiqueta HEAD indicaremos la carga de nuestro script ya creado:

<script type=”text/javascript” src=”XHR.js” />

Ahora bien, ya dentro de nuestra etiqueta body, debemos tener un botón que invoque al método JavaScript“enviaPeticion”y que a su vez invocará al Servlet que se encargará de leer el fichero de texto y enviar la respuesta al cliente para que éste la muestre… ¿A donde la mostraría?… en un div. Por lo tanto, dentro del body, debemos tener algo como esto:

button onclick=”enviaPeticion()”>CLICK</button>

<div id=”contenido”> </div>

CREANDO EL SERVLET

El siguiente paso ahora, es crear el Servlet. Para ello, en NetBeans damos click derecho sobre la carpeta de Source Package y seleccionamos la opción de Servlet. Como nombre le ponemos “LeerArchivo”.

Solo resta que dentro del métodoprocessRequestescribamos el siguiente código

Como se observa, obtenemos los parámetros ruta y nombre que enviamos desde el cliente. Posteriormente lo único que hacemos es leer el archivo de texto (ojo! Este archivo ya debe existir en nuestro disco duro con alguna palabra).

Por último escribimos la respuesta para que al ejecutar el ejemplo, obtengamos el siguiente resultado:

Como se puede observar al ejecutar nuestro ejemplo, todo se hace sin recargar la página. Para los principiantes y a modo de que comprendan mejor esto, pueden darle la URL para que puedan accesar a su ejemplo. Si tienen una IP de: 200.134.32.156 entonces deberían pasarle algo como:

http://200.134.32.156:8080/ejemplo/reemplazoDIV.xhtml/

De esta forma, podrán ir cambiando el contenido de su archivo de texto y a su amigo le aparecerá una frase distinta cada vez que pulse sobre el botón.

Puedes ver este ejemplo funcionando aqui: http://windoctor.s155.eatj.com/primero/

Saludos!!

Si este contenido fue de provecho para ti, no olvides dejar algún comentario. Recuerda que el conocimiento es libre, lo único que se pide es el agradecimiento de quien aprovecho el material y las críticas de quien tiene sugerencias de mejora. Lo anterior, alienta a seguir publicando más artículos con los cuales puedas beneficiarte.

4 comentarios en “Introducción a Ajax

  1. Me gusto el contenido, estoy empezando a estudiar ajax combinandolo con servlets, y esta informacion me ha servido , ahora tengo una duda … y si lo que deseo al hacer click; es cargar en el div “contenido” una tabla que muestre el resultado de una consulta a un BD .. como tendria que implementar el servlet ?? … me tendria que devolver una pagina jsp con dicho resultado cierto ?? … y como lo capturo ?? … con innerhtml no me funciono .. =( … si tienes algun proyecto de ejemplo con mysql que me puedas enviar a mi correo te lo agradecere mucho

  2. Muy buena la explicación. Bien a lo basico. Me gusto. Sólo una pequeña sugerencia de lo que parece ser un error: en la parte donde dice:

    “send

    Este es el encargado de enviar una petición al **navegador** y su único parámetro…”

    ¿No debería decir servidor? sólo eso.
    Muchas gracias y saludos!

  3. Hola. Yo lo he conseguido, pero con cambios en el código:
    En el fichero XHR.js:
    peticion.open(“POST”, location.href + “LeerArchivo”, true);

    Y el servlet:
    ServletContext sc = request.getSession().getServletContext();
    String ruta = request.getParameter(“ruta”);
    String nombre = request.getParameter(“nombre”);

    response.setContentType(“text/html;charset=UTF-8”);
    PrintWriter out = response.getWriter();
    try {
    BufferedReader in = new BufferedReader(new FileReader(sc.getRealPath(ruta)));
    out.println(“AUTOR: ” + nombre);
    out.println(“MENSAJE: ” + in.readLine());
    } catch (FileNotFoundException e){
    out.println(“No se puedo abrir el archivo de datos ” + ruta);
    out.println(“Texto de la excepción: “);
    out.println(“

    " + e.getLocalizedMessage() + "

    “);
    }
    finally {
    out.close();
    }

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s