1 前言
Ajax 是 Asynchronous Javascript And XML(異步 JavaScript 和 XML)的簡稱,是指一種創建交互式、快速動態網頁應用的網頁開發技術,通過在後臺與服務器進行少量數據交換,可以使網頁實現異步更新,即可以在不重新加載整個網頁的情況下,對網頁的某部分進行更新。
REST 是 Representational State Transfer(表述性狀態轉變)的簡稱,於2000年被提出,使用 HTTP、URI、XML、JSON 等標準和協議,支持輕量級、跨平臺、跨語言的架構設計,是 Web 服務的一種架構風格。RESTful 是遵循 REST 風格的一種 Web 服務。 通過不同請求方法實現對資源的增刪改查操作,通過統一的接口實現4種操作,保證一個資源對應一個請求地址。
在 RESTful 中,介紹了通過配置 HiddenHttpMethodFilter 實現 RESTful,本文將介紹通過 Ajax 實現 RESTful。由於 Ajax 可以直接發送 GET, HEAD, POST, PUT, PATCH, DELETE, OPTIONS, TRACE 8種請求方法,因此不需要配置 HiddenHttpMethodFilter。
由於超鏈接(<a>)可以請求 GET 方法,表單(<form>)可以請求 GET 和 POST 方法,本文僅介紹使用 Ajax 請求 PUT 和 DELETE 方法。
2 實驗環境
(1)導入 JAR 包
(2)下載 jquery-1.8.2.min.js,點擊鏈接出現整面文本,右鍵網頁,選擇“另存爲”即可下載(不用改文件名),在 WebContent 目錄下新建目錄“js”,並將下載好的文件放在此目錄下,如下:
(3)工作目錄
(4)配置文件
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"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" version="3.0">
<!-- 首頁網頁 -->
<welcome-file-list>
<welcome-file>/WEB-INF/view/index.jsp</welcome-file>
</welcome-file-list>
<!-- 配置核心(前端)控制器 DispatcherServlet -->
<servlet>
<servlet-name>dispatcherServlet</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<!-- 加載IOC容器配置文件 -->
<param-name>contextConfigLocation</param-name>
<param-value>classpath:applicationContext.xml</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>dispatcherServlet</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
</web-app>
applicationContext.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:context="http://www.springframework.org/schema/context"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xsi:schemaLocation="http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd
http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.0.xsd">
<!-- 掃描組件,將加@Controller註解的類作爲SpringMVC的控制層 -->
<context:component-scan base-package="com.test"></context:component-scan>
<!-- 配置視圖解析器 -->
<bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix" value="/WEB-INF/view/"></property>
<property name="suffix" value=".jsp"></property>
</bean>
<!-- Tomcat默認servlet,即DefaultServlet -->
<mvc:default-servlet-handler/>
<!-- mvc驅動 -->
<mvc:annotation-driven/>
</beans>
3 案例分析
index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>首頁</title>
<script type="text/javascript" src="${pageContext.servletContext.contextPath}/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
function put(){
$.ajax({
url:"user", //請求路徑
type:"PUT", //請求方式,不區分大小寫
});
}
</script>
<script type="text/javascript">
function del(){
$.ajax({
url:"user/1001", //請求路徑
type:"DELETE", //請求方式,不區分大小寫
});
}
</script>
</head>
<body>
<input type="button" value="測試PUT" οnclick="put()"><br/><br/>
<input type="button" value="測試DELETE" οnclick="del()"><br/><br/>
<a href="javascript:;" οnclick="del()">測試DELETE</a>
</body>
</html>
Test.java
package com.test;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
@Controller
public class Test {
@RequestMapping(value="user",method=RequestMethod.PUT)
public void update() {
System.out.println("PUT");
}
@RequestMapping(value="user/{id}",method=RequestMethod.DELETE)
public void delete(@PathVariable("id")Integer id) {
System.out.println("DELETE,id="+id);
}
}
在地址欄輸入:http://localhost:8080/SpringMVC/,顯示如下:
點擊 【測試PUT】按鈕,控制檯輸出:【PUT】,說明調用了 Test 的 update() 方法;
點擊 【測試DELETE】按鈕,控制檯輸出:【DELETE,id=1001】,說明調用了 Test 的 delete() 方法;
點擊 【測試DELETE】超鏈接,控制檯輸出:【DELETE,id=1001】,說明調用了 Test 的 delete() 方法;