Este artículo es la continuación del ejemplo iniciado con Introducción a Java Servlets con NetBeans. El objetivo es modificar el proyecto realizado, para que los datos que se envían al Servlet se hagan por medio del objeto XMLHttpRequest y que mediante DOM accedamos y modifiquemos algunas partes de nuestro documento actual. En resumen, el objetivo es incorporar AJAX a nuestro proyecto. Por lo tanto, también recomiendo leer una Introducción teórica a AJAX, ya que en este artículo me enfocaré exclusivamente en el código.

Sobre el proyecto inicial de Introducción a Java Servlets con NetBeans, realizaremos las siguientes modificaciones:

  • Del lado del cliente:
    • En el formulario de envío de datos se quitará el botón submit y se agregará un nuevo botón, que en su evento onclick ejecutará una función Javascript.
    • Se agregará una función Javascript, que instanciará el objeto XMLHttpRequest, enviará los datos al servidor y procesará la respuesta del Servlet.
  • Del lado del servidor:
    • Se modificará el código de la respuesta enviada por el Servlet, antes enviaba todo un documento HTML (<HTML><HEAD>.... </HEAD><BODY>...</BODY></HTML>). Ahora solo enviará un fragmento de código HTML, pues el mismo, procesado por el cliente, se insertará en la página HTML existente, pues con el objeto XMLHttpRequest el cliente se evita cargar de nuevo la página (uno de los principales objetivos de AJAX)

Haciendo efectivos los cambios mencionados, el cliente queda así:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Hello World</title>
    </head>

    <script>
    function Enviar() {

        var obj = false;

        if (window.XMLHttpRequest) {
            //Cuidado aqui, el objeto XMLHttpRequest no esta disponible en versiones previas a IE7
            obj = new XMLHttpRequest();
        } else {
            return false;
        }
        obj.onreadystatechange = function () {
            if ( obj.readyState == 4 && (obj.status == 200 || window.location.href.indexOf ("http")==- 1)) {
                document.getElementById("Respuesta_Hello").innerHTML = obj.responseText;
            } else {
                //procesando...
            }   
        };
        obj.open("GET", "Servlet_Hola?nombre=" + document.getElementById("nombre").value , true);
        obj.send(null);

        return (true);
    }
    </script>

    <body>

        <form action="Servlet_Hola" method="GET">
        Ingrese su nombre: <input type="text" name="nombre" value="" size="45" id="nombre" />
        <input type="button" value="Enviar (con Ajax)" onclick="Enviar();" name="enviarAjax">
        </form>

        <div id="Respuesta_Hello">
            <!-- Este DIV contendra la respuesta enviada por el Servlet -->
        </div>

    </body>

</html>

Por el lado del servidor, el método processRequest del Servlet queda así:

protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
    response.setContentType("text/html;charset=UTF-8");
    PrintWriter out = response.getWriter();
    try {
        out.println("<strong>Hola " + request.getParameter("nombre") + "<strong>");
    } finally {
        out.close();
    }
}

Lo ejecutamos, de la misma forma que antes ejecutabamos nuestro proyecto desde NetBeans y probamos tener el comportamiento deseado: