第一個使用ajax的spring mvc程式

一、使用maven和intellij構造spring mvc程式的步驟和方法：

1.使用如下命令建立一個名為CounterWebApp的web應用。

mvn archetype:generate -DgroupId=com.chf -DartifactId=CounterWebApp -DarchetypeArtifactId=maven-archetype-webapp

-DinteractiveMode=false

2.在CounterWebApp/src/main/java目錄下面建立你的原始碼的包目錄和檔案。

3.在pom.xml中配置spring mvc需要添加的依賴。

如下面的代碼所示：

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">  <modelVersion>4.0.0</modelVersion>  <groupId>com.chf</groupId>  <artifactId>CounterWebApp</artifactId>  <packaging>war</packaging>  <version>1.0-SNAPSHOT</version>  <name>CounterWebApp Maven Webapp</name>  <url>http://maven.apache.org</url>  <properties>    <jdk.version>1.7</jdk.version>    <spring.version>4.1.1.RELEASE</spring.version>    <jstl.version>1.2</jstl.version>    <junit.version>4.11</junit.version>    <logback.version>1.0.13</logback.version>    <jcl-over-slf4j.version>1.7.5</jcl-over-slf4j.version>  </properties>  <dependencies>    <dependency>      <groupId>junit</groupId>      <artifactId>junit</artifactId>      <version>${junit.version}</version>      <scope>test</scope>    </dependency>    <!--spring core-->    <dependency>      <groupId>org.springframework</groupId>      <artifactId>spring-core</artifactId>      <version>${spring.version}</version>      <exclusions>        <exclusion>          <groupId>commons-logging</groupId>          <artifactId>commons-logging</artifactId>        </exclusion>      </exclusions>    </dependency>    <dependency>      <groupId>org.slf4j</groupId>      <artifactId>jcl-over-slf4j</artifactId>      <version>${jcl-over-slf4j.version}</version>    </dependency>    <dependency>      <groupId>javax.servlet</groupId>      <artifactId>servlet-api</artifactId>      <version>2.5</version>      <!--<scope>provided</scope>-->    </dependency>    <dependency>      <groupId>ch.qos.logback</groupId>      <artifactId>logback-classic</artifactId>      <version>${logback.version}</version>    </dependency>    <dependency>      <groupId>org.springframework</groupId>      <artifactId>spring-web</artifactId>      <version>${spring.version}</version>    </dependency>    <dependency>      <groupId>org.springframework</groupId>      <artifactId>spring-webmvc</artifactId>      <version>${spring.version}</version>    </dependency>    <dependency>      <groupId>net.sf.json-lib</groupId>      <artifactId>json-lib</artifactId>      <version>2.3</version>      <classifier>jdk15</classifier>    </dependency>    <!-- jstl -->    <dependency>      <groupId>jstl</groupId>      <artifactId>jstl</artifactId>      <version>${jstl.version}</version>    </dependency>  </dependencies>  <build>    <!--最終產生的war檔案名稱-->    <finalName>CounterWebApp</finalName>    <plugins>      <!-- Set JDK Compiler Level -->      <plugin>        <groupId>org.apache.maven.plugins</groupId>        <artifactId>maven-compiler-plugin</artifactId>        <version>3.2</version>        <configuration>          <source>${jdk.version}</source>          <target>${jdk.version}</target>          <encoding>GBK</encoding>        </configuration>      </plugin>      <!-- For Maven Tomcat Plugin -->      <plugin>        <groupId>org.apache.tomcat.maven</groupId>        <artifactId>tomcat7-maven-plugin</artifactId>        <version>2.2</version>        <configuration>          <!--Deploy to server-->          <url>http://localhost:8080/manager/text</url>          <server>Tomcat7Server</server>          <path>/CounterWebApp</path>        </configuration>      </plugin>    </plugins>  </build></project>

4.然後使用mvn clean && mvn install來運行程式。

5.遇到的問題和解決方案：

1)mvn install過程中遇到下面的錯誤：

Fatal error compiling: ??Ч??Ŀ??汾?? 1.7 -> [Help 1]

解決方案：

在~/.bash_profile檔案中添加下面配置。添加完後，運行source ~/.bash_profile。

alias javac='javac -J-Dfile.encoding=UTF-8 -encoding UTF-8'

alias java='java -Dfile.encoding=UTF-8'

export LANG=en_US.UTF-8

export LC_ALL=en_US.UTF-8

2）這樣之後，再次mvn install的時候遇到錯誤：Fatal error compiling: invalid target release: 1.7

解決方案：

在~/.bash_profile檔案中添加一行下面的配置。添加完後，運行source ~/.bash_profile。

export JAVA_HOME='/Library/Java/JavaVirtualMachines/jdk1.7.0_60.jdk/Contents/Home'

二、建立第一個spring mvc的程式。

1.我對spring mvc的理解：

1)spring mvc的結構主要包括下面幾個部分：

DispatcherServlet:將請求轉寄給控制器。

Controller:具體地處理請求。

Handler Mapping:映射處理器，負責映射中央處理器，轉寄給Controller時的映射策略。

ModelAndView:伺服器返回的資料和視圖層的封裝類。

ViewResolver&View:視圖解析器、解析具體的視圖。

Interceptors:攔截器，負責攔截我們定義的請求，然後做處理工作。

2)spring mvc具體的處理流程如下圖所示：

2.例子的目的：在web程式中，存在一類程式，其服務端端的處理時間比較長。正因處理時間比較長，因此這類程式有可能會導致請求逾時。對於這種應用程式經常使用非同步請求的方式來解決。之前沒有使用過這種方式，因此首先寫一個極其簡單的程式。

這個程式的目的是：使用ajax的方式，每隔1s就發送一個請求到服務端。服務端會計數，如果計數達到20就返回一個finish給用戶端(表示服務端的任務完成)，如果用戶端接收到服務端任務完成的訊息，就停止發送請求。

3.例子的具體實現：

直接上代碼和各個設定檔的配置

1)Controller類：

package com.chf.controller;import com.chf.services.AsyncServiceImpl;import org.slf4j.Logger;import org.slf4j.LoggerFactory;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Controller;import org.springframework.ui.ModelMap;import org.springframework.web.bind.annotation.PathVariable;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestMethod;import javax.annotation.Resource;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import com.chf.util.ResoponseUtil;/** * Created by Administrator on 15-1-31. *//*There must be a Controller annotation or the application will doesn't work .*/@Controllerpublic class BaseController {    @Autowired    AsyncServiceImpl asyncService;    @Autowired ResoponseUtil ResponseUtil;//    @RequestMapping(value = "async/{key}")    @RequestMapping(value = "{key}")    //async/{key}?    public String asyncTest(HttpServletRequest req,                            HttpServletResponse resp, @PathVariable String key) throws Exception {        asyncService.asyncMethod(key);        return "common/async";    }    //@RequestMapping(params= "method=getStatus",method = RequestMethod.GET)    @RequestMapping("/status")    public String showAsyncStatus(HttpServletRequest req,                                  HttpServletResponse resp) throws Exception {                                 // HttpServletResponse resp, @PathVariable String key) throws Exception {        System.out.println("in status new!!");        String status = asyncService.getProcess(null);        ResponseUtil.OutputJson(resp, "{\"status\":\"" + status + "\"}");        return null;    }    @RequestMapping(value = "/clear")    public String clearAsyncStatus(HttpServletRequest req,                                   HttpServletResponse resp, @PathVariable String key) throws Exception {        asyncService.clearCache(key);        ResponseUtil.OutputJson(resp, "{\"status\":\"ok\"}");        return null;    }}

2)service介面和service方法：

package com.chf.services;/** * Created by hfc on 15/10/21. */public interface AsyncService {    void asyncMethod(String cacheKey) throws Exception;    public String getProcess(String cacheKey) throws Exception;    public void clearCache(String cacheKey) throws Exception;}

package com.chf.services;/** * Created by hfc on 15/10/21. */import com.chf.services.AsyncService;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.scheduling.annotation.Async;import org.springframework.stereotype.Service;@Service("asyncService")public class AsyncServiceImpl implements AsyncService {//    @Autowired//    StringRedisTemplate stringRedisTemplate;    Integer count = 0;    @Override    @Async    public void asyncMethod(String cacheKey) throws Exception {        int maxStep = 20;        for (int i = 0; i < maxStep; i++) {            Thread.sleep(2000);            count++;//stringRedisTemplate.opsForValue().set(cacheKey, (i + 1) + "/" + maxStep);        }    }    @Override    public String getProcess(String cacheKey) throws Exception {        count++;        if(count>=20)            return "finish";        return null;    }    @Override    public void clearCache(String cacheKey) throws Exception {        //stringRedisTemplate.delete(cacheKey);        count = 0;    }}

3)index.jsp:

<html><head>    <script src="ui/js/jquery.js"></script></head><script type="text/javascript" language="JavaScript">    var timerId = null;//?????ID    $(document).ready(function () {//        alert("ready!");        /*         ????????н??         */        timerId = setInterval(function () {            getStatus();        }, 1000);        getStatus();    });    /**     ?????н??     */    function getStatus() {        var statusUrl = window.location.href + "/status";//        alert("asdf");        $.get(statusUrl, function (data) {            if (data == null || data.status == null || data.status == "null") {                updateStatus("ready");                return;            }            var status = data.status;            updateStatus(status);            alert("before clear");            clearInterval(timerId);//???????            alert("after clear");//            var temp = status.split("/");//            if (temp[0] == temp[1]) {//                updateStatus("finish");//                clearInterval(timerId);//???????//                clearStatus();//????redis????//            }        })    }    /**     * ?????????????     */    function clearStatus() {        var clearStatusUrl = window.location.href + "/clear";        $.get(clearStatusUrl, function (data) {            //alert(data.status);        })    }    /**     ?????????     */    function updateStatus(msg) {        $("#status").html(msg);    }</script><div id="msgBox">    <span>begin processing</span>    <h1>current task:<span style="color:red" id="status">ready</span></h1></div><body></body></html>

4)設定檔：

web.xml:

<web-app 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"         version="2.5"><display-name>Counter  Web  Application </display-name><servlet>    <servlet-name>mvc-dispatcher</servlet-name>    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>    <load-on-startup>1</load-on-startup></servlet><servlet-mapping>    <servlet-name>mvc-dispatcher</servlet-name>    <url-pattern>/</url-pattern></servlet-mapping><servlet-mapping>    <servlet-name>default</servlet-name>    <url-pattern>*.js</url-pattern></servlet-mapping><context-param>    <param-name>contextConfigLocation</param-name>    <param-value>/WEB-INF/mvc-dispatcher-servlet.xml</param-value></context-param><listener>    <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class></listener></web-app>

mvc-dispatch-servlet.xml檔案：

<web-app 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"         version="2.5"><display-name>Counter  Web  Application </display-name><servlet>    <servlet-name>mvc-dispatcher</servlet-name>    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>    <load-on-startup>1</load-on-startup></servlet><servlet-mapping>    <servlet-name>mvc-dispatcher</servlet-name>    <url-pattern>/</url-pattern></servlet-mapping><servlet-mapping>    <servlet-name>default</servlet-name>    <url-pattern>*.js</url-pattern></servlet-mapping><context-param>    <param-name>contextConfigLocation</param-name>    <param-value>/WEB-INF/mvc-dispatcher-servlet.xml</param-value></context-param><listener>    <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class></listener></web-app>

4.啟動tomcat，並在瀏覽器中輸入localhost:8080即可。

三、注意點：
1、服務端返回json資料的格式：

1)返回資料的時候將MIMETYPE設定為：

response.setContentType("application/json;charset=utf-8");

2)JSON 資料的書寫格式是：成對的名稱和數值。

成對的名稱和數值包括欄位名稱（在雙引號中），後面寫一個冒號，然後是值：

"firstName" : "John"

因此服務端在返回的時候要注意雙引號。否則瀏覽器解析的結果不正確。

2、web.xml中通過如下來配置其Context的檔案名稱。

<context-param>    <param-name>contextConfigLocation</param-name>    <param-value><span style="color:#ff6666;">/WEB-INF/mvc-dispatcher-servlet.xml</span></param-value></context-param>

3.使用註解的方式來使用bean的時候，需要在mvc-dispatcher-servlet.xml配置相關的bean。只有配置後，才能使用。

4.在web.xml中有如下的配置：

<servlet>    <servlet-name>mvc-dispatcher</servlet-name>    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>    <load-on-startup>1</load-on-startup></servlet>    <servlet-mapping>        <servlet-name>mvc-dispatcher</servlet-name>        <url-pattern>/</url-pattern>    </servlet-mapping>

這樣所有的url都會被controller攔截。以致於在index.jsp中找不到jquery.js資源。

為瞭解決這個問題：添加了一個資源攔截配置如下：

<servlet-mapping>    <servlet-name>default</servlet-name>    <url-pattern>*.js</url-pattern></servlet-mapping>

5.請求過程中遇到400錯誤，都是因為請求的參數和服務端的參數不一致造成的。