springMVC——使用Ajax實現RESTful

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, POSTPUT, 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() 方法;

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章