Spring: Usando Ajax con JQuery, POST and GET

Hola a todos, en esta ocasión comentaré como usar Ajax en Spring a través de JQuery, con un ejemplo muy sencillo (mientras mas sencillo sea el ejemplo, mejor su entendimiento).

Bien pues manos a la obra: He usado Netbeans 6.9.1, la librería JQuery 1.4.4, Como servidor de Aplicaciones: Glassfish 2.1.

En el ejemplo se envían cadenas simples y se devuelven cadenas simples, como es nuestro primer ejemplo con ajax, estará bien por ahora, más adelante veremos como serializar formularios a través de JSON y Jackson.

Como aprendimos en la entrada anterior, usaremos un archivo para colocar los beans, de nuestro «modelo» o clases simples.
De esta manera definimos un archivo denominado: beans_modelo.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
">
    <bean id="Pregunta" class="modelo.Pregunta"/>
    <bean id="Saludar" class="modelo.Saludar"/>
</beans>

No olvidar agregar el archivo al web.xml
Es decir quedará como sigue:

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
    <context-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>
            /WEB-INF/applicationContext.xml
            /WEB-INF/beans_modelo.xml
        </param-value>
    </context-param>
    <listener>
        <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
    </listener>
    <servlet>
        <servlet-name>dispatcher</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <load-on-startup>2</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>dispatcher</servlet-name>
        <url-pattern>*.htm</url-pattern>
    </servlet-mapping>
    <session-config>
        <session-timeout>
            30
        </session-timeout>
    </session-config>
    <welcome-file-list>
        <welcome-file>redirect.jsp</welcome-file>
    </welcome-file-list>
</web-app>

Además nuestro dispatcher-servlet.xml quedará asi:

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:p="http://www.springframework.org/schema/p"
       xmlns:aop="http://www.springframework.org/schema/aop"
       xmlns:tx="http://www.springframework.org/schema/tx"
       xmlns:context="http://www.springframework.org/schema/context"
       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
       http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-3.0.xsd
       http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-3.0.xsd
       http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd">

    <bean id="viewResolver"
		class="org.springframework.web.servlet.view.InternalResourceViewResolver"
		p:prefix="/WEB-INF/jsp/" p:suffix=".jsp" />

    <bean class="org.springframework.web.servlet.mvc.annotation.DefaultAnnotationHandlerMapping" />

    <bean class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter" />

    <bean class="controladores.ControladorAjax"
    p:mi_pregunta-ref="Pregunta"
    p:mi_saludar-ref="Saludar" />

    <bean class="controladores.ControladorPregunta" />
</beans>

Con esto hemos creado los Beans que se encargarán de manejar las peticiones de nuestra aplicación.

Pero y ahora ¿como que se determina cuales peticiones son peticiones Ajax?, para ello usaremos nuestros controladores, gracias a la anotación @Controller incluido en Spring 3, podemos crear nuestros propios controladores y personalizarlos rápidamente.
Así tendremos nuestro primer Controlador ControladorPregunta, que es el que se encarga de resolver la vista de index.htm

package controladores;

import modelo.Pregunta;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

/**
 *
 * @author Martin
 */
@Controller
@RequestMapping("/index.htm")
public class ControladorPregunta {
    @RequestMapping(method=RequestMethod.GET)
    public String showUserForm(ModelMap model) {
        Pregunta p = new Pregunta();
        model.addAttribute(p);
        return "index";
    }
}

Y los controladores encargados de Manejar las peticiones ajax. ControladorAjax

package controladores;

import modelo.Pregunta;
import modelo.Saludar;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

/**
 *
 * @author Martin
 */
@Controller
public class ControladorAjax{
    @RequestMapping(value = "/preguntar.htm", method = RequestMethod.GET)
    public @ResponseBody String preguntar(@RequestParam String pregunta){
        this.mi_pregunta.setPregunta(pregunta);
        return this.mi_pregunta.getRespuesta();
    }
    @RequestMapping(value = "/saludar.htm", method = RequestMethod.POST)
    public @ResponseBody String saludar(@RequestParam String saludo){
        mi_saludar.setSaludo(saludo);
        return mi_saludar.getSaludo();
    }

    //Instancias
    private Pregunta mi_pregunta;
    private Saludar mi_saludar;

    //Seters Usados por el Spring Framework
    public void setMi_pregunta(Pregunta mi_pregunta) {
        this.mi_pregunta = mi_pregunta;
    }
    public void setMi_saludar(Saludar mi_saludar) {
        this.mi_saludar = mi_saludar;
    }
}

Bien ahora veremos que tienen nuestras clases modelo:
Clase Saludar.

package modelo;

/**
 *
 * @author Martin
 */
public class Saludar {
    private String saludo;

    public Saludar() {
    }

    public String getSaludo() {
        return saludo;
    }

    public void setSaludo(String saludo) {
        this.saludo = "Hola "+saludo;
    }
}

Clase Pregunta

package modelo;

/**
 *
 * @author Martin
 */
public class Pregunta {
    private String pregunta;
    private String respuesta;

    public String getPregunta() {
        return pregunta;
    }

    public String getRespuesta() {
        return respuesta;
    }

    public void setPregunta(String pregunta) {
        this.pregunta = pregunta;
        this.respuesta = "Tu pregunta fue: ¿ "+pregunta+" ?";
    }

    public void setRespuesta(String respuesta) {
        this.respuesta = respuesta;
    }
}

Ademas he separado las funciones de javascript que se encargan de realizar las peticiones Ajax, en el archivo mi_spring_ajax.js

function preguntar(){
    $.ajax({
        url: "preguntar.htm",
        data: {
            pregunta: $("#txt_pregunta").val()
            },
        success: function(data){
            $("#rpta_servidor").html(data);
        }
    });
}
function saludar(){
    $.ajax({
        type: 'POST',
        url: "saludar.htm",
        data: {
            saludo: $("#txt_pregunta").val()
            },
        success: function(data){
            $("#rpta_servidor").html(data);
        }
    });
}

Y como todo esto es ajax, solo necesitaremos una vista, la cual será la misma: index.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"  %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="<c:url value="/scripts/jquery-1.4.4.js"/>"></script>
        <script type="text/javascript" src="<c:url value="/scripts/mi_spring_ajax.js"/>"></script>
        <title>Probando Ajax</title>
    </head>

    <body>
        <center>
            <div>
                <p>.. ESCRIBA ..</p>
                <p><input id="txt_pregunta" type="text" size="30"></p>
                <p><input id="btn_preguntar" type="button" value="btn_preguntar" onclick="preguntar()">
                <input id="btn_saludar" type="button" value="btn_saludar" onclick="saludar()"></p>
            </div>
            <div id="rpta_servidor"></div>
        </center>
    </body>
</html>

Aquí comentaré los nuevos tags que he usado: , esta es un tag de la librería JSTL declarada en

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"  %>

la cual permite obtener la dirección de la aplicacion dentro del servidor, es decir que nos autocompleta /springMiAjax/

Coloco el archivo WAR: springMiAjax.war

Coloco el codigo Fuente del proyecto: fuente-springMiAjax

Bueno eso es todo, el codigo es entendible, pero cualquier cosa pregunten, espero pronto poder colocar una entrada de Serializacion de Objetos con JSON y Jackson.

Saludos a todos, gracias AFE por la inspiración que me brindas.

5 comentarios sobre “Spring: Usando Ajax con JQuery, POST and GET”

lineli dice:

May 10, 2011 a las 4:06 pm

q pasò con tu inspiraciòn???

Responder
1. Cmop dice:
  
  junio 1, 2011 a las 5:25 pm
  
  Mi inspiración, bien sabes que eres tu mi AFE preciosa, besos mi amor.
  
  Responder
Aldo dice:

septiembre 2, 2011 a las 4:46 am

Muchas gracias me sirvió de mucho!!!

Responder
Omar dice:

septiembre 26, 2011 a las 7:38 pm

El ejemplo está muy claro, sencillo y fácil de entender, pero… Qué pasó con el servicio? (@Service) 😉

Responder
Cristian dice:

noviembre 21, 2011 a las 2:34 pm

Hola , muy bueno tu tutorial , tengo que hacer algo parecido , pero con spring porlets mvc , si tienes un ejemplo , te lo agradeceria .

Responder