Home › Blogs › drac94's blog

Ajax Basico

Wed, 05/27/2009 - 17:26 — drac94
En esta ocasion les traigo un ejemplo basico del uso de AJAX (Asynchronous Javascript And XML) en nuestras aplicaciones Web, esto a raiz de que un compañero de trabajo me pidio que le explicara y pense que seria un buen aporte a la comunidad y es que aunque existan muchos frameworks para implementar esta tecnologia nunca esta de mas saber de donde sale todo, espero que les guste pero sobre todo que les ayude.

No voy a explicar lo que es AJAX, ni como funciona, para eso les deje el link de arriba, aqui solo voy a explicar como implementarlo en Java. Bueno comencemos

Vamos a ver el caso en donde tengo una pagina (AjaxPage.jsp) que llama a un servlet (consultaResultado.java) mandandole parametros por el metodo POST y el sevlet me devuelve un resultado que mostrare en la pagina

La pagina: AjaxPage.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<

html>
<head>
</head>
<body>

<

script>
var ajax;

function 

funcionCallback()
{
    // Comprobamos si la peticion se ha completado (estado 4)
    if( ajax.readyState == 4 )
    {
        // Comprobamos si la respuesta ha sido correcta (resultado HTTP 200)
        if( ajax.status == 200 )
        {
            // Escribimos el resultado en la pagina HTML mediante DHTML
            document.all.salida.innerHTML = "<b>"+ajax.responseText+"</b>";
        }
    }
}

function 

recuperaResultado()
{
    // Creamos el control XMLHttpRequest segun el navegador en el que estemos
    if( window.XMLHttpRequest )
        ajax = new XMLHttpRequest(); // No Internet Explorer
    else
        ajax = new ActiveXObject("Microsoft.XMLHTTP"); // Internet Explorer

    // Almacenamos en el control al funcion que se invocara cuando la peticion
    // cambie de estado
    

ajax.onreadystatechange = funcionCallback;
   

    

// Enviamos la peticion
    // Indicamos el tipo, el recurso (el servlet en este caso) y si la llamada es asincrona
    ajax.open( "POST", "consultaResultado", true ); 
    ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

    

// mandamos parametros
    ajax.send( "persona=Hola" );
}
</script>

<br/>
<br/>

<input type="text" id="entrada"/>
<input type="button" value="Consultar" onclick="recuperaResultado()"/>
<br/>
<br/>
Lugar de residencia: <span id="salida"></span>

<br/>
<br/>

</body>
</html> 

El servlet: consultaResultado.java

package negocio.servlets;

import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class 

consultaResultado extends HttpServlet {
    protected void processRequest(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        try {
            String persona = request.getParameter("persona");

            

// Devolver el lugar de residencia de la persona
            if (persona.equalsIgnoreCase("Jesus Hernandez")) {
                out.print("GUADALAJARA");
            } else if (persona.equalsIgnoreCase("Fulano de tal")) {
                out.print("PINTO");
            } else if (persona.equalsIgnoreCase("Fulano de cual")) {
                out.print("VALDEMORO");
            } else {
                out.print("PERSONA DESCONOCIDA");
            }
        } finally {
            out.close();
        }
    }

    @

Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        processRequest(request, response);
    }

    @

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

    @

Override
    public String getServletInfo() {
        return "Short description";
    }
} 

Y ya por ultimo agregamos las siguinetes lineas al web.xml para definir el servlet

 <servlet>
        <servlet-name>consultaResultado</servlet-name>
        <servlet-class>negocio.servlets.consultaResultado</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>consultaResultado</servlet-name>
        <url-pattern>/consultaResultado</url-pattern>
    </servlet-mapping> 

Saludos