前言：在上篇中，我們使用ajax技術，以get方式發起請求，達到了網頁端局部重新整理的效果。這次，我們使用post方式來實作局部重新整理。
在上篇的基礎上，.jsp/web.xml/servlet三個部分都要改動或新寫
步驟核心(就是修改index.jsp檔案)：
第一步：在js中建立XMLHttpRequest對象
第二步：擷取使用者在id="username"的input元素中輸入的資訊
第三步：通過XMLHttpRequest對象發起post請求
要點
(1)ajax發起post請求，需要先設定好請求頭(就得按下面那樣寫)
xhr.setRequestHeader(
"content-type","application/x-www-form-urlencoded");
(2)向XMLHttpRequest對象中放入請求
(3)發送請求時，xhr.send方法的參數不再是null了，需要傳入我們在第二步中擷取到的使用者名。代碼為：
xhr.send("name="+name);
注意：send方法中，寫入的參數的形式必須是："參數名="+參數值
第四步：
(1)設定觸發請求的事件(本例中的是onblur，光标離開事件)
(2)設定伺服器傳回響應的内容在浏覽器的哪個位置局部重新整理出來
第五步：建立回調函數，檢測readyState屬性的值
第六步：當readyState值為4且status值為200時，伺服器傳回相應完畢，從響應中擷取傳回的内容，顯示到浏覽器上指定的位置
一、index.jsp檔案
<%@ page language="java" pageEncoding="utf-8"%>
<html>
<head>
</head>
......(上篇的代碼部分)
<script type="text/javascript">
//檢查使用者名是否可用
function checkname(){
//這次發起請求時，還要将使用者輸出的使用者名也發給伺服器
//擷取請求參數
var name = document.getElementById("username").value;
//擷取XMLHttpRequest對象
var xhr = new XMLHttpRequest();
//将post請求放到XMLHttpRequest對象中
xhr.open("post","/ajax01/check.do")
//ajax發起post請求，需要先設定好請求頭(就得按下面那樣寫)
xhr.setRequestHeader(
"content-type","application/x-www-form-urlencoded");
//注冊回調函數
xhr.onreadystatechange = function(){
//1、readyState狀态碼為4表示伺服器傳回響應完畢
//2、XMLHttpRequest對象的status屬性：
//(1)該屬性值可為：404/500/200/...
//(2)當xhr.status==200時，表示請求處理成功
//如果請求處理完畢
if(xhr.readyState == 4 && xhr.status == 200 ){
//擷取響應的内容資訊
var msg = xhr.responseText;
//将該資訊追加到指定的網頁位置
document.getElementById("username_msg").innerHtml = msg;
}
};
//發送請求(必須是("參數名="+參數值)的形式)
xhr.send("name="+name);
//發起請求後，顯示正在檢測
document.getElementById("username_msg").innerHtml = "正在檢測...";
};
</script>
<body>
<hr/>
<table>
<tr>
<td>新聞标題</td>
<td>時間</td>
</tr>
<td>×××和英九在新加坡相會</td>
<td>2015-11-11</td>
<td>經濟指數有所改觀</td>
<td>2015-11-10</td>
<td>大宗商品價格下跌</td>
</table>
<hr/>
<!-- onblur屬性：滑鼠失去焦點事件(就是滑鼠的光标離開了文本框) -->
<input type="text" id="username" onblur="checkname()">
//伺服器傳回的資訊在這裡局部重新整理出來
<span id="username_msg"></span>
</body>
</html>
二、建立一個servlet,用于檢查浏覽器端發來的使用者名是否可用
package org.tarena.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class CheckServlet
extends HttpServlet{
public void service(
HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException{
System.out.println(1);
//模拟實際請情況，延遲3s後傳回結果(延遲時顯示請求正在處理)
try {
Thread.sleep(3000);
} catch (InterruptedException e) {
e.printStackTrace();
}
System.out.println(2);
//設定傳回的檔案類型和編碼集
response.setContentType("text/plain;charset=utf-8");
//擷取一條輸出流，用于向浏覽器端顯示資訊
PrintWriter out = response.getWriter();
System.out.println(3);
//對于請求帶過來的資料，用utf-8來解碼
request.setCharacterEncoding("utf-8");
System.out.println(4);
//擷取請求中name參數的值
String name = request.getParameter("name");
System.out.println(5);
//檢測name值是否可用
if("scott".equals(name)){
out.println("使用者名已被占用");
}else{
out.println("使用者名可用");
System.out.println(6);
out.flush();
out.close();
三、在web.xml檔案中為CheckServlet這個servlet設定接收的請求，我們設定該servlet接收的請求是"/check.do"(代碼就不贅述了)
操作：
(1)發起請求，進入index.jsp頁面
請求為：http://localhost:8080/ajax01/index.jsp
浏覽器顯示如圖：
(2)在文本框中輸入使用者名，顯示為：
![SpringMVC 與 Json實作資料互動[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)