AJAX和XmlHttpRequest下的WEB開發

一、 引言

　　在XMLHttpRequest對象和AJAX給使用者和開發人員帶給巨大好處的同時,也許還有一些問題你沒有考慮到-但是的確到了值得引起每個人注意的時候了。

　　甚至非常討厭的人也都喜歡XMLHttpRequest，因為它提供給程式員真正夢想的功能。也正是因為有了這樣的新技術，Web應用軟體開始變得具有象案頭應用軟體相似的行為。如今，問題總是象"假定為……"那樣地簡單，這把幼稚的終端使用者從需要瞭解服務端、客戶、回寄和提交按鈕-"提交?提交給什麼東西?"-等一系列問題的苦海中解脫出來。

　　最近,無數可怕的案例爆炸式出現在Web上，它們充分說明為什麼遠程指令碼(或稱"AJAX"，如果你喜歡的話)是自從單像素點gif技術以來最偉大的事情。事實上,成串的酷極的、有用的應用軟體正日益增長,象網站Flickr,Google Maps,The WebORB Presentation Server等所宣傳的那樣。

　　這些網站和另外許多地方大肆宣傳AJAX的能力。公正地說,這種技術在提高線上操作的品質方面的確有相當的潛力來。然而,儘管它有許多的優點，但是這個神聖的Web通訊大杯中嗅起來仍然有一股奇怪的味道;就象擺動在我們面前的啤酒和巧克力,仍有一個邪惡的方面存在於其中-表面上看起來是多麼地純潔和天真。

　　這種潛在的邪惡存在於使用者熟悉的操作介面背後的重要的功能性差距之中。你們當中許多人可能已經使用互連網近10年了，並且你知道它怎樣工作:你到處點按滑鼠，填充表單，修改你的輸入;當做完所有這些，你可以點擊提交按鈕。你們都瞭解這些精華經驗-它們從網際網路的一代傳遞到新的一代,如:"不要點按提交按鈕兩次-否則，表單可能要提交兩次"或"等待稍微長一些時間，它正在處理"或"在你提交了表單後,不要點按'向後'按鈕"，等等。

　　但是既然現在AJAX已登堂入室，那麼你可以把基本知識拋出窗外。簡直是"什麼東西都可以"-突然間出現一種新的可被跟蹤的資料-可以在任何時候發送出去，而不需要使用者的任何瞭解，甚至使用者還不瞭解這竟然是可能發生的。每一位骷懇桓鍪蟊暌貧懇幌碌惆詞蟊輳懇淮甕６伲寄鼙徊痘癲⒎⑺偷絎eb伺服器，而你對此無能為力。

　　二、 XMLHttpRequest:利與弊

　　就象許多技術存在利弊一樣，產生這種技術的目的是為了利用其優點。直到如今，XMLHttpRequest帶給人們如此多的優點，諸如不需復原的輸入校正，文本地區的拼字檢查以及Gmail等等，簡直幾乎為人們捧之為神聖。基於AJAX技術建立的介面使用起來非常有趣，甚至編碼更有趣味。簡直很難令人相信，這樣一種神奇的技術竟然能夠做錯事情。

　　但是，即使還沒有發現存在巨大的安全性漏洞，該XMLHttpRequest也有可能因為其外在的優雅而失敗。它很可能會失敗在"使用者輪廓圖"-用於更好的描述之目的-的應用之中。當前,使用者輪廓圖協助Web站主偵探趨勢,跟蹤網頁瀏覽習慣並協助消除使用性問題。但是直到現在，開發人員還只能分析寄回的資料-使用者決定讓伺服器取得的資料並為提交後得到處理而高興。

　　但是通過一種微秒的手段，這種能量平衡會發生易位。通過使用AJAX技術，一個使用者的行為可以被持續地並小心地監控。因為它能被做,所以它將被做;這就帶給人們一個相當頭疼的問題，而不僅僅是浪費頻寬、成兆的垃圾資訊以及更慢的網頁裝載次數的問題。

　　設想一下，這裡僅是舉例說明問題，你把一部新購買的iPod掉到地上去了，結果它停止了工作。抱著希望得到免費的替換的想法，你發了一封電子郵件給Apple公司的售後服務部，信中說:"我剛剛買了一個新牌子的iPod。我不小心把它掉到了樓梯上，它突然停止工作了。"之後，你決定刪去第二句以支援你的理由。太晚了!如果該網站使用了AJAX技術,你的反映可能早就被殺死在了你的抱怨桌前!

　　或者-一個更惡意破壞性的例子-請考慮這種情況:大多數人都有一個或兩個使用者名稱/口令組合以用於他們的"並不重要"的網站，如新聞網站、部落格、論壇等。他們可能還有幾個保留的這種組合以用於更敏感的網站-銀行業務，Web郵件和工作帳號等。在一個給定頁面中輸入不正確的登入細節是非常普通和極易犯的錯誤。雖然他們以前形成的習慣的影響應對此負主要責任，但是在人們點擊提交按鈕前常常是已經意識到他們所做的事情的。

　　不幸的是，一個AJAX擊鍵記錄程式實現起來相當麻煩。使用如此的一個擊鍵記錄程式,就可以用代碼來收集不正確的登入嘗試，然後針對一系列"重要的"網站對之進行實驗-當然，也可以使用XMLHttpRequest對象。

　　三、 "惡意"暗示

　　公平地說,上面引用的大多數的"惡意"應用軟體都能被合理地加以處理，即使在XMLHttpRequest技術出現以前。的確，request對象是一種相對於以前的IFrame技術更為優雅的成功提交表單資料的方法。但是，XMLHttpRequest以一種更為自然的方式工作，這種方式簡直可以能使用戶端與伺服器端的互動差別逐漸消失。

　　具有諷刺意味的是，直到最近，隨著Firefox Web瀏覽器的不斷流行，才使得較多使用者真正瞭解到可以由Web用戶端儲存和控制的資訊的深度和廣度。隨著廣泛採用象Greasemonkey，Web開發人員擴充以及cookie編輯器這樣的工具，人們比以往任何時候更為確信，如果問題發生在用戶端，那麼責任一般應歸咎於該使用者。

　　但是現在,即使象我們這樣狂妄的人也不再只是右擊滑鼠，看一下原始碼，然後就能確信正在發生的事情了。請考慮下面的OnReadyStateChange JavaScript語句，運行它是為了響應一個XMLHttpRequest:

　　xmlReq.onreadystatechange =
　　{
　　if( xmlReq.readyState == 4 )
　　{
　　eval( xmlReq.responseText );
　　}
　　}

　　上面的代碼執行包含在來自於XMLHttpRequest的響應中的JavaScript代碼。換句話說,有可能出現這種情況:即使一個頁面載入完畢，也有可能在後台再進行添加或修改JavaScript函數和代碼!因此就算你觀察該頁面代碼的原始碼-它可能發送了鍵擊或滑鼠移動事件到Web伺服器,你也無法確信你所見的代碼是當前執行的唯一代碼。把這些特徵與一些令人膽戰心驚的困惑結合起來，那麼你可以看到，惡意目的與XMLHttpRequest對象相結合，怎麼不能實現Web客戶的資訊竊取!

　　四、 還不確信?

　　你還不感到害怕並因此而憤怒嗎?還不準備憤起並刪去你的瀏覽器中的XMLHttpRequest代碼嗎?那麼，好，也許本文強勢的措詞論證會嚇倒了你;那麼在遊戲"Fonzie尋寶記"(The Search For 's Treasure。譯者注:在GOOGLE中輸入這幾個關鍵詞，你肯定能找到這個線上文本遊戲，本人沒有深入實驗。難道這個小東西那麼可愛的面孔下竟然埋伏著上面所述的那麼恐怖的……)中-你能夠救出Fonzie嗎?

　　通過使用很有藝術的命令列介面,穿過充滿文本的門廳尋找丟失的Arthur 'Fonzie' Fonzarelli寶藏。祝你幸運，但是請記住…雖然它看上去就象無危害的客戶互動-你每作四次移動，該遊戲通過XMLHttpRequest對象發送一個請求到伺服器上並儲存你的移動。永遠記住:不要做一個印刷工(Don't make a typo);不要嘗試一些愚蠢的東西如"eat jukebox";不要在遊戲中輸入一個使用者名稱和口令字;否則……

XMLHttpRequest詳解

/*
*author Jouy.lu
*/
var xmlHttp; //首先定義一個全域域變數來儲存對象的引用;
function createXMLHttpRequest(){ //該方法用來建立XMLHttpRequest對象的執行個體.
 if(window.ActiveXObject){
  xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
 }else if(window.XMLHttpRequest){
  xmlhttp = new XMLHttpRequest();
 } 
}

考慮到相容瀏覽器的問題：建議的寫法如下：

var xmlhttp;
function createXmlhttp(){
 if(window.XMLHttpRequest){
  xmlhttp = new XMLHttpRequest();
  if (xmlhttp.overrideMimeType){
   xmlhttp.overrideMimeType("text/xml");
  }
  
 }
 else if(window.ActiveXObject){
  try{
   xmlhttp = new  ActiveXObject("Msxml2.XMLHTTP");
  }catch(e){
   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
 if(!xmlhttp){
  window.alert("Your broswer not support XMLHttpRequest!");
 }
 return xmlhttp;
}
/************************************XMLHttpRequest的標準操作*********************
abort():終止當前請求;
getAllResponseHeaders():把HTTP所以響應首部作為鍵/值對返回;
getResponseHeader("header");返回指定首部的串值;
open("POST/GET/PUT","url");建立對伺服器的調用,url參數可以是相對URL或絕對URL,該方法還包含了另三個選擇性參數;
send(content);向伺服器發送請求;
setRequestHeader("header","value");把指定首部設定為所提供的值。在設定任何首部之前必須先調用open()。
 注:
  void open(string method, string url, boolean asynch, string username, string password)：這個方法會建立對伺服器的調用。
 要提供調用的特定方法（GET、POST或PUT），還要提供所調用資源的URL。另外還可以傳遞一個Boolean值，指示這個調用是非同步還是同步的，
 預設值為true，這表示請求本質上是非同步。如果這個參數為false，處理就會等待，直到從伺服器返迴響應為止。由於非同步呼叫是使用Ajax
 的主要優點之一，所以倘若將這個參數設定為false，從某種程度上講與使用XMLHttpRequest對象的初衷不太相符。在某些情況下這,個參數
 設定為false也是有用的，比如在持久儲存頁面之前你可能想先驗證使用者的輸入。最後兩個參數不說自明，允許你指定一個特定的使用者名稱和口令。
  void send(content)：這個方法具體向伺服器發出請求。如果請求聲明為非同步，這個方法就會立即返回，否則它會等待，直到接收到響應
 為止。參數是可選的，可以是一個DOM對象的執行個體、一個輸入資料流，或者是一個串。傳入這個對象的內容會作為請求體的一部分發送。
  void setRequestHeader(string header, string value)：這個方法為HTTP請求中一個給定的首部設定值。它有兩個參數，第一個串表
 示要設定的首部，第二個串表示要在首部中放置的值。需要說明，這個方法必須在open()之後才能調用。在所有這些方法中，最有可能用到
 的就是open()和send()。XMLHttpRequest對象還有許多屬性，在設計Ajax互動時這些屬性非常有用。
  void abort()： 顧名思義，這個方法就是要停止請求。
  string getAllResponseHeaders()： 這個方法的核心功能對Web應用開發人員應該很熟悉了，它會返回一個串，其中包含HTTP請求的所有響
 應首部。首部包括Content-Length、Date和URI。
  string getResponseHeader(string header)：這個方法與getAllResponseHeaders()是對應的，不過它有一個參數來表示你希望得到哪一個
  首部值，並且會把這個值作為一個串返回。
 
 
******************************/
/*******************************標準XMLHttpRequest屬性**********************
onreadystatechange:每個狀態改變時都會觸發這個事件處理器，通常會調用一個JavaScript函數。
readyState:請求的狀態。有5個可取值：0 = 未初始化，1 = 正在載入， 2 = 已載入， 3 = 互動中， 4 = 完成。
responseText:伺服器的響應，表示為一個串。
responseXML:伺服器的響應，表示為XML。這個對象可以解析為一個DOM對象。
status:伺服器的HTTP狀態代碼（200對應OK，404對應Not Found（未找到），等等）.
statusText:HTTP狀態代碼的相應文本（OK或Not Found（未找到）等等）。
***************************************************************************
*/

/*********************來看看到底要怎麼才能發送請求*******
使用XMLHttpRequest對象發送請求的基本步驟如下：
 1.得到XMLHttpRequest對象執行個體的一個引用，為此，可以建立一個新的執行個體，也可以訪問包含有
XMLHttpRequest執行個體的一個變數。
 2.告訴XMLHttpRequest對象，哪個函數會處理XMLHttpRequest對象狀態的改變。為此要把對象的
onreadystatechange屬性設定為指向一個JavaScript函數的指標。
 3. 指定請求的屬性。XMLHttpRequest對象的open()方法會指定將發出的請求。open()方法取3個
 參數：一個是指示所用方法（通常是GET或POST）的串，另一個是表示目標資源URL的串，還有一
個Boolean值，指示請求是否是非同步。
 4. 將請求發送給伺服器。XMLHttpRequest對象的send()方法會把請求傳送到指定的目標資源。
send()方法接受一個參數，這通常是一個串或一個DOM對象。這個參數會作為請求體的一部分傳送到
目標URL.向send()方法提供參數時，要確保open()中指定的方法是POST。如果沒有資料要作為請求體
的一部分發送，則使用null。

非同步方式給使用者帶來的體驗:(我想程式員看到這段解釋,心裡真的很爽!)
 對伺服器的請求是非同步發送的，因此瀏覽器可以繼續響應使用者輸入，並在後台等待伺服器的響應。
如果選擇同步操作，而且倘若伺服器的響應要花好幾秒才能到達，瀏覽器就會表現得很遲鈍，在
等待期間不能響應使用者的輸入。這樣一來，瀏覽器好像被凍住一樣，無法響應使用者輸入，而非同步
做法可以避免這種情況，從而讓終端使用者有更好的體驗，儘管這種改善很細微，但確實很有意義。
這樣使用者就能繼續工作，而且伺服器會在幕後處理先前的請求。能與伺服器通訊而不打斷使用者的
工作流程，這樣就可以採用很多技術來改善使用者體驗。例如，假設有一個驗證使用者輸入的應用。用
戶在輸入表單上填寫各個域時，瀏覽器可以定期地向伺服器發送表單值來進行驗證，此時並不打
斷使用者，他還可以繼續填寫餘下的表單域。如果某個驗證規則失敗，使用者會立即得到通知，而不
必等表單真正發送到伺服器進行處理時才知道有錯誤，這就能大大節省使用者的時間，也能減輕服
務器上的負載壓力，因為不必在表單提交不成功時完全重建表單的內容。

下面是說明安全問題的:
 XMLHttpRequest對象要受制於瀏覽器的安全“沙箱”。XMLHttpRequest對象請求的所有資源
都必須與呼叫指令碼在同一個域（domain）內。這個安全限制使得XMLHttpRequest對象不能請
求指令碼所在域之外的資源。這個安全限制的強度如何因瀏覽器而異（見圖2-5）。Internet Explorer
會顯示一個警告，指出可能存在一個安全風險，但是使用者可以選擇是否繼續發出請求。Firefox則
會斷然停止請求，並在JavaScript控制台顯示一個錯誤訊息。Firefox確實提供了一些JavaScript技巧，
使得XMLHttpRequest也可以請求外部URL的資源。不過，由於這些技術針對特定的瀏覽器，最好不要用，
而且要避免使用XMLHttpRequest訪問外部URL。
 
**********************************************************
*/

XMLHttpRequest成員屬性

onreadystatechange*	指定當readyState屬性改變時的事件處理控制代碼。唯寫
readyState	返回當前請求的狀態，唯讀.
responseBody	將回應資訊本文以unsigned byte數組形式返回.唯讀
responseStream	以Ado Stream對象的形式返迴響應資訊。唯讀
responseText	將響應資訊作為字串返回.唯讀
responseXML	將響應資訊格式化為Xml Document對象並返回，唯讀
status	返回當前請求的http狀態代碼.唯讀
statusText	返回當前請求的響應行狀態，唯讀

* 表示此屬性是W3C文件物件模型的擴充.

方法

abort	取消當前請求
getAllResponseHeaders	擷取響應的所有http頭
getResponseHeader	從響應資訊中擷取指定的http頭
open	建立一個新的http請求，並指定此請求的方法、URL以及驗證資訊(使用者名稱/密碼)
send	發送請求到http伺服器並接收回應
setRequestHeader	單獨指定請求的某個http頭