Como usar AJAX e jQuery no Spring Web MVC

Nesse artigo, criaremos uma aplicação web simples que mostrará um número aleatório com a hora atual. que será atualizado a cada 3 segundos.

Vamos começar:

Passo 1: Vamos criar um projeto que servirá de base para nossas alterações (acréscimo das chamadas AJAX). O texto desse passo tem como base o artigo: http://crunchify.com/hello-world-example-spring-mvc-3-2-1/.
Você possui alguma das questões a seguir?

  • Desenvolvendo uma aplicação Spring Framework MVC passo a passo.
  • Tutorial de Spring MVC do zero.
  • Tutorial rápido do Spring MVC.
  • Tutorial do Spring MVC Framework.
  • First Spring MVC application tutorial

Então está no lugar certo. A seguir demonstramos como usar o framework Spring MVC3 para criar aplicações web:
Nesse artigo, detalharemos da forma mais simples como começar a desenvolver aplicações com o Spring MVC3. Mas primeiro, precisaremos das ferramentas abaixo:

  1. Tomcat 7.0.37 (Baixe nesse link)
  2. Eclipse IDE for Java EE Developers 4.2.1 (Baixe nesse link)
  3. Spring 3.2.1  (Baixe nesse link)
  4. JDK 1.7 (Baixe nesse link)

Os JARs do Spring MVC que iremos precisar para esse projeto são os seguintes:

  • spring-aspects-3.2.1.RELEASE.jar
  • spring-beans-3.2.1.RELEASE.jar
  • spring-context-3.2.1.RELEASE.jar
  • spring-core-3.2.1.RELEASE.jar
  • spring-expression-3.2.1.RELEASE.jar
  • spring-web-3.2.1.RELEASE.jar
  • spring-webmvc-3.2.1.RELEASE.jar

O objetivo principal desse artigo é criar uma aplicação simples usando o Spring MVC em sua última versão (3.2.1). Abaixo segue como a aplicação deve parecer após todos os passos:
Spring-MVC-Hello-World-index.jsp-Result
 
Spring-MVC-Hello-World-welcome.jsp-View-Result
 

Vamos começar

1) Abra o Eclipse
2) Crie um Dynamic Web Project
Crunchify-Spring-MVC-Hello-World-Example
3) Defina Target Runtime como Apache Tomcat
4) Adicione os JARs mencionados acima no diretório /WEB-INF/lib
Add-Jar-files-to-Web-Projects-Lib-Folder
5) Adicione os arquivos JARs nas dependências do projeto
Eclipse-Add-Jars-to-Project-Crunchify-Tutorial
6) Crie um arquivo de configuração para o Spring em /WEB-INF/crunchify-servlet.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"
    xmlns:p="http://www.springframework.org/schema/p"
    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/context
http://www.springframework.org/schema/context/spring-context-3.0.xsd">
    <context:component-scan
        base-package="com.crunchify.controller" />
    <bean id="viewResolver"
        class="org.springframework.web.servlet.view.UrlBasedViewResolver">
        <property name="viewClass"
            value="org.springframework.web.servlet.view.JstlView" />
        <property name="prefix" value="/WEB-INF/jsp/" />
        <property name="suffix" value=".jsp" />
    </bean>
</beans>

No arquivo de configuração acima, definimos a tag <context:component-scan> . Isso permitirá que o Spring carregue todos os componentes do pacote com.crunchify.controller  e todos os seus pacotes filhos. Isso carregará nossa classe CrunchifyHelloWorld. Também definimos um bean viewResolver. Esse bean determinará o view e adiciona o prefixo /WEB-INF/jsp/  e o sufixo .jsp ao view em ModelAndView. Note que em nossa classe CrunchifyHelloWorld, temos um objeto ModelAndView sendo retornado como o nome de view welcome. Isso será determinará o caminho /WEB-INF/jsp/welcome.jsp.
7) Mapeie o Spring MVC no arquivo WEB.xml.

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns="http://java.sun.com/xml/ns/javaee"
    xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
    id="WebApp_ID" version="2.5">
    <display-name>CrunchifySpringMVC</display-name>
    <welcome-file-list>
        <welcome-file>index.jsp</welcome-file>
    </welcome-file-list>
    <servlet>
        <servlet-name>crunchify</servlet-name>
        <servlet-class>
            org.springframework.web.servlet.DispatcherServlet
        </servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>crunchify</servlet-name>
        <url-pattern>*.html</url-pattern>
    </servlet-mapping>
</web-app>

O código acima para o web.xml mapeará o DispatcherServlet com um padrão de URL *.html. Note também que definimos index.jsp como página de boas vindas.
Uma outra coisa a ser observada aqui é o nome do servlet na tag <servlet-name> do arquivo web.xml. Uma vez que o DispatcherServlet é inicializado, ele irá procurar por um arquivo como o nome [servlet-name]-servlet.xml  no diretório WEB-INF da aplicação web. Nesse exemplo, o framework irá procurar por um arquivo chamado crunchify-servlet.xml.
8) Crie a classe Controller.

  • Pacote: com.crunchify.controller
  • Nome do arquivo: CrunchifyHelloWorld.java

Create-Spring-MVC-Controller

package com.crunchify.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;
@Controller
public class CrunchifyHelloWorld {
    @RequestMapping("/welcome")
    public ModelAndView helloWorld() {
        String message = "<br><div align='center'>" + "<h1>Hello World, Spring 3.2.1 Example by Crunchify.com<h1> <br>";
        message += "<a href='http://crunchify.com/category/java-web-development-tutorial/'>More Examples</a>";
        return new ModelAndView("welcome", "message", message);
    }
}

Note que definimos anotações @Controller and@RequestMapping("/welcome") para a classe CrunchifyHelloWorld . Quando o Spring pesquisa seu pacote, ele reconhece esse bean como sendo o Controller para processamento de requisições. A anotação @RequestMapping diz ao Spring que esse Controller deve processar todas as requisições que sejam iniciadas com /welcome na URL. Isso inclui /welcome/* e /welcome.html.
O método helloWorld() retorna um objeto ModelAndView. O objeto ModelAndView tenta determinar um view chamado “welcome” e o modelo de dados está sendo retornado para o navegador, de forma que podemos acessa-los de dentro do JSP. O nome do view será determinado como /WEB-INF/jsp/welcome.jsp .
O objeto ModelAndView tambpem contém uma mensagem com a chave “message” e o valor Detailed. Este é a informação que estamos passando para nosso view. Normalmente será um objeto na forma de um bean Java que conterá os dados a serem exibidos. No nosso exemplo, apenas passamos uma String.
9) Crie os views: /WebContent/index.jsp e /WebContent/jsp/welcome.jsp
index.jsp

<html>
<head>
<title>Spring 3.2.1 MVC Series: Index - Crunchify.com</title>
</head>
<body>
    <br>
    <div align='center'>
        <h2>
            Your 1st Spring MCV Example <br> <br> <a
                href="welcome.html">Click here to See Welcome Message...</a>
        </h2>
        <br> by <a href="http://crunchify.com">Crunchify.com</a>
    </div>
</body>
</html>

welcome.jsp

<html>
<head>
    <title>Spring 3.2.1 MVC Example: Hello World - Crunchify.com</title>
</head>
<body>
    ${message}
</body>
</html>

Após tudo isso, seu projeto deve parecer com o seguinte:
Spring-MVC-Eclipse-File-Structure-Crunchify-Tutorial
10) Carregue o projeto no Apache Tomcat.
11) Visite: http://localhost:8080/CrunchifySpringMVC3.2.1/ para testar o projeto.
Link direto para o código fonte desse projeto -> CrunchifySpringMVC3.2.1
Passo 2: Vamos criar 2 arquivos: ajax.jsp e CrunchifySpringAjaxJQuery.java

package com.crunchify.controller;
import java.util.Date;
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.ResponseBody;
import org.springframework.web.servlet.ModelAndView;
import java.util.Random;
/**
 * @author Crunchify.com
 *
 */
@Controller
public class CrunchifySpringAjaxJQuery {
    @RequestMapping("/ajax")
    public ModelAndView helloAjaxTest() {
        return new ModelAndView("ajax", "message", "Crunchify Spring MVC with Ajax and JQuery Demo..");
    }
    @RequestMapping(value = "/ajaxtest", method = RequestMethod.GET)
    public @ResponseBody
    String getTime() {
        Random rand = new Random();
        float r = rand.nextFloat() * 100;
        String result = "<br>Next Random # is <b>" + r + "</b>. Generated on <b>" + new Date().toString() + "</b>";
        System.out.println("Debug Message from CrunchifySpringAjaxJQuery Controller.." + new Date().toString());
        return result;
    }
}
<html>
<head>
<TITLE>Crunchify - Spring MVC Example with AJAX call</TITLE>
<style type="text/css">
body {
    background-image:
        url('http://cdn3.crunchify.com/wp-content/uploads/2013/03/Crunchify.bg_.300.png');
}
</style>
<script type="text/javascript"
    src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
    function crunchifyAjax() {
        $.ajax({
            url : 'ajaxtest.html',
            success : function(data) {
                $('#result').html(data);
            }
        });
    }
</script>
<script type="text/javascript">
    var intervalId = 0;
    intervalId = setInterval(crunchifyAjax, 3000);
</script>
</head>
<body>
    <div align="center">
        <br> <br> ${message} <br> <br>
        <div id="result"></div>
        <br>
        <p>
            by <a href="http://crunchify.com">Crunchify.com</a>
        </p>
    </div>
</body>
</html>

Spring-MVC-with-jQuery-and-AJAX-call
Passo 3: Abra o navegador e acesse essa URL:
http://localhost:8080/CrunchifySpringMVC3.2.1/ajax.html
Passo 4: Veja o resultado.
Crunchify-Spring-MVC-and-AJAX-Jquery-Example-Result1
Passo 5: Vamos fazer um pouco de depuração. Você deve ser capaz de visualizar as sentenças de depuração a seguir no Console de Eclipse para verificar que sua chamada AJAX está funcionando.
Spring-MVC-with-JQuery-And-AJAX-Debugging
E está tudo pronto. Se tiver alguma pergunta, use o espaço para comentários a seguir.
Traduzido de crunchify.com