Spring, jQuery y AJAX

By | 11 agosto 2009

Bueno, con esta entrada voy a hacer referencia a dos de los recursos que en futuras entradas serán tratados con mas detenimiento, la librería javascript jQuery y la tecnologia AJAX, con esta entrada lo que pretendo es que veáis el funcionamiento conjunto de AJAX con jQuery XML y Spring. Como algunos no conoceréis la librería jQuery, AJAX, podréis descargaros el código fuente de ejemplo que incluyo al final de la entrada.

Lo primero que tendremos que hacer es descargarnos la librería jQuery, que siempre conviene acompañar de la librería “interface.js”, e importar las dos en nuestro jsp.

<script type="text/javascript" src="./js/jquery.js"></script>
<script type="text/javascript" src="./js/interface.js"></script>

Por supuesto una llamada AJAX al servidor puede ser efectuada por cualquier evento que queramos controlar en nuestra pagina, en este caso y por ser lo mas practico posible, vamos a controlar el envío de un formulario. En este sencillo ejemplo, todo lo que vamos a realizar es una petición al servidor, enviándole un nombre de contacto, y este nos devolverá toda la información de la que dispone sobre el.

La función jQuery AJAX para controlar el envío, la recepción y la manipulación del objeto xml recibido es la siguiente.

$(document).ready(function(){
    $('form').submit(function() {
         $.ajax({type: $(this).attr('method'),
             url: $(this).attr('action'),
             data: $(this).serialize(),
             dataType: 'xml',
             error: function(xhr, ajaxOptions, thrownError) {
                $('div').html('Error AJAX enviando el formulario.');
            },
            success: function(xml) {
                $('div').empty();;
                $(xml).find('contactos').each(function(){
                    $(this).find('contacto').each(function(){
                         $('div').append($(this).find('nombre').text() + ' ');
                         $('div').append($(this).find('apellidos').text() + ' ');
                         $('div').append($(this).find('edad').text() + ' ');
                         $('div').append($(this).find('direccion').text() + ' ');
                         $('div').append($(this).find('notas').text() + '<br/>');
                    });
                    return false;
                 });
            }
        })
        return false;
    });
});

Lo siguiente sera crear el Controller que nos devolverá el xml, con una particularidad, como es una llamada AJAX y no queremos devolver ninguna vista, sino simplemente enviar información estructurada como un archivo xml no devolveremos nada en la función, simplemente el retorno sera null.

Como veis, establecemos el tipo de información que vamos a enviar y su codificación, para seguidamente comenzar a enviar la estructura xml que posteriormente sera analizada en la función javascript de jQuery.

public class BuscaController implements Controller {

    public ModelAndView handleRequest(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        PrintWriter out = response.getWriter();
        String nombreBusqueda = request.getParameter("nombre");
        Agenda miAgenda = new Agenda();

        response.setContentType("text/xml");
        response.setCharacterEncoding("UTF-8");

        out.println("<contactos>");
        for (int pos = 0; pos < miAgenda.getMiAgenda().length; pos++) {
            if (nombreBusqueda.equals(miAgenda.getMiAgenda()[pos].getNombre())) {

                out.println("<contacto>");
                out.println("<nombre>" + miAgenda.getMiAgenda()[pos].getNombre() + "</nombre>");
                out.println("<apellidos>" + miAgenda.getMiAgenda()[pos].getApellidos() + "</apellidos>");
                out.println("<edad>" + miAgenda.getMiAgenda()[pos].getEdad() + "</edad>");
                out.println("<direccion>" + miAgenda.getMiAgenda()[pos].getDireccion() + "</direccion>");
                out.println("<notas>" + miAgenda.getMiAgenda()[pos].getNotas() + "</notas>");
                out.println("</contacto>");

            }
        }
        out.println("</contactos>");

        return null;
    }
}

La clase Agenda hace uso de otra clase llamada Contacto, y no son mas que dos simples clases que forman una simple agenda.

public class Agenda {

    private Contacto[] miAgenda;

    public Agenda(){
        miAgenda = new Contacto[5];
        miAgenda[0] = new Contacto("Pablo", "Perez", 26, "C\\Oliva, 15", "");
        miAgenda[1] = new Contacto("Maria", "Perez", 21, "C\\Oliva, 15", "Hermana de Pablo.");
        miAgenda[2] = new Contacto("Felix", "Montes", 42, "C\\America, 55", "");
        miAgenda[3] = new Contacto("Luis", "Rivas", 17, "C\\San Mateo, 4", "");
        miAgenda[4] = new Contacto("Miguel", "de Benito", 36, "Av. Santander, 116", "Gerente Motores de Benito.");
    }

    public Contacto[] getMiAgenda() {
        return miAgenda;
    }

}
public class Contacto {

    private String nombre;
    private String apellidos;
    private int edad;
    private String direccion;
    private String notas;

    public Contacto(String nombre, String apellidos, int edad, String direccion, String notas){
        this.nombre = nombre;
        this.apellidos = apellidos;
        this.edad = edad;
        this.direccion = direccion;
        this.notas = notas;
    }

    public String getNombre() {
        return nombre;
    }

    public String getApellidos() {
        return apellidos;
    }

    public int getEdad() {
        return edad;
    }

    public String getDireccion() {
        return direccion;
    }

    public String getNotas() {
        return notas;
    }

}

Código fuente:
Spring, jQuery y AJAX | Netbeans 6.7
Contraseña: www.programacionj2ee.com_sja_21

Comparte esta entrada enShare on LinkedIn0Tweet about this on Twitter0Share on Facebook0Share on Google+0

4 thoughts on “Spring, jQuery y AJAX

  1. Julito

    A ver si me puedes ayudar con una duda que tengo que esta relaccionado con este tema, aunq no tiene que ver directamente con el ejemplo de esta entrada.
    He probado con formularios y funciona perfectamente, pero luego he probado con otro tipo de elementos como a y divs, y no funciona, nose si no lo coge el urlMapping, si este necesita que lo pasemos por post o get(y claro con links y divs pues no se pasa). La intencion es hacer por ejemplo un menu. Igual no conviene hacer el menu con Spring y limitarse a utlizar spring para el resto de la aplicacion web o como… a ver si me puedes expresar tu opinion.

  2. admin

    Hola Julito, no entiendo exactamente que es lo que me estas preguntado, ¿puedes especificar un poco mejor?.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *