ARCmop Java Programacion Solaris Linux

Java-linux-programacion

Spring: Usando Ajax con JQuery, POST and GET

Posted by Cmop en diciembre 17, 2010

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.

  1. 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>
    
    
  2. 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>
    
  3. 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.

  4. 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;
        }
    }
    
  5. 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;
        }
    }
    
  6. 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);
            }
        });
    }
    
    
  7. 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 to “Spring: Usando Ajax con JQuery, POST and GET”

  1. lineli said

    q pasò con tu inspiraciòn???

  2. Aldo said

    Muchas gracias me sirvió de mucho!!!

  3. Omar said

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

  4. Cristian said

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

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

 
A %d blogueros les gusta esto: