【要點】：

瞭解Ajax的實現過程

實現註冊頁面的簡單Ajax校驗效果

【Ajax簡要介紹】：

1. Ajax = 非同步 JavaScript + XML。
2. Ajax 是一種用於建立快速動態網頁的技術。
3. 通過在後臺與伺服器進行少量資料交換，AJAX 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。傳統的網頁需要更新內容，必需過載整個網頁面。

案例：新浪微博、Google 地圖、開心網等等。

【實現過程】：

• 區域性重新整理
• Servlet的使用
• 響應的返回和表示

【案例】

實現表單上的輸入框，失去焦點，進行資料提示。（例如使用者名稱輸入框，點選後移開，進行資料提示）

【jsp】

1 <div id="theName">
2     <span>使用者名稱: </span>
3     <input type="text" id="username" name="username" value="使用者名稱" onblur="checkUserName(this.value)"/>
4      <span id="username_msg"></span>
5 </div>

　　【js】

 1 <%-- 這裡是具體的ajax實時校驗的響應程式碼 --%>
 2     <script type="text/javascript">
 3
 
         // 校對使用者名稱
 4         function checkUserName(username) {
 5             // 獲得xhr物件
 6             var xhr = getXMLHttpRequest();
 7             // 監聽並對應處理
 8             xhr.onreadystatechange = function () {
 9                 if(xhr.readyState == 4 && xhr.status == 200){
10                     var
 
 result = xhr.responseText;
11                     document.getElementById("username_msg").innerText = result;
12                 }
13             };
14             // 開啟連線
15             xhr.open("GET", "${pageContext.request.contextPath}/checkUserName?username="+username, true);
16             // 傳送請求
17             xhr.send(null);
18         }
19     </script>

　　【Servlet】

 1 @WebServlet("/checkUserName")
 2 public class CheckUserNameServlet extends HttpServlet {
 3     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 4         doGet(request, response);
 5     }
 6 
 7     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 8         // 獲得表單值 GET方式傳值中文亂碼
 9         String username = new String(request.getParameter("username").getBytes("ISO-8859-1"),"UTF-8");
10         // 分發轉向
11         // 設定響應編碼
12         response.setContentType("text/html;charset=UTF-8");
13         // 得到輸出流
14         PrintWriter out = response.getWriter();
15         // 模擬資料庫查詢到username不能為admin
16         if(username == null){
17             out.print("該處不能為空，請輸入");
18         }else if(username.equals("admin")){
19             out.print("該使用者名稱已存在");
20         }else {
21             out.print("該使用者名稱可使用");
22         }
23     }
24 }

　　【效果】

【案例注意點】

• 標籤的id賦值 —— innerText innerHTML
• 提示的樣式可以額外定義
• 函式觸發動作