七、AJAX開發(fā)
　　到這里，已經(jīng)可以清楚的知道AJAX是什么，AJAX能做什么，AJAX什么地方不好。如果你覺得AJAX真的能給你的開發(fā)工作帶來改進(jìn)的話，那么繼續(xù)看看怎么使用AJAX吧。

7.1、AJAX應(yīng)用到的技術(shù)
　　AJAX涉及到的7項技術(shù)中，個人認(rèn)為Javascript、XMLHttpRequest、DOM、XML比較有用。

A、XMLHttpRequest對象
　　XMLHttpRequest是XMLHTTP組件的對象，通過這個對象，AJAX可以像桌面應(yīng)用程序一樣只同服務(wù)器進(jìn)行數(shù)據(jù)層面的交換，而不用每次都刷新界面，也不用每次將數(shù)據(jù)處理的工作都交給服務(wù)器來做；這樣既減輕了服務(wù)器負(fù)擔(dān)又加快了響應(yīng)速度、縮短了用戶等待的時間。

　　IE5.0開始，開發(fā)人員可以在Web頁面內(nèi)部使用XMLHTTP ActiveX組件擴(kuò)展自身的功能，不用從當(dāng)前的Web頁面導(dǎo)航就可以直接傳輸數(shù)據(jù)到服務(wù)器或者從服務(wù)器接收數(shù)據(jù)。,Mozilla1.0以及NetScape7則是創(chuàng)建繼承XML的代理類XMLHttpRequest；對于大多數(shù)情況，XMLHttpRequest對象和XMLHTTP組件很相似，方法和屬性類似，只是部分屬性不同。

XMLHttpRequest對象初始化：
<script language=”javascript”>
var http_request = false;
//IE瀏覽器
http_request = new ActiveXObject("Msxml2.XMLHTTP");
http_request = new ActiveXObject("Microsoft.XMLHTTP");
//Mozilla瀏覽器
http_request = new XMLHttpRequest();
</script>

　　XMLHttpRequest對象的方法：

方法	描述
abort()	停止當(dāng)前請求
getAllResponseHeaders()	作為字符串返回完整的headers
getResponseHeader("headerLabel")	作為字符串返回單個的header標(biāo)簽
open("method","URL"[,asyncFlag[,"userName"[, "password"]]])	設(shè)置未決的請求的目標(biāo) URL，方法，和其他參數(shù)
send(content)	發(fā)送請求
setRequestHeader("label", "value")	設(shè)置header并和請求一起發(fā)送

　　XMLHttpRequest對象的屬性：

屬性	描述
onreadystatechange	狀態(tài)改變的事件觸發(fā)器
readyState	對象狀態(tài)(integer):   0 = 未初始化 1 = 讀取中 2 = 已讀取 3 = 交互中 4 = 完成
responseText	服務(wù)器進(jìn)程返回數(shù)據(jù)的文本版本
responseXML	服務(wù)器進(jìn)程返回數(shù)據(jù)的兼容DOM的XML文檔對象
status	服務(wù)器返回的狀態(tài)碼, 如：404 = "文件未找到" 、200 ="成功"
statusText	服務(wù)器返回的狀態(tài)文本信息

B、Javascript
　　 Javascript一直被定位為客戶端的腳本語言，應(yīng)用最多的地方是表單數(shù)據(jù)的校驗?，F(xiàn)在，可以通過Javascript操作XMLHttpRequest，來跟數(shù)據(jù)庫打交道。

C、DOM
　　 DOM（Document Object Model）是提供給HTML和XML使用的一組API，提供了文件的表述結(jié)構(gòu)，并可以利用它改變其中的內(nèi)容和可見物。腳本語言通過DOM才可以跟頁面進(jìn)行交互。Web開發(fā)人員可操作及建立文件的屬性、方法以及事件都以對象來展現(xiàn)。比如，document就代表頁面對象本身。

D、XML
　　通過XML（Extensible Markup Language），可以規(guī)范的定義結(jié)構(gòu)化數(shù)據(jù)，是網(wǎng)上傳輸?shù)臄?shù)據(jù)和文檔符合統(tǒng)一的標(biāo)準(zhǔn)。用XML表述的數(shù)據(jù)和文檔，可以很容易的讓所有程序共享。

7.2、AJAX開發(fā)框架
　　這里，我們通過一步步的解析，來形成一個發(fā)送和接收XMLHttpRequest請求的程序框架。AJAX實質(zhì)上也是遵循Request/Server模式，所以這個框架基本的流程也是：對象初始化à發(fā)送請求à服務(wù)器接收à服務(wù)器返回à客戶端接收à修改客戶端頁面內(nèi)容。只不過這個過程是異步的。

A、初始化對象并發(fā)出XMLHttpRequest請求
　　為了讓Javascript可以向服務(wù)器發(fā)送HTTP請求，必須使用XMLHttpRequest對象。使用之前，要先將XMLHttpRequest對象實例化。之前說過，各個瀏覽器對這個實例化過程實現(xiàn)不同。IE以ActiveX控件的形式提供，而Mozilla等瀏覽器則直接以XMLHttpRequest類的形式提供。為了讓編寫的程序能夠跨瀏覽器運行，要這樣寫：

if (window.XMLHttpRequest) { // Mozilla, Safari, ...
http_request = new XMLHttpRequest();
}
else if (window.ActiveXObject) { // IE
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}

　　有些版本的Mozilla瀏覽器處理服務(wù)器返回的未包含XML mime-type頭部信息的內(nèi)容時會出錯。因此，要確保返回的內(nèi)容包含text/xml信息。

http_request = new XMLHttpRequest();
http_request.overrideMimeType('text/xml');

B、指定響應(yīng)處理函數(shù)
　　接下來要指定當(dāng)服務(wù)器返回信息時客戶端的處理方式。只要將相應(yīng)的處理函數(shù)名稱賦給XMLHttpRequest對象的onreadystatechange屬性就可以了。比如：

 

http_request.onreadystatechange = processRequest;

　　需要指出的時，這個函數(shù)名稱不加括號，不指定參數(shù)。也可以用Javascript即時定義函數(shù)的方式定義響應(yīng)函數(shù)。比如：

http_request.onreadystatechange = function() { };

C、發(fā)出HTTP請求

　　指定響應(yīng)處理函數(shù)之后，就可以向服務(wù)器發(fā)出HTTP請求了。這一步調(diào)用XMLHttpRequest對象的open和send方法。

http_request.open('GET', 'http://www.example.org/some.file', true);
http_request.send(null);

　　open的第一個參數(shù)是HTTP請求的方法，為Get、Post或者Head。

　　open的第二個參數(shù)是目標(biāo)URL。基于安全考慮，這個URL只能是同網(wǎng)域的，否則會提示“沒有權(quán)限”的錯誤。這個URL可以是任何的URL，包括需要服務(wù)器解釋執(zhí)行的頁面，不僅僅是靜態(tài)頁面。目標(biāo)URL處理請求XMLHttpRequest請求則跟處理普通的HTTP請求一樣，比如JSP可以用request.getParameter(“”)或者request.getAttribute(“”)來取得URL參數(shù)值。

　　open的第三個參數(shù)只是指定在等待服務(wù)器返回信息的時間內(nèi)是否繼續(xù)執(zhí)行下面的代碼。如果為True，則不會繼續(xù)執(zhí)行，直到服務(wù)器返回信息。默認(rèn)為True。

　　按照順序，open調(diào)用完畢之后要調(diào)用send方法。send的參數(shù)如果是以Post方式發(fā)出的話，可以是任何想傳給服務(wù)器的內(nèi)容。不過，跟form一樣，如果要傳文件或者Post內(nèi)容給服務(wù)器，必須先調(diào)用setRequestHeader方法，修改MIME類別。如下：

http_request.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);

　　這時資料則以查詢字符串的形式列出，作為sned的參數(shù)，例如：

name=value&anothername=othervalue&so=on

D、處理服務(wù)器返回的信息
　　在第二步我們已經(jīng)指定了響應(yīng)處理函數(shù)，這一步，來看看這個響應(yīng)處理函數(shù)都應(yīng)該做什么。

　　首先，它要檢查XMLHttpRequest對象的readyState值，判斷請求目前的狀態(tài)。參照前文的屬性表可以知道，readyState值為4的時候，代表服務(wù)器已經(jīng)傳回所有的信息，可以開始處理信息并更新頁面內(nèi)容了。如下：

if (http_request.readyState == 4) {
// 信息已經(jīng)返回，可以開始處理
} else {
// 信息還沒有返回，等待
}

　　服務(wù)器返回信息后，還需要判斷返回的HTTP狀態(tài)碼，確定返回的頁面沒有錯誤。所有的狀態(tài)碼都可以在W3C的官方網(wǎng)站上查到。其中，200代表頁面正常。

if (http_request.status == 200) {
// 頁面正常，可以開始處理信息
} else {
// 頁面有問題
}

　　XMLHttpRequest對成功返回的信息有兩種處理方式：
　　 responseText：將傳回的信息當(dāng)字符串使用；
　　 responseXML：將傳回的信息當(dāng)XML文檔使用，可以用DOM處理。

E、一個初步的開發(fā)框架
　　總結(jié)上面的步驟，我們整理出一個初步的可用的開發(fā)框架，供以后調(diào)用；這里，將服務(wù)器返回的信息用window.alert以字符串的形式顯示出來：

<script language="javascript">
var http_request = false;
function send_request(url) {//初始化、指定處理函數(shù)、發(fā)送請求的函數(shù)
http_request = false;
//開始初始化XMLHttpRequest對象
if(window.XMLHttpRequest) { //Mozilla 瀏覽器
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {//設(shè)置MiME類別
http_request.overrideMimeType("text/xml");
}
}
else if (window.ActiveXObject) { // IE瀏覽器
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) { // 異常，創(chuàng)建對象實例失敗
window.alert("不能創(chuàng)建XMLHttpRequest對象實例.");
return false;
}
http_request.onreadystatechange = processRequest;
// 確定發(fā)送請求的方式和URL以及是否同步執(zhí)行下段代碼
http_request.open("GET", url, true);
http_request.send(null);
}
// 處理返回信息的函數(shù)
function processRequest() {
if (http_request.readyState == 4) { // 判斷對象狀態(tài)
if (http_request.status == 200) { // 信息已經(jīng)成功返回，開始處理信息
alert(http_request.responseText);
} else { //頁面不正常
alert("您所請求的頁面有異常。");
}
}
}
</script>

7.3、簡單的示例
　　接下來，我們利用上面的開發(fā)框架來做兩個簡單的應(yīng)用。

A、數(shù)據(jù)校驗
　　在用戶注冊的表單中，經(jīng)常碰到要檢驗待注冊的用戶名是否唯一。傳統(tǒng)的做法是采用window.open的彈出窗口，或者window. showModalDialog的對話框。不過，這兩個都需要打開窗口。采用AJAX后，采用異步方式直接將參數(shù)提交到服務(wù)器，用window.alert將服務(wù)器返回的校驗信息顯示出來。代碼如下：

　　在<body></body>之間增加一段form表單代碼：

<form name="form1" action="" method="post">

用戶名：<input type="text" name="username" value="">&nbsp;

<input type="button" name="check" value="唯一性檢查" onClick="userCheck()">

<input type="submit" name="submit" value="提交">

</form>

　　在開發(fā)框架的基礎(chǔ)上再增加一個調(diào)用函數(shù)：

function userCheck() {
var f = document.form1;
var username = f.username.value;
if(username=="") {
window.alert("用戶名不能為空。");
f.username.focus();
return false;
}
else {
send_request('sample1_2.jsp?username='+username);
}
}

　　看看sample1_2.jsp做了什么：

<%@ page contentType="text/html; charset=gb2312" errorPage="" %>
<%
String username = request.getParameter("username");
if("educhina".equals(username)) out.print("用戶名已經(jīng)被注冊，請更換一個用戶名。");
else out.print("用戶名尚未被使用，您可以繼續(xù)。");
%>

　　運行一下，嗯，沒有彈出窗口，沒有頁面刷新，跟預(yù)想的效果一樣。如果需要的話，可以在sample1_2.jsp中實現(xiàn)更復(fù)雜的功能。最后，只要將反饋信息打印出來就可以了。

B、級聯(lián)菜單
　　我們在第五部分提到利用AJAX改進(jìn)級聯(lián)菜單的設(shè)計。接下來，我們就演示一下如何“按需取數(shù)據(jù)”。

　　首先，在<body></body>中間增加如下HTML代碼：

<table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="20">
<a href="javascript:void(0)" onClick="showRoles('pos_1')">經(jīng)理室</a>
</td>
</tr>
<tr style="display:none">
<td height="20" id="pos_1"> </td>
</tr>
<tr>
<td height="20">
<a href="javascript:void(0)" onClick="showRoles('pos_2')">開發(fā)部</a>
</td>
</tr>
<tr style="display:none ">
<td id="pos_2" height="20"> </td>
</tr>
</table>

　　在框架的基礎(chǔ)上增加一個響應(yīng)函數(shù)showRoles(obj)：

//顯示部門下的崗位
function showRoles(obj) {
document.getElementById(obj).parentNode.style.display = "";
document.getElementById(obj).innerHTML = "正在讀取數(shù)據(jù)..."
currentPos = obj;
send_request("sample2_2.jsp?playPos="+obj);
}

　　修改框架的processRequest函數(shù)：

// 處理返回信息的函數(shù)
function processRequest() {
if (http_request.readyState == 4) { // 判斷對象狀態(tài)
if (http_request.status == 200) { // 信息已經(jīng)成功返回，開始處理信息
document.getElementById(currentPos).innerHTML = http_request.responseText;
} else { //頁面不正常
alert("您所請求的頁面有異常。");
}
}
}

　　最后就是smaple2_2.jsp了：

<%@ page contentType="text/html; charset=gb2312" errorPage="" %>
<%
String playPos = request.getParameter("playPos");
if("pos_1".equals(playPos))
out.print("&nbsp;&nbsp;總經(jīng)理<br>&nbsp;&nbsp;副總經(jīng)理");
else if("pos_2".equals(playPos))
out.println("&nbsp;&nbsp;總工程師<br>&nbsp;&nbsp;軟件工程師");
%>

　　運行一下看看效果：

7.4、文檔對象模型（DOM）
　　文檔對象模型（DOM）是表示文檔（比如HTML和XML）和訪問、操作構(gòu)成文檔的各種元素的應(yīng)用程序接口（API）。一般的，支持Javascript的所有瀏覽器都支持DOM。本文所涉及的DOM，是指W3C定義的標(biāo)準(zhǔn)的文檔對象模型，它以樹形結(jié)構(gòu)表示HTML和XML文檔，定義了遍歷這個樹和檢查、修改樹的節(jié)點的方法和屬性。