【java專案實踐】詳解Ajax工作原理以及實現非同步驗證使用者名稱是否存在+原始碼下載(java版)
一年前，從不知道Ajax是什麼，伴隨著不斷的積累，到現在經常使用，逐漸有了深入的認識。今天，如果想開發一個更加人性化，友好，無重新整理，互動性更強的網頁，那您的目標一定是Ajax。
介紹
在詳細討論Ajax是什麼之前，先讓我們花一分鐘瞭解一下Ajax做什麼。如圖所示：
如上圖展示給我們的就是使用Ajax技術實現的效果。伴隨著web應用的越來越強大而出現的是等待，等待伺服器響應，等待瀏覽器重新整理，等待請求返回和生成新的頁面成為了程式設計師們的最最頭疼的難題。隨著Ajax的出現使web應用程式變得更完善，更友好。
好，還等什麼呢？讓我們來一起看看Ajax的強大功能。
1、什麼是Ajax
Ajax的全稱是：Asynchronous JavaScript + XML=非同步 JavaScript + XML
從Ajax的全稱我們可以看出，Ajax不是一個技術，它是幾種技術的結合體，每種技術都有其獨特之處，合在一起就成為了功能強大的新技術，用於建立快速動態網頁的技術。因此，Ajax也有一個時髦的術語“舊貌換新顏”。
2、Ajax包括：
1、HTML，用於建立web表單
2、DOM，用於動態顯示和互動
3、XML，使用XML做資料互動和操作
4、XmlHttpRequest，進行非同步資料接收
5、JavaScript，將它們緊密的結合在一起
相信您對上面的技術都很熟悉，最難是建立XMLHttpRequest物件，大家看我的一篇博文就好，裡面詳細介紹了它是什麼，以及五步建立法，猛戳這裡。
Ajax工作原理
我們通過兩張圖以往傳統的Web應用程式和使用Ajax應用程式的原理圖，來解釋一下Ajax的工作原理，如下圖所示：
圖1是以往傳統的Web應用程式的原理圖，由客戶端向伺服器提交頁面請求，再由伺服器通過HTTP傳給客戶端生成瀏覽頁面。伺服器端承擔大量的工作，客戶端只負責顯示。
圖1.傳統的Web應用程式的原理圖
圖2使用Ajax應用程式的工作原理如下圖，可見通過Ajax在瀏覽器與使用者互動方面有了很大改進，使用者不用為提交Form表單而長時間等待伺服器響應，提高使用者體驗度，而且通過Ajax也可以開發出更加華麗的Web互動頁面。客戶端介面和Ajax引擎都是在客戶端執行，這樣大量的伺服器工作可以在Ajax引擎處實現，減輕了伺服器端的負擔。
圖2.使用Ajax應用程式的原理圖
Ajax的優缺點：
Ajax給我們帶來的好處，大家都有切身體會，在這裡我只是簡單的講幾點：
優點：
1.最大的一點是頁面無重新整理，使用者的體驗度更好。
2.非同步與伺服器互動，不需要打斷使用者操作，具有更快的響應能力。
3.減輕伺服器和頻寬的負擔，節約空間和成本，ajax是“按需取資料”，可以最大程度的減輕對伺服器造成的負擔。
4.基於標準化的並被廣泛應用的技術，不需要下載外掛或者小程式。
Ajax具有很多的優點，正是這些優點也反應了它的缺點（當然這裡缺點可以克服）。
缺點：
1.安全問題
2.對搜尋引擎的支援比較弱。
3.破壞了程式的異常處理機制。
4.違背了url和資源定位的初衷。
實戰
一個簡單，但非常實用的例子：java版非同步驗證使用者名稱是否存在
先給大家看一下實現的效果，下面給大家用程式碼實現：
JS部分的程式碼：
<script type="text/javascript">
var xmlHttp;
function createXMLHttpRequest() {
//表示當前瀏覽器不是ie,如ns,firefox
if(window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
function validate(field) {
if (trim(field.value).length != 0) {
//建立Ajax核心物件XMLHttpRequest
createXMLHttpRequest();
var url = "user_validate.jsp?userId=" + trim(field.value) + "&time=" + new Date().getTime();
//設定請求方式為GET，設定請求的URL，設定為非同步提交
xmlHttp.open("GET", url, true);
//將方法地址複製給onreadystatechange屬性
//類似於電話號碼
xmlHttp.onreadystatechange=callback;
//將設定資訊傳送到Ajax引擎
xmlHttp.send(null);
} else {
document.getElementById("spanUserId").innerHTML = "";
}
}
//回撥函式
function callback() {
//Ajax引擎狀態為成功
if (xmlHttp.readyState == 4) {
//HTTP協議狀態為成功
if (xmlHttp.status == 200) {
if (trim(xmlHttp.responseText) != "") {
document.getElementById("spanUserId").innerHTML = "<font color='red'>" + xmlHttp.responseText + "</font>"
}else {
document.getElementById("spanUserId").innerHTML = "";
}
}else {
alert("請求失敗，錯誤碼=" + xmlHttp.status);
}
}
}
</script>提交到user_validate.jsp頁面的程式碼：
<%@ page language="java" contentType="text/html; charset=GB18030"
pageEncoding="GB18030"%>
<%@ page import="sysmgr.manager.*" %>
<%
String userId = request.getParameter("userId");
if (UserManager.getInstance().findUserById(userId) != null) {
out.println("使用者程式碼[" + userId + "]已經存在!");
}
%>訪問資料庫部分的程式碼，我們就不再這裡展示了，大家可以到檢視原始碼。
總結
Web開發一直在追求介面友好，人性化，較高的使用者體驗度以及更加美觀等等，我相信只要從點點滴滴做起，任何問題都不是問題。