AJAX

Ajax 即“Asynchronous Javascript And XML”（非同步 JavaScript 和 XML），是指一種建立互動式網頁應用的網頁開發技術。
Ajax = 非同步 JavaScript 和 XML（標準通用標記語言的子集）。
Ajax 是一種用於建立快速動態網頁的技術。
Ajax 是一種在無需重新載入整個網頁的情況下，能夠更新部分網頁的技術。通過在後臺與伺服器進行少量資料交換，Ajax 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。傳統的網頁（不使用 Ajax）如果需要更新內容，必須過載整個網頁頁面。
那麼我們應該如何使用AJAX呢？

1. 伺服器向客戶端響應資料

當伺服器向客戶端響應的需要是某些資料，而不是轉發或者重定向時，需要在處理請求的方法之前新增@ResponseBody，而該註解預設是不識別的，在使用該註解之前，需要在Spring的配置檔案中添加註解驅動：

<mvc:annotation-driven />

例如處理請求時：

@RequestMapping("/login.do")
@ResponseBody
public String showLogin() {
	return "hello, login"; // /WEB-INF/login.jsp
}

則在瀏覽器中得到的將是"hello, login"

注意：在沒有進一步的配置之前，返回的內容中並不支援中文！

以“處理登入”為例，可以為處理請求的方法新增@ResponseBody註解，然後，調整各種情況下的返回值，無論是哪種情況（成功或失敗），都使用JSON語法組織資料：

@RequestMapping(value="/handle_login.do", method=RequestMethod.POST)
@ResponseBody
public String handleLogin(@RequestParam("username") String username,
	@RequestParam("password"
 
) String password,HttpSession session) {
	try {
		User user = userService.login(username, password);
		session.setAttribute("uid", user.getId());
		session.setAttribute("username", user.getUsername());
		return "{ \"state\": 1 }";
	} catch (UserNotFoundException e) {
		return "{ \"state\": -1, \"message\": \"" + e.getMessage() + "\" }";
	} catch (PasswordNotMatchException e) {
		return "{ \"state\": -2, \"message\": \"" + e.getMessage() +"\" }";
	}
}

2. Jackson框架

使用Jackson框架，可以解決響應的資料可能亂碼的問題（本質上是設定了響應頭中的響應字元編碼），並且，當響應某個物件時，會自動裝響應頭中的響應型別設定為json型別。

<dependency>
	<groupId>com.fasterxml.jackson.core</groupId>
	<artifactId>jackson-databind</artifactId>
	<version>2.9.7</version>
</dependency>

除此以外，Jackson框架還可以將響應的物件自動轉換為JSON字串格式！通常，可以在專案中新增ResponseResult類：

public class ResponseResult {
	private Integer state;
	private String message;

	public Integer getState() {
		return state;
	}
	public void setState(Integer state) {
		this.state = state;
	}
	public String getMessage() {
		return message;
	}
	public void setMessage(String message) {
		this.message = message;
	}
}

SpringMVC框架對Jackson框架的支援性非常好，添加了Jackson依賴後，無須新增任何配置，也不需要在專案的任何位置顯式的使用它。

3. AJAX

AJAX是一種非同步提交請求並處理響應結果的做法，它本身是基於JavaScript實現的！

通常使用基於jQuery的AJAX處理方式，可以解決不同瀏覽器的版本相容問題，並且使得程式碼的可讀性變得更高，所以，通常需要：

<script type="text/javascript" src="${pageContext.request.contextPath }/jquery-3.3.1.min.js"></script>

然後呼叫jQuery中的ajax()函式來處理AJAX。

在ajax()函式的引數中，至少配置5個屬性：

• url：將請求提交到哪個URL
• data：提交的引數
• type：請求的型別
• dataType：服務端響應的資料型別，可以是text、xml、json
• success：當伺服器正確響應（200）時如何處理，值是匿名函式，函式的引數就是服務端響應的JSON字串轉換得到的JSON物件
  
  

4. 寫一個AJAX請求

success：當伺服器正確響應（200）時如何處理，值是匿名函式，函式的引數就是服務端響應的JSON字串轉換得到的JSON物件。

使用這種模式開發時，關於控制器端，應該：

1. 處理請求的方法需要新增@ResponseBody註解；

2. 處理請求的方法的返回值應該是ResponseResult；

3. 在處理請求的方法內部，無論是成功還是失敗，當決定執行響應時，都應該在ResponseResult物件中封裝必要的資料，然後返回ResponseResult物件。

關於前端，應該：

1. 由於需要使用jQuery，所以，必須引入jQuery框架；

2. 前端頁面不強制需要<form>，並且，使用者的提交操作觸發的不是傳統的提交表單，而應該觸發JS事件，例如：可以將提交按鈕的型別調整為type="button"，並配置onclick="doReg()"，表示當點選這個按鈕時，執行JavaScript中的doReg()方法；

3. 自定義JavaScript函式，且函式名與以上步驟中點選事件對應一致：

<script type="text/javascript">
function doReg() {
	
}
</script>

4. 然後編寫函式體，主要任務是呼叫jQuery框架中的ajax()函式來實現提交請求並獲取響應結果：

function doReg() {
	// 獲取使用者輸入的資料
	var u = $("#username").val();
	var p = $("#password").val();
	// 處理請求的URL
	var url = "handle_reg.do";
	// 提交到服務端的引數
	var data = "username=" + u + "&password=" + p;
	// 發出請求，並獲取響應結果
	$.ajax({
		"url": url,
		"data": data,
		"type": "post",
		"dataType": "json",
		"success": function(json) {
			// 由於服務端使用了Jackson
			// 所以響應頭中由Jackson自動設定了響應正文是json
			// 所以dataType的值就是"json"
			// 且當前成功時的處理函式的引數就是服務端響應的json物件
			if (json.state == 1) {
				alert("註冊成功！");
			} else {
				alert("註冊失敗！" + json.message);
			}
		}
	});
}