| 作者： Chris Duckett, Builder AU 2006-08-22 02:55 PM | ||
|
盡管AJAX是個相對新生的術語，但其背后的技術卻并不新穎。隨著XMLHttpRequest對象在大多數(shù)瀏覽器中的實現(xiàn)，以及GMail和Google Maps的出現(xiàn)激發(fā)了軟件開發(fā)者重新考慮如何構建網(wǎng)頁的靈感。我們從基礎開始認識AJAX，一種顛覆性的技術，其改變了Web應用程序的開發(fā)和應用方式，使得交互性頁面和網(wǎng)站處于目前網(wǎng)絡潮流的最前沿。 當請求被發(fā)送到瀏覽器后，其所具有的改變網(wǎng)頁內(nèi)容的功能已經(jīng)存在許多年了-使用javascript腳本改變iframe‘s src屬性是技術之一。 XMLHttpRequest對象 XMLHttpRequest對象使AJAX的出現(xiàn)成為可能，它產(chǎn)生異步請求，并決定如何處理結果。在大多數(shù)瀏覽器中，我們使用如下代碼來創(chuàng)建對象： var xmlhttp = false; try { xmlhttp = new XMLHttpRequest(); } catch (e) { alert("cannot create object"); } 不幸的是，上文中所提到的“大多數(shù)瀏覽器”并不包括IE,因此對于微軟的瀏覽器，我們需要采用一種特殊的方法創(chuàng)建對象。值得注意的是，根據(jù)MSXML解析器的不同版本，需要分別編寫兩種代碼。 var xmlhttp = false; try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (othermicrosoft) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (failed) { xmlhttp = false; } 因此，結合上述兩個代碼片段，我們得到了以下適合所有主流瀏覽器創(chuàng)建XMLHttpRequest對象的代碼： var xmlhttp = false; try { xmlhttp = new XMLHttpRequest(); } catch (trymicrosoft) { try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (othermicrosoft) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (failed) { xmlhttp = false; } } } |
創(chuàng)建時間選擇
既然我們已經(jīng)知道如何創(chuàng)建XMLHttpRequest，那么還需要考慮何時來創(chuàng)建。在XMLHttpRequest對象創(chuàng)建的示例中，盡管我們事先沒有發(fā)送任何請求，但仍可以創(chuàng)建成功，也就是說，我們可以在需要的時候創(chuàng)建對象。
當你需要創(chuàng)建XMLHttpRequest對象時，面對的一個問題是沒有信息顯示客戶能否創(chuàng)建該對象。假設一個用戶訪問你的網(wǎng)站并且無法創(chuàng)建XMLHttpRequest對象，如果能從第一時間就知道AJAX沒有被選擇，你就可以更早地提供給他們。
對于一個開始與你的Web應用程序進行互動的用戶，當他們被告知只有點擊提交按鈕才能使用該程序時，這決不是一件好事，讓他們填寫表單也是完全在浪費時間。
然而如果在頁面打開階段就能試圖創(chuàng)建XMLHttpRequest，在用戶開始互動之前就提供選擇，比如轉入非AJAX頁面。
設置請求
眼下，有一個頁面在加載后就需要創(chuàng)建XMLHttpRequest對象，我們現(xiàn)在有意做出請求。
為此，我們必須向打開方式傳遞至少兩個參數(shù)，其中大部分參數(shù)的含義都可以直接理解。
xmlhttp.open(Method, Url [, Async] [, User] [, Password])
參數(shù)Method定義了請求方法；可選擇的有"POST", "GET" 或 "HEAD"。首先，我們只準備使用GET。
Url是要請求頁面的url字符串。我們無法訪問和向舊頁面做出請求，有一個阻止我們訪問與所創(chuàng)建請求頁面不在同一范圍內(nèi)的其他頁面的壁壘。
Async也是AJAX建立的基礎。盡管前者在API中是一個備選參數(shù)，但在這里該參數(shù)是強制性選項，必須設置為true，如果設為false，該項將保持直到獲得響應。該參數(shù)的默認值是True，所以你可以選擇不設置，但是考慮到可讀性以及可維護性，強烈推薦設置該值。
用戶名和密碼用于驗證身份時選擇
一旦我們設置Async為true,我們需要定義一種命令方式，用于回應請求狀態(tài)改變-可以通過設置XMLHttpRequest對象中的onreadystatechange屬性完成。
xmlhttp.onreadystatechange = myReturnMethod;
xmlhttp.send(null);
最后需要做的是把請求發(fā)送出去，先說最簡單的，我們只發(fā)送不含任何附加數(shù)據(jù)的請求：
在一個簡單的示例中綜合了上述所有內(nèi)容：
xmlhttp.open("GET", "/some_dir/myfile.html", true);
xmlhttp.onreadystatechange = myReturnMethod;
xmlhttp.send(null);
上述三行代碼就是我們進入AJAX世界所需要的全部內(nèi)容，沒有包含任何復雜的概念或曲折的邏輯
對象狀態(tài)
上文中提到過，我們需要定義一種命令方式，用于回應請求狀態(tài)改變，這可以通過設置onreadystatechange屬性完成，請注意我所說的是“狀態(tài)改變”，并不是“完成”-因為這兩者之間是完全不同的。結合我們剛才所學的知識，最好通過例子來說明。寫入如下代碼：
<script>
var xmlhttp = false;
try {
xmlhttp = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
xmlhttp = false;
}
}
}
function goAJAX() {
alert("InitialReadyState is:"+xmlhttp.readyState);
xmlhttp.onreadystatechange = myReturnMethod;
xmlhttp.open("GET", "another_file.html", true);
xmlhttp.send(null);
}
function myReturnMethod() {
alert("NewReadyState is:"+xmlhttp.readyState);
}
</script>
<button onclick="javascript:goAJAX()">Let‘s try it!</button>
在被請求的文件中，我們可以填補任何我們想要的內(nèi)容，只要可以建立，我們就不打算使用其中的內(nèi)容。
點提交按鈕前，我們還應該注意，對象狀態(tài)警告出現(xiàn)多次，最終顯示的對象狀態(tài)值是4。不同的瀏覽器對此的處理方法不同，Safari精確地從0-4計數(shù)，對于firefox，1出現(xiàn)兩次，0只在運行的第一次出現(xiàn)。值得慶幸的是，我們僅僅對readyState是4的情況感興趣，但是為了完整性，我們還是看看其他數(shù)字所代表的含義。
0：未初始化-打開命令之前，對象不包含數(shù)據(jù)
1：對象正在加載數(shù)據(jù)-發(fā)送請求命令之前
2：加載完畢-請求已經(jīng)被發(fā)出
3：交互-請求正在被處理，可能會得到一些數(shù)據(jù)，但不完全，所以不能安全使用
4：完成-請求已完成，最終數(shù)據(jù)可以安全使用。
這些新信息說明，只有在警告顯示請求完成后，才能改變myReturnMethod。
function myReturnMethod() {
if (xmlhttp.readyState==4){
alert("NewReadyState is:"+xmlhttp.readyState);
}
響應狀況
采用先前的代碼，我們改變open method中的url參數(shù)到一個不存在的文件中：
xmlhttp.open("GET", "filethatdoesnotexist.html", true);
再次運行該代碼，我們看到和先前的代碼執(zhí)行了相同的結果-為什么會這樣？
如果這是一個正常http請求，我們預計404錯誤會出現(xiàn)-在AJAX中也具有相同的狀況屬性。該屬性僅可讀，包含HTTP請求狀況代碼，我們這里的文件對應的代碼是404。應用于一般http請求的相同狀況代碼仍適用AJAX。（注意：為了正常運行，頁面應該讀取來自一個HTTP服務器的請求，如果從文件系統(tǒng)中讀取，該狀況代碼將始終是未定義的。）
因此，我們需要增加一個if陳述，用來測試請求是否成功，如果是一個200的響應代碼，將被成功返回。如果不成功，我們必須選擇恰當?shù)姆绞絹斫鉀Q錯誤。
function myReturnMethod() {
if (xmlhttp.readyState==4){
if (xmlhttp.status == 200) {
alert("Request successfully completed");
}
else if(xmlhttp.status == 404) {
alert("Requested file not found");
}
else {
alert("Error has occurred with status code:
"+xmlhttp.status);
}
}
}
ResponseText與responseXML
盡管我們已經(jīng)可以成功地完成一個AJAX請求，但還需要對返回的數(shù)據(jù)做出處理。通過應用responseText 或responseXML屬性，我們有兩種處理的方式。最簡單的方法是直接獲取從服務器返回的數(shù)據(jù)，使用responseText屬性中返回的純文本數(shù)據(jù)。這樣得到的數(shù)據(jù)可以是任何我們想要的形式；簡單的文本響應，符號劃界值或一整本字符串名冊。在我們的返回方法中，我們將在警告中輸出responseText，這將輸出我們請求的整個文件內(nèi)容。
在這個階段，如果你還沒有向我們發(fā)出請求的文件- another_file.html中輸入任何內(nèi)容，你應該做了。
function myReturnMethod() {
if (xmlhttp.readyState==4){
if (xmlhttp.status == 200) {
alert(xmlhttp.responseText);
}
else if(xmlhttp.status == 404) {
alert("Requested file not found");
}
else {
alert("Error has occurred with status code:
"+xmlhttp.status);
}
}
}
另一個可供選擇的找回返回數(shù)據(jù)的方法是使用responseXML屬性，其將以XML文檔對象的形式返回數(shù)據(jù)，利用Javascript的DOM功能可以對其研究。為了看到這一動作的結果，我們需要返回一個恰當?shù)腦ML格式文檔；我們就創(chuàng)建一個新文件來請求(xmlresult.html), 并寫入以下代碼：
<?xml version="1.0" encoding="UTF-8"?>
<root>
XML Formatted Result
</root>
然后我們需要將打開命令改為：
xmlhttp.open("GET", "xmlresult.html", true);
在我們的返回方法中所作的最大改變是，我們需要在那里替換警告(xmlhttp.responseText)，代碼如下：
xmldoc = xmlhttp.responseXML;
rootnode = xmldoc.getElementsByTagName(‘root‘).item(0);
alert(rootnode.firstChild.data);
瞧，我們正在利用DOM來返回數(shù)據(jù)。
通過結合我們所了解到的現(xiàn)有的javascript功能，該數(shù)據(jù)可被用于應付一個頁面的內(nèi)容。例如：
document.getElementById(‘resultdiv‘).innerHTML = xmlhttp.responseText;
何時使用AJAX
既然已經(jīng)知道如何創(chuàng)建一個請求以及返回結果，那么還有一個問題是何時該使用AJAX呢？
對于一項新技術自然會有兩方面的極端意見，一些網(wǎng)絡開發(fā)者認為，如果沒有AJAX，生活將變得更簡單；另一些人則巴不得見到由AJAX構建的整個網(wǎng)站。通常這種情況下，真理往往介于這兩種觀點之間。當決定在你的網(wǎng)站上使用AJAX時，你也應當考慮其中帶來的后果。首先，所有應用了AJAX的頁面無法加入書簽。隨著AJAX的使用，也為你的網(wǎng)站引入了一種“狀態(tài)”，而除了初始頁面外，用戶無法返回到任何其他頁面。
原因是在用戶的瀏覽器上url沒有改變-如果其發(fā)生改變，AJAX就沒有存在的必要了。
其次，如果想要支持每一位訪問網(wǎng)站的用戶，就需要付出雙倍的工作。對于你創(chuàng)建使用AJAX網(wǎng)站的每個片段，你都必須迎合沒有javascript功能用戶的需要。如果為了javascript和非javascript用戶具有相同的頁面級別，需要做大量額外的工作，必須使用noscript標簽。也就是說，AJAX通過減少瀏覽和交互時所需要的頁面重載次數(shù)，從而提高了網(wǎng)站的可用性。結合javascript效果庫，我們可以創(chuàng)建一些非常引人注目的頁面交互功能，這在兩年前是不可能實現(xiàn)的。因此，我的觀點是在你的網(wǎng)站的非主要位置使用AJAX。例如，在某個網(wǎng)站，如果將AJAX結構應用到文章中將是極其錯誤的想法，因為你再也無法將未讀完的文章加入書簽。另一方面，一種文章評論或對話系統(tǒng)則非常適合應用AJAX。
責任編輯：張琎
