強烈推薦-ajax開發人員必看的文章第1/3頁

七、AJAX開發
　　到這裡，已經可以清楚的知道AJAX是什麼，AJAX能做什麼，AJAX什麼地方不好。如果你覺得AJAX真的能給你的開發工作帶來改進的話，那麼繼續看看怎麼使用AJAX吧。

7.1、AJAX應用到的技術
　　AJAX涉及到的7項技術中，個人認為Javascript、XMLHttpRequest、DOM、XML比較有用。

A、XMLHttpRequest對象
　　XMLHttpRequest是XMLHTTP組件的對象，通過這個對象，AJAX可以像傳統型應用程式一樣只同伺服器進行資料層面的交換，而不用每次都重新整理介面，也不用每次將資料處理的工作都交給伺服器來做；這樣既減輕了伺服器負擔又加快了響應速度、縮短了使用者等待的時間。

　　IE5.0開始，開發人員可以在Web頁面內部使用XMLHTTP ActiveX組件擴充自身的功能，不用從當前的Web頁面導航就可以直接傳輸資料到伺服器或者從伺服器接收資料。,Mozilla1.0以及NetScape7則是建立繼承XML的代理類XMLHttpRequest；對於大多數情況，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()	停止當前請求
getAllResponseHeaders()	作為字串返回完整的headers
getResponseHeader("headerLabel")	作為字串返回單個的header標籤
open("method","URL"[,asyncFlag[,"userName"[, "password"]]])	設定未決的請求的目標 URL，方法，和其他參數
send(content)	發送請求
setRequestHeader("label", "value")	設定header並和請求一起發送

　　XMLHttpRequest對象的屬性：

屬性	描述
onreadystatechange	狀態改變的事件觸發程序
readyState	對象狀態(integer): 0 = 未初始化 1 = 讀取中 2 = 已讀取 3 = 互動中 4 = 完成
responseText	伺服器處理序返回資料的文本版本
responseXML	伺服器處理序返回資料的相容DOM的XML文檔對象
status	伺服器返回的狀態代碼, 如：404 = "檔案未找到" 、200 ="成功"
statusText	伺服器返回的狀態文本資訊

B、Javascript
　　 Javascript一直被定位為用戶端的指令碼語言，應用最多的地方是表單資料的校正。現在，可以通過Javascript操作XMLHttpRequest，來跟資料庫打交道。

C、DOM
　　 DOM（Document Object Model）是提供給HTML和XML使用的一組API，提供了檔案的表述結構，並可以利用它改變其中的內容和可見物。指令碼語言通過DOM才可以跟頁面進行互動。Web開發人員可操作及建立檔案的屬性、方法以及事件都以對象來展現。比如，document就代表頁面對象本身。

D、XML
　　通過XML（Extensible Markup Language），可以規範的定義結構化資料，是網上傳輸的資料和文檔符合統一的標準。用XML表述的資料和文檔，可以很容易的讓所有程式共用。

7.2、AJAX開發架構
　　這裡，我們通過一步步的解析，來形成一個發送和接收XMLHttpRequest請求的程式架構。AJAX實質上也是遵循Request/Server模式，所以這個架構基本的流程也是：對象初始化à發送請求à伺服器接收à伺服器返回à用戶端接收à修改用戶端頁面內容。只不過這個過程是非同步。

A、初始化對象並發出XMLHttpRequest請求
　　為了讓Javascript可以向伺服器發送HTTP請求，必須使用XMLHttpRequest對象。使用之前，要先將XMLHttpRequest對象執行個體化。之前說過，各個瀏覽器對這個執行個體化過程實現不同。IE以ActiveX控制項的形式提供，而Mozilla等瀏覽器則直接以XMLHttpRequest類的形式提供。為了讓編寫的程式能夠跨瀏覽器運行，要這樣寫：

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

　　有些版本的Mozilla瀏覽器處理伺服器返回的未包含XML mime-type頭部資訊的內容時會出錯。因此，要確保返回的內容包含text/xml資訊。

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

B、指定響應處理函數
　　接下來要指定當伺服器返回資訊時用戶端的處理方式。只要將相應的處理函數名稱賦給XMLHttpRequest對象的onreadystatechange屬性就可以了。比如：

http_request.onreadystatechange = processRequest;

　　需要指出的時，這個函數名稱不加括弧，不指定參數。也可以用Javascript即時定義函數的方式定義響應函數。比如：

http_request.onreadystatechange = function() { };

C、發出HTTP請求

　　指定響應處理函數之後，就可以向伺服器發出HTTP請求了。這一步調用XMLHttpRequest對象的open和send方法。

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

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

　　open的第二個參數是目標URL。基於安全考慮，這個URL只能是同網域的，否則會提示“沒有許可權”的錯誤。這個URL可以是任何的URL，包括需要伺服器解釋執行的頁面，不僅僅是靜態頁面。目標URL處理請求XMLHttpRequest請求則跟處理普通的HTTP請求一樣，比如JSP可以用request.getParameter(“”)或者request.getAttribute(“”)來取得URL參數值。

　　open的第三個參數只是指定在等待伺服器返回資訊的時間內是否繼續執行下面的代碼。如果為True，則不會繼續執行，直到伺服器返回資訊。預設為True。

　　按照順序，open調用完畢之後要調用send方法。send的參數如果是以Post方式發出的話，可以是任何想傳給伺服器的內容。不過，跟form一樣，如果要傳檔案或者Post內容給伺服器，必須先調用setRequestHeader方法，修改MIME類別。如下：

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

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

name=value&anothername=othervalue&so=on

D、處理伺服器返回的資訊
　　在第二步我們已經指定了響應處理函數，這一步，來看看這個響應處理函數都應該做什麼。

　　首先，它要檢查XMLHttpRequest對象的readyState值，判斷請求目前的狀態。參照前文的屬性工作表可以知道，readyState值為4的時候，代表格服務器已經傳回所有的資訊，可以開始處理資訊並更新頁面內容了。如下：

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

　　伺服器返回資訊後，還需要判斷返回的HTTP狀態代碼，確定返回的頁面沒有錯誤。所有的狀態代碼都可以在W3C的官方網站上查到。其中，200代表頁面正常。

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

　　XMLHttpRequest對成功返回的資訊有兩種處理方式：
　　 responseText：將傳回的資訊當字串使用；
　　 responseXML：將傳回的資訊當XML文檔使用，可以用DOM處理。

E、一個初步的開發架構
　　總結上面的步驟，我們整理出一個初步的可用的開發架構，供以後調用；這裡，將伺服器返回的資訊用window.alert以字串的形式顯示出來：

<script language="javascript">var http_request = false;function send_request(url) {//初始化、指定處理函數、發送請求的函數http_request = false;//開始初始化XMLHttpRequest對象if(window.XMLHttpRequest) { //Mozilla 瀏覽器http_request = new XMLHttpRequest();if (http_request.overrideMimeType) {//設定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) { // 異常，建立對象執行個體失敗window.alert("不能建立XMLHttpRequest對象執行個體.");return false;}http_request.onreadystatechange = processRequest;// 確定發送請求的方式和URL以及是否同步執行下段代碼http_request.open("GET", url, true);http_request.send(null);}// 處理返回資訊的函數function processRequest() {if (http_request.readyState == 4) { // 判斷對象狀態if (http_request.status == 200) { // 資訊已經成功返回，開始處理資訊alert(http_request.responseText);} else { //頁面不正常alert("您所請求的頁面有異常。");}}}</script>

7.3、簡單的樣本
　　接下來，我們利用上面的開發架構來做兩個簡單的應用。

A、資料校正
　　在使用者註冊的表單中，經常碰到要檢驗待註冊的使用者名稱是否唯一。傳統的做法是採用window.open的快顯視窗，或者window. showModalDialog的對話方塊。不過，這兩個都需要開啟視窗。採用AJAX後，採用非同步方式直接將參數提交到伺服器，用window.alert將伺服器返回的校正資訊顯示出來。代碼如下：

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

<form name="form1" action="" method="post">
使用者名稱：<input type="text" name="username" value=""> 
<input type="button" name="check" value="唯一性檢查" onClick="userCheck()">
<input type="submit" name="submit" value="提交">
</form>

　　在開發架構的基礎上再增加一個調用函數：

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("使用者名稱已經被註冊，請更換一個使用者名稱。");else out.print("使用者名稱尚未被使用，您可以繼續。");%>

　　運行一下，嗯，沒有快顯視窗，沒有頁面重新整理，跟預想的效果一樣。如果需要的話，可以在sample1_2.jsp中實現更複雜的功能。最後，只要將反饋資訊列印出來就可以了。

B、串聯功能表
　　我們在第五部分提到利用AJAX改進串聯功能表的設計。接下來，我們就示範一下如何“按需取資料”。

　　首先，在<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')">經理室</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')">開發部</a></td></tr><tr style="display:none "><td id="pos_2" height="20"> </td></tr></table>

　　在架構的基礎上增加一個響應函數showRoles(obj)：

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

　　修改架構的processRequest函數：

// 處理返回資訊的函數function processRequest() {if (http_request.readyState == 4) { // 判斷對象狀態if (http_request.status == 200) { // 資訊已經成功返回，開始處理資訊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("  總經理<br>  副總經理");else if("pos_2".equals(playPos))out.println("  總工程師<br>  軟體工程師");
%>

　　運行一下看看效果：

7.4、文件物件模型（DOM）
　　文件物件模型（DOM）是表示文檔（比如HTML和XML）和訪問、操作構成文檔的各種元素的應用程式介面（API）。一般的，支援Javascript的所有瀏覽器都支援DOM。本文所涉及的DOM，是指W3C定義的標準的文件物件模型，它以樹形結構表示HTML和XML文檔，定義了遍曆這個樹和檢查、修改樹的節點的方法和屬性。