使用xmlhttprequest對(duì)象小結(jié).doc

2.1 XMLHttpRequest對(duì)象概述 / 2006-5-16 10:56:00 圖書導(dǎo)讀 當(dāng)前章節(jié):2.1 XMLHttpRequest對(duì)象概述 1.6 使用場(chǎng)合1.7 設(shè)計(jì)考慮 1.8 小結(jié) 2.2 方法和屬性2.3 交互示例 2.4 GET與POST在使用XMLHttpRequest對(duì)象發(fā)送請(qǐng)求和處理響應(yīng)之前，必須先用JavaScript創(chuàng)建一個(gè)XMLHttpRequest對(duì)象。由于XMLHttpRequest不是一個(gè)W3C標(biāo)準(zhǔn)，所以可以采用多種方法使用JavaScript來創(chuàng)建XMLHttpRequest的實(shí)例。Internet Explorer把XMLHttpRequest實(shí)現(xiàn)為一個(gè)ActiveX對(duì)象，其他瀏覽器（如Firefox、Safari和Opera）把它實(shí)現(xiàn)為一個(gè)本地JavaScript對(duì)象。由于存在這些差別，JavaScript代碼中必須包含有關(guān)的邏輯，從而使用ActiveX技術(shù)或者使用本地JavaScript對(duì)象技術(shù)來創(chuàng)建XMLHttpRequest的一個(gè)實(shí)例。很多人可能還記得從前的那段日子，那時(shí)不同瀏覽器上的JavaScript和DOM實(shí)現(xiàn)簡(jiǎn)直千差萬別，聽了上面這段話之后，這些人可能又會(huì)不寒而栗。幸運(yùn)的是，在這里為了明確該如何創(chuàng)建XMLHttpRequest對(duì)象的實(shí)例，并不需要那么詳細(xì)地編寫代碼來區(qū)別瀏覽器類型。你要做的只是檢查瀏覽器是否提供對(duì)ActiveX對(duì)象的支持。如果瀏覽器支持ActiveX對(duì)象，就可以使用ActiveX來創(chuàng)建XMLHttpRequest對(duì)象。否則，就要使用本地JavaScript對(duì)象技術(shù)來創(chuàng)建。代碼清單2-1展示了編寫跨瀏覽器的JavaScript代碼來創(chuàng)建XMLHttpRequest對(duì)象實(shí)例是多么簡(jiǎn)單。代碼清單2-1創(chuàng)建XMLHttpRequest對(duì)象的一個(gè)實(shí)例var xmlHttp;function createXMLHttpRequest() if (window.ActiveXObject) xmlHttp = new ActiveXObject(Microsoft.XMLHTTP); else if (window.XMLHttpRequest) xmlHttp = new XMLHttpRequest(); 可以看到，創(chuàng)建XMLHttpRequest對(duì)象相當(dāng)容易。首先，要?jiǎng)?chuàng)建一個(gè)全局作用域變量xmlHttp來保存這個(gè)對(duì)象的引用。createXMLHttpRequest方法完成創(chuàng)建XMLHttpRequest實(shí)例的具體工作。這個(gè)方法中只有簡(jiǎn)單的分支邏輯（選擇邏輯）來確定如何創(chuàng)建對(duì)象。對(duì)window.ActiveXObject的調(diào)用會(huì)返回一個(gè)對(duì)象，也可能返回null，if語句會(huì)把調(diào)用返回的結(jié)果看作是true或false（如果返回對(duì)象則為true，返回null則為false），以此指示瀏覽器是否支持ActiveX控件，相應(yīng)地得知瀏覽器是不是Internet Explorer。如果確實(shí)是，則通過實(shí)例化ActiveXObject的一個(gè)新實(shí)例來創(chuàng)建XMLHttpRequest對(duì)象，并傳入一個(gè)串指示要?jiǎng)?chuàng)建何種類型的ActiveX對(duì)象。在這個(gè)例子中，為構(gòu)造函數(shù)提供的字符串是Microsoft.XMLHTTP，這說明你想創(chuàng)建XMLHttpRequest的一個(gè)實(shí)例。如果window.ActiveXObject調(diào)用失?。ǚ祷豱ull），JavaScript就會(huì)轉(zhuǎn)到else語句分支，確定瀏覽器是否把XMLHttpRequest實(shí)現(xiàn)為一個(gè)本地JavaScript對(duì)象。如果存在window.XMLHttpRequest，就會(huì)創(chuàng)建XMLHttpRequest的一個(gè)實(shí)例。由于JavaScript具有動(dòng)態(tài)類型特性，而且XMLHttpRequest在不同瀏覽器上的實(shí)現(xiàn)是兼容的，所以可以用同樣的方式訪問XMLHttpRequest實(shí)例的屬性和方法，而不論這個(gè)實(shí)例創(chuàng)建的方法是什么。這就大大簡(jiǎn)化了開發(fā)過程，而且在JavaScript中也不必編寫特定于瀏覽器的邏輯。2.2 方法和屬性 / 2006-5-16 10:56:00 圖書導(dǎo)讀 當(dāng)前章節(jié):2.2 方法和屬性1.7 設(shè)計(jì)考慮 1.8 小結(jié) 2.1 XMLHttpRequest對(duì)象概述 2.3 交互示例 2.4 GET與POST2.5 遠(yuǎn)程腳本表2-1顯示了XMLHttpRequest對(duì)象的一些典型方法。不要擔(dān)心，稍后就會(huì)詳細(xì)介紹這些方法。表2-1標(biāo)準(zhǔn)XMLHttpRequest操作方 法描 述abort()停止當(dāng)前請(qǐng)求getAllResponseHeaders()把HTTP請(qǐng)求的所有響應(yīng)首部作為鍵/值對(duì)返回getResponseHeader(header)返回指定首部的串值open(method, url)建立對(duì)服務(wù)器的調(diào)用。method參數(shù)可以是GET、POST或PUT。url參數(shù)可以是相對(duì)URL或絕對(duì)URL。這個(gè)方法還包括3個(gè)可選的參數(shù)send(content)向服務(wù)器發(fā)送請(qǐng)求setRequestHeader(header, value)把指定首部設(shè)置為所提供的值。在設(shè)置任何首部之前必須先調(diào)用open()下面來更詳細(xì)地討論這些方法。void open(string method, string url, boolean asynch, string username, string password)：這個(gè)方法會(huì)建立對(duì)服務(wù)器的調(diào)用。這是初始化一個(gè)請(qǐng)求的純腳本方法。它有兩個(gè)必要的參數(shù)，還有3個(gè)可選參數(shù)。要提供調(diào)用的特定方法（GET、POST或PUT），還要提供所調(diào)用資源的URL。另外還可以傳遞一個(gè)Boolean值，指示這個(gè)調(diào)用是異步的還是同步的。默認(rèn)值為true，表示請(qǐng)求本質(zhì)上是異步的。如果這個(gè)參數(shù)為false，處理就會(huì)等待，直到從服務(wù)器返回響應(yīng)為止。由于異步調(diào)用是使用Ajax的主要優(yōu)勢(shì)之一，所以倘若將這個(gè)參數(shù)設(shè)置為false，從某種程度上講與使用XMLHttpRequest對(duì)象的初衷不太相符。不過，前面已經(jīng)說過，在某些情況下這個(gè)參數(shù)設(shè)置為false也是有用的，比如在持久存儲(chǔ)頁面之前可以先驗(yàn)證用戶的輸入。最后兩個(gè)參數(shù)不說自明，允許你指定一個(gè)特定的用戶名和密碼。void send(content)：這個(gè)方法具體向服務(wù)器發(fā)出請(qǐng)求。如果請(qǐng)求聲明為異步的，這個(gè)方法就會(huì)立即返回，否則它會(huì)等待直到接收到響應(yīng)為止?？蛇x參數(shù)可以是DOM對(duì)象的實(shí)例、輸入流，或者串。傳入這個(gè)方法的內(nèi)容會(huì)作為請(qǐng)求體的一部分發(fā)送。void setRequestHeader(string header, string value)：這個(gè)方法為HTTP請(qǐng)求中一個(gè)給定的首部設(shè)置值。它有兩個(gè)參數(shù)，第一個(gè)串表示要設(shè)置的首部，第二個(gè)串表示要在首部中放置的值。需要說明，這個(gè)方法必須在調(diào)用open()之后才能調(diào)用。在所有這些方法中，最有可能用到的就是open()和send()。XMLHttpRequest對(duì)象還有許多屬性，在設(shè)計(jì)Ajax交互時(shí)這些屬性非常有用。void abort()：顧名思義，這個(gè)方法就是要停止請(qǐng)求。string getAllResponseHeaders()：這個(gè)方法的核心功能對(duì)Web應(yīng)用開發(fā)人員應(yīng)該很熟悉了，它返回一個(gè)串，其中包含HTTP請(qǐng)求的所有響應(yīng)首部，首部包括Content-Length、Date和URI。string getResponseHeader(string header)：這個(gè)方法與getAllResponseHeaders()是對(duì)應(yīng)的，不過它有一個(gè)參數(shù)表示你希望得到的指定首部值，并且把這個(gè)值作為串返回。除了這些標(biāo)準(zhǔn)方法，XMLHttpRequest對(duì)象還提供了許多屬性，如表2-2所示。處理XMLHttpRequest時(shí)可以大量使用這些屬性。表2-2標(biāo)準(zhǔn)XMLHttpRequest屬性屬 性描 述onreadystatechange每個(gè)狀態(tài)改變時(shí)都會(huì)觸發(fā)這個(gè)事件處理器，通常會(huì)調(diào)用一個(gè)JavaScript函數(shù)readyState請(qǐng)求的狀態(tài)。有5個(gè)可取值：0 = 未初始化，1 = 正在加載，2 = 已加載，3 = 交互中，4 = 完成responseText服務(wù)器的響應(yīng)，表示為一個(gè)串responseXML服務(wù)器的響應(yīng)，表示為XML。這個(gè)對(duì)象可以解析為一個(gè)DOM對(duì)象status服務(wù)器的HTTP狀態(tài)碼（200對(duì)應(yīng)OK，404對(duì)應(yīng)Not Found（未找到），等等）statusTextHTTP狀態(tài)碼的相應(yīng)文本（OK或Not Found（未找到）等等）2.3 交互示例 / 2006-5-16 10:56:00 圖書導(dǎo)讀 當(dāng)前章節(jié):2.3 交互示例 1.8 小結(jié) 2.1 XMLHttpRequest對(duì)象概述 2.2 方法和屬性2.4 GET與POST2.5 遠(yuǎn)程腳本2.6 如何發(fā)送簡(jiǎn)單請(qǐng)求 看到這里，你可能想知道典型的Ajax交互是什么樣。圖2-1顯示了Ajax應(yīng)用中標(biāo)準(zhǔn)的交互模式。圖2-1標(biāo)準(zhǔn)Ajax交互不同于標(biāo)準(zhǔn)Web客戶中所用的標(biāo)準(zhǔn)請(qǐng)求/響應(yīng)方法，Ajax應(yīng)用的做法稍有差別。1. 一個(gè)客戶端事件觸發(fā)一個(gè)Ajax事件。從簡(jiǎn)單的onchange事件到某個(gè)特定的用戶動(dòng)作，很多這樣的事件都可以觸發(fā)Ajax事件?？梢杂腥缦碌拇a：2. 創(chuàng)建XMLHttpRequest對(duì)象的一個(gè)實(shí)例。使用open()方法建立調(diào)用，并設(shè)置URL以及所希望的HTTP方法（通常是GET或POST）。請(qǐng)求實(shí)際上通過一個(gè)send()方法調(diào)用觸發(fā)?？赡艿拇a如下所示：var xmlHttp;function validateEmail() var email = document.getElementById(email); var url = validate?email= + escape(email.value); if (window.ActiveXObject) xmlHttp = new ActiveXObject(Microsoft.XMLHTTP); else if (window.XMLHttpRequest) xmlHttp = new XMLHttpRequest(); xmlHttp.open(GET, url);xmlHttp.onreadystatechange = callback;xmlHttp.send(null);3. 向服務(wù)器做出請(qǐng)求?？赡苷{(diào)用servlet、CGI腳本，或者任何服務(wù)器端技術(shù)。4. 服務(wù)器可以做你想做的事情，包括訪問數(shù)據(jù)庫，甚至訪問另一個(gè)系統(tǒng)。5. 請(qǐng)求返回到瀏覽器。Content-Type設(shè)置為text/xmlXMLHttpRequest對(duì)象只能處理text/html類型的結(jié)果。在另外一些更復(fù)雜示例中，響應(yīng)可能涉及更廣，還包括JavaScript、DOM管理以及其他相關(guān)的技術(shù)。需要說明，你還需要設(shè)置另外一些首部，使瀏覽器不會(huì)在本地緩存結(jié)果。為此可以使用下面的代碼：response.setHeader(Cache-Control, no-cache);response.setHeader(Pragma, no-cache);16. 在這個(gè)示例中，XMLHttpRequest對(duì)象配置為處理返回時(shí)要調(diào)用callback()函數(shù)。這個(gè)函數(shù)會(huì)檢查XMLHttpRequest對(duì)象的readyState屬性，然后查看服務(wù)器返回的狀態(tài)碼。如果一切正常，callback()函數(shù)就會(huì)在客戶端上做些有意思的工作。以下就是一個(gè)典型的回調(diào)方法：function callback() if (xmlHttp.readyState = 4) if (xmlHttp.status = 200) /do something interesting here 可以看到，這與正常的請(qǐng)求/響應(yīng)模式有所不同，但對(duì)Web開發(fā)人員來說，并不是完全陌生的。顯然，在創(chuàng)建和建立XMLHttpRequest對(duì)象時(shí)還可以做些事情，另外當(dāng)“回調(diào)”函數(shù)完成了狀態(tài)檢查之后也可以有所作為。一般地，你會(huì)把這些標(biāo)準(zhǔn)調(diào)用包裝在一個(gè)庫中，以便在整個(gè)應(yīng)用中使用，或者可以使用Web上提供的庫。這個(gè)領(lǐng)域還很新，但是在開源社區(qū)中已經(jīng)如火如荼地展開了大量的工作。通常，Web上提供的各種框架和工具包負(fù)責(zé)基本的連接和瀏覽器抽象，有些還增加了用戶界面組件。有一些純粹基于客戶，還有一些需要在服務(wù)器上工作。這些框架中的很多只是剛開始開發(fā)，或者還處于發(fā)布的早期階段，隨著新的庫和新的版本的定期出現(xiàn)，情況還在不斷發(fā)生變化。這個(gè)領(lǐng)域正在日漸成熟，最具優(yōu)勢(shì)的將脫穎而出。一些比較成熟的庫包括libXmlRequest、RSLite、sarissa、JavaScript對(duì)象注解（JavaScript Object Notation，JSON）、JSRS、直接Web遠(yuǎn)程通信（Direct Web Remoting，DWR）和Rails on Ruby。這個(gè)領(lǐng)域日新月異，所以應(yīng)當(dāng)適當(dāng)?shù)嘏渲媚愕腞SS收集器，及時(shí)收集有關(guān)Ajax的所有網(wǎng)站上的信息！2.4 GET與POST / 2006-5-16 10:56:00 圖書導(dǎo)讀 當(dāng)前章節(jié):2.4 GET與POST2.1 XMLHttpRequest對(duì)象概述 2.2 方法和屬性2.3 交互示例 2.5 遠(yuǎn)程腳本2.6 如何發(fā)送簡(jiǎn)單請(qǐng)求 2.7 DOM Level 3 加載和保存規(guī)約 你可能想了解GET和POST之間有什么區(qū)別，并想知道什么時(shí)候使用它們。從理論上講，如果請(qǐng)求是冪等的就可以使用GET，所謂冪等是指多個(gè)請(qǐng)求返回相同的結(jié)果。實(shí)際上，相應(yīng)的服務(wù)器方法可能會(huì)以某種方式修改狀態(tài)，所以一般情況下這是不成立的。這只是一種標(biāo)準(zhǔn)。更實(shí)際的區(qū)別在于凈荷的大小，在許多情況下，瀏覽器和服務(wù)器會(huì)限制URL的長(zhǎng)度URL用于向服務(wù)器發(fā)送數(shù)據(jù)。一般來講，可以使用GET從服務(wù)器獲取數(shù)據(jù)；換句話說，要避免使用GET調(diào)用改變服務(wù)器上的狀態(tài)。一般地，當(dāng)改變服務(wù)器上的狀態(tài)時(shí)應(yīng)當(dāng)使用POST方法。不同于GET，需要設(shè)置XML- HttpRequest對(duì)象的Content-Type首部，如下所示：xmlHttp.setRequestHeader(Content-Type, application/x-www-form-urlencoded);與GET不同，POST不會(huì)限制發(fā)送給服務(wù)器的凈荷的大小，而且POST請(qǐng)求不能保證是冪等的。你做的大多數(shù)請(qǐng)求可能都是GET請(qǐng)求，不過，如果需要，也完全可以使用POST。2.5 遠(yuǎn)程腳本 / 2006-5-16 10:56:00 圖書導(dǎo)讀 當(dāng)前章節(jié):2.5 遠(yuǎn)程腳本2.2 方法和屬性2.3 交互示例 2.4 GET與POST2.6 如何發(fā)送簡(jiǎn)單請(qǐng)求 2.7 DOM Level 3 加載和保存規(guī)約 2.8 DOM 我們已經(jīng)介紹了Ajax，下面來簡(jiǎn)單談?wù)勥h(yuǎn)程腳本。你可能會(huì)想：“Ajax有什么大不了的？我早就用IFRAME做過同樣的事情。”實(shí)際上，我們自己也曾用過這種方法。這在以前一般稱為遠(yuǎn)程腳本（remote scripting），很多人認(rèn)為這只是一種修修補(bǔ)補(bǔ)。不過，這確實(shí)提供了一種能避免頁面刷新的機(jī)制。2.5.1 遠(yuǎn)程腳本概述基本說來，遠(yuǎn)程腳本是一種遠(yuǎn)程過程調(diào)用類型。你可以像正常的Web應(yīng)用一樣與服務(wù)器交互，但是不用刷新整個(gè)頁面。與Ajax類似，你可以調(diào)用任何服務(wù)器端技術(shù)來接收請(qǐng)求、處理請(qǐng)求并返回一個(gè)有意義的結(jié)果。正如在服務(wù)器端有很多選擇，客戶端同樣有許多實(shí)現(xiàn)遠(yuǎn)程腳本的選擇。你可以在應(yīng)用中嵌入Flash動(dòng)畫、Java applet，或者ActiveX組件，甚至可以使用XML-RPC，但是這種方法過于復(fù)雜，因此除非你使用這種技術(shù)很有經(jīng)驗(yàn)，否則這種方法不太合適。實(shí)現(xiàn)遠(yuǎn)程腳本的通常做法包括將腳本與一個(gè)IFRAME（隱藏或不隱藏）結(jié)合，以及由服務(wù)器返回JavaScript，然后再在瀏覽器中運(yùn)行這個(gè)JavaScript。Microsoft提供了自己的遠(yuǎn)程腳本解決方案，并聰明地稱之為Microsoft遠(yuǎn)程腳本（Microsoft Remote Scripting，MSRS）。采用這種方法，可以像調(diào)用本地腳本一樣調(diào)用服務(wù)器腳本。頁面中嵌入Java applet，以便與服務(wù)器通信，.asp頁面用于放置服務(wù)器端腳本，并用.htm文件管理客戶端的布局?jǐn)[放。在Netscape和IE 4.0及更高版本中都可以使用Microsoft的這種解決方案，可以同步調(diào)用，也可以異步調(diào)用。不過，這種解決方案需要Java，這意味著可能還需要附加的安裝例程，而且還需要Internet Information Services（IIS），因此會(huì)限制服務(wù)器端的選擇。Brent Ashley為遠(yuǎn)程腳本創(chuàng)建了兩個(gè)免費(fèi)的跨平臺(tái)庫。JSRS是一個(gè)客戶端JavaScript庫，它充分利用DHTML向服務(wù)器做遠(yuǎn)程調(diào)用。相當(dāng)多的操作系統(tǒng)和瀏覽器上都能使用JSRS。如果采用一些常用的、流行的服務(wù)器端實(shí)現(xiàn)（如PHP、Python和Perl CGI），JSRS一般都能在網(wǎng)站上安裝并運(yùn)行。Ashley免費(fèi)提供了JSRS，而且還可以從他的網(wǎng)站（/rs/main.htm）上得到源代碼。如果你覺得JSRS太過笨重，Ashley還創(chuàng)建了RSLite，這個(gè)庫使用了cookie。RSLite僅限于少量數(shù)據(jù)和單一調(diào)用，不過大多數(shù)瀏覽器都能提供支持。2.5.2 遠(yuǎn)程腳本的示例為了進(jìn)行比較，這里向你展示如何使用IFRAME來實(shí)現(xiàn)類似Ajax的技術(shù)。這非常簡(jiǎn)單，而且過去我們就用過這種方法（在XMLHttpRequest問世之前）。這個(gè)示例并沒有真正調(diào)用服務(wù)器，只是想讓你對(duì)如何使用IFRAME實(shí)現(xiàn)遠(yuǎn)程腳本有所認(rèn)識(shí)。這個(gè)示例包括兩個(gè)文件：iframe.html（見代碼清單2-2）和server.html（見代碼清單2-3）。server.html模擬了本應(yīng)從服務(wù)器返回的響應(yīng)。代碼清單2-2iframe.html文件 Example of remote scripting in an IFRAME function handleResponse() alert(this function is called from server.html); Remote Scripting with an IFRAME call the server 代碼清單2-3server.html文件 the server window.parent.handleResponse(); 圖2-2顯示了最初的頁面。運(yùn)行這個(gè)代碼生成的結(jié)果如圖2-3所示。圖2-2最初的頁面圖2-3調(diào)用“服務(wù)器”之后的頁面2.6 如何發(fā)送簡(jiǎn)單請(qǐng)求 / 2006-5-16 10:56:00 圖書導(dǎo)讀 當(dāng)前章節(jié):2.6 如何發(fā)送簡(jiǎn)單請(qǐng)求 2.3 交互示例 2.4 GET與POST2.5 遠(yuǎn)程腳本2.7 DOM Level 3 加載和保存規(guī)約 2.8 DOM 2.9 小結(jié) 現(xiàn)在已經(jīng)準(zhǔn)備開始使用XMLHttpRequest對(duì)象了。我們剛剛討論了如何創(chuàng)建這個(gè)對(duì)象，下面來看如何向服務(wù)器發(fā)送請(qǐng)求，以及如何處理服務(wù)器的響應(yīng)。最簡(jiǎn)單的請(qǐng)求是，不以查詢參數(shù)或提交表單數(shù)據(jù)的形式向服務(wù)器發(fā)送任何信息。在實(shí)際中，往往都希望向服務(wù)器發(fā)送一些信息。使用XMLHttpRequest對(duì)象發(fā)送請(qǐng)求的基本步驟如下：1. 為得到XMLHttpRequest對(duì)象實(shí)例的一個(gè)引用，可以創(chuàng)建一個(gè)新的實(shí)例，也可以訪問包含有XMLHttpRequest實(shí)例的一個(gè)變量。2. 告訴XMLHttpRequest對(duì)象，哪個(gè)函數(shù)會(huì)處理XMLHttpRequest對(duì)象狀態(tài)的改變，為此要把對(duì)象的onreadystatechange屬性設(shè)置為指向JavaScript函數(shù)的指針。3. 指定請(qǐng)求的屬性。XMLHttpRequest對(duì)象的open()方法會(huì)指定將發(fā)出的請(qǐng)求。open()方法取3個(gè)參數(shù)：一個(gè)是指示所用方法（通常是GET或POST）的串；一個(gè)是表示目標(biāo)資源URL的串；一個(gè)是Boolean值，指示請(qǐng)求是否是異步的。4. 將請(qǐng)求發(fā)送給服務(wù)器。XMLHttpRequest對(duì)象的send()方法把請(qǐng)求發(fā)送到指定的目標(biāo)資源。send()方法接受一個(gè)參數(shù)，通常是一個(gè)串或一個(gè)DOM對(duì)象。這個(gè)參數(shù)作為請(qǐng)求體的一部分發(fā)送到目標(biāo)URL。當(dāng)向send()方法提供參數(shù)時(shí)，要確保open()中指定的方法是POST。如果沒有數(shù)據(jù)作為請(qǐng)求體的一部分被發(fā)送，則使用null。這些步驟很直觀：你需要XMLHttpRequest對(duì)象的一個(gè)實(shí)例，要告訴它如果狀態(tài)有變化該怎么做，還要告訴它向哪里發(fā)送請(qǐng)求以及如何發(fā)送請(qǐng)求，最后還需要指導(dǎo)XMLHttpRequest發(fā)送請(qǐng)求。不過，除非你對(duì)C或C+很了解，否則可能不明白函數(shù)指針（function pointer）是什么意思。函數(shù)指針與任何其他變量類似，只不過它指向的不是像串、數(shù)字、甚至對(duì)象實(shí)例之類的數(shù)據(jù)，而是指向一個(gè)函數(shù)。在JavaScript中，所有函數(shù)在內(nèi)存中都編有地址，可以使用函數(shù)名引用。這就提供了很大的靈活性，可以把函數(shù)指針作為參數(shù)傳遞給其他函數(shù)，或者在一個(gè)對(duì)象的屬性中存儲(chǔ)函數(shù)指針。對(duì)于XMLHttpRequest對(duì)象，onreadystatechange屬性存儲(chǔ)了回調(diào)函數(shù)的指針。當(dāng)XMLHttpRequest對(duì)象的內(nèi)部狀態(tài)發(fā)生變化時(shí)，就會(huì)調(diào)用這個(gè)回調(diào)函數(shù)。當(dāng)進(jìn)行了異步調(diào)用，請(qǐng)求就會(huì)發(fā)出，腳本立即繼續(xù)處理（在腳本繼續(xù)工作之前，不必等待請(qǐng)求結(jié)束）。一旦發(fā)出了請(qǐng)求，對(duì)象的readyState屬性會(huì)經(jīng)過幾個(gè)變化。盡管針對(duì)任何狀態(tài)都可以做一些處理，不過你最感興趣的狀態(tài)可能是服務(wù)器響應(yīng)結(jié)束時(shí)的狀態(tài)。通過設(shè)置回調(diào)函數(shù)，就可以有效地告訴XMLHttpRequest對(duì)象：“只要響應(yīng)到來，就調(diào)用這個(gè)函數(shù)來處理響應(yīng)?！?.6.1 簡(jiǎn)單請(qǐng)求的示例第一個(gè)示例很簡(jiǎn)單。這是一個(gè)很小的HTML頁面，只有一個(gè)按鈕。點(diǎn)擊這個(gè)按鈕會(huì)初始化一個(gè)發(fā)至服務(wù)器的異步請(qǐng)求。服務(wù)器將發(fā)回一個(gè)簡(jiǎn)單的靜態(tài)文本文件作為響應(yīng)。在處理這個(gè)響應(yīng)時(shí)，會(huì)在一個(gè)警告窗口中顯示該靜態(tài)文本文件的內(nèi)容。代碼清單2-4顯示了這個(gè)HTML頁面和相關(guān)的JavaScript。代碼清單2-4simpleRequest.html頁面Simple XMLHttpRequestvar xmlHttp;function createXMLHttpRequest() if (window.ActiveXObject) xmlHttp = new ActiveXObject(Microsoft.XMLHTTP); else if (window.XMLHttpRequest) xmlHttp = new XMLHttpRequest(); function startRequest() createXMLHttpRequest(); xmlHttp.onreadystatechange = handleStateChange; xmlHttp.open(GET, simpleResponse.xml, true); xmlHttp.send(null);function handleStateChange() if(xmlHttp.readyState = 4) if(xmlHttp.status = 200) alert(The server replied with: + xmlHttp.responseText); 服務(wù)器的響應(yīng)文件simpleResponse.xml只有一行文本。點(diǎn)擊HTML頁面上的按鈕會(huì)生成一個(gè)警告框，其中顯示simpleResponse.xml文件的內(nèi)容。在圖2-4中可以看到分別在Internet Explorer和Firefox中顯示的包含服務(wù)器響應(yīng)的相同警告框。對(duì)服務(wù)器的請(qǐng)求是異步發(fā)送的，因此瀏覽器可以繼續(xù)響應(yīng)用戶輸入，同時(shí)在后臺(tái)等待服務(wù)器的響應(yīng)。如果選擇同步操作，而且倘若服務(wù)器的響應(yīng)要花幾秒才能到達(dá)，瀏覽器就會(huì)表現(xiàn)得很遲鈍，在等待期間不能響應(yīng)用戶的輸入。這樣一來，瀏覽器好像被凍住一樣，無法響應(yīng)用戶輸入，而異步做法可以避免這種情況，從而讓最終用戶有更好的體驗(yàn)。盡管這種改善很細(xì)微，但確實(shí)很有意義。這樣用戶就能繼續(xù)工作，而且服務(wù)器會(huì)在后臺(tái)處理先前的請(qǐng)求。圖2-4第一個(gè)簡(jiǎn)單的異步請(qǐng)求與服務(wù)器通信而不打斷用戶的使用流程，這種能力使開發(fā)人員采用多種技術(shù)改善用戶體驗(yàn)成為可能。例如，假設(shè)有一個(gè)驗(yàn)證用戶輸入的應(yīng)用。用戶在輸入表單上填寫各個(gè)字段時(shí)，瀏覽器可以定期地向服務(wù)器發(fā)送表單值來進(jìn)行驗(yàn)證，此時(shí)并不打斷用戶，他還可以繼續(xù)填寫余下的表單字段。如果某個(gè)驗(yàn)證規(guī)則失敗，在表單真正發(fā)送到服務(wù)器進(jìn)行處理之前，用戶就會(huì)立即得到通知，這就能大大節(jié)省用戶的時(shí)間，也能減輕服務(wù)器上的負(fù)載，因?yàn)椴槐卦诒韱翁峤徊怀晒r(shí)完全重建表單的內(nèi)容。2.6.2 關(guān)于安全如果討論基于瀏覽器的技術(shù)時(shí)沒有提到安全，那么討論就是不完整的。XMLHttpRequest對(duì)象要受制于瀏覽器的安全“沙箱”。XMLHttpRequest對(duì)象請(qǐng)求的所有資源都必須與調(diào)用腳本在同一個(gè)域內(nèi)。這個(gè)安全限制使得XMLHttpRequest對(duì)象不能請(qǐng)求腳本所在域之外的資源。這個(gè)安全限制的強(qiáng)度因?yàn)g覽器而異（見圖2-5）。IE會(huì)顯示一個(gè)警告，指出可能存在一個(gè)潛在的安全風(fēng)險(xiǎn)，但是用戶可以選擇是否繼續(xù)發(fā)出請(qǐng)求。Firefox則會(huì)斷然停止請(qǐng)求，并在JavaScript控制臺(tái)顯示一個(gè)錯(cuò)誤消息。Firefox確實(shí)提供了一些JavaScript技巧，使得XMLHttpRequest也可以請(qǐng)求外部URL的資源。不過，由于這些技術(shù)針對(duì)特定的瀏覽器，所以最好不要用，而且要避免使用XMLHttpRequest訪問外部URL。.6 如何發(fā)送簡(jiǎn)單請(qǐng)求 / 2006-5-16 10:56:00 圖書導(dǎo)讀 當(dāng)前章節(jié):2.6 如何發(fā)送簡(jiǎn)單請(qǐng)求 2.3 交互示例 2.4 GET與POST2.5 遠(yuǎn)程腳本2.7 DOM Level 3 加載和保存規(guī)約 2.8 DOM 2.9 小結(jié) 現(xiàn)在已經(jīng)準(zhǔn)備開始使用XMLHttpRequest對(duì)象了。我們剛剛討論了如何創(chuàng)建這個(gè)對(duì)象，下面來看如何向服務(wù)器發(fā)送請(qǐng)求，以及如何處理服務(wù)器的響應(yīng)。最簡(jiǎn)單的請(qǐng)求是，不以查詢參數(shù)或提交表單數(shù)據(jù)的形式向服務(wù)器發(fā)送任何信息。在實(shí)際中，往往都希望向服務(wù)器發(fā)送一些信息。使用XMLHttpRequest對(duì)象發(fā)送請(qǐng)求的基本步驟如下：1. 為得到XMLHttpRequest對(duì)象實(shí)例的一個(gè)引用，可以創(chuàng)建一個(gè)新的實(shí)例，也可以訪問包含有XMLHttpRequest實(shí)例的一個(gè)變量。2. 告訴XMLHttpRequest對(duì)象，哪個(gè)函數(shù)會(huì)處理XMLHttpRequest對(duì)象狀態(tài)的改變，為此要把對(duì)象的onreadystatechange屬性設(shè)置為指向JavaScript函數(shù)的指針。3. 指定請(qǐng)求的屬性。XMLHttpRequest對(duì)象的open()方法會(huì)指定將發(fā)出的請(qǐng)求。open()方法取3個(gè)參數(shù)：一個(gè)是指示所用方法（通常是GET或POST）的串；一個(gè)是表示目標(biāo)資源URL的串；一個(gè)是Boolean值，指示請(qǐng)求是否是異步的。4. 將請(qǐng)求發(fā)送給服務(wù)器。XMLHttpRequest對(duì)象的send()方法把請(qǐng)求發(fā)送到指定的目標(biāo)資源。send()方法接受一個(gè)參數(shù)，通常是一個(gè)串或一個(gè)DOM對(duì)象。這個(gè)參數(shù)作為請(qǐng)求體的一部分發(fā)送到目標(biāo)URL。當(dāng)向send()方法提供參數(shù)時(shí)，要確保open()中指定的方法是POST。如果沒有數(shù)據(jù)作為請(qǐng)求體的一部分被發(fā)送，則使用null。這些步驟很直觀：你需要XMLHttpRequest對(duì)象的一個(gè)實(shí)例，要告訴它如果狀態(tài)有變化該怎么做，還要告訴它向哪里發(fā)送請(qǐng)求以及如何發(fā)送請(qǐng)求，最后還需要指導(dǎo)XMLHttpRequest發(fā)送請(qǐng)求。不過，除非你對(duì)C或C+很了解，否則可能不明白函數(shù)指針（function pointer）是什么意思。函數(shù)指針與任何其他變量類似，只不過它指向的不是像串、數(shù)字、甚至對(duì)象實(shí)例之類的數(shù)據(jù)，而是指向一個(gè)函數(shù)。在JavaScript中，所有函數(shù)在內(nèi)存中都編有地址，可以使用函數(shù)名引用。這就提供了很大的靈活性，可以把函數(shù)指針作為參數(shù)傳遞給其他函數(shù)，或者在一個(gè)對(duì)象的屬性中存儲(chǔ)函數(shù)指針。對(duì)于XMLHttpRequest對(duì)象，onreadystatechange屬性存儲(chǔ)了回調(diào)函數(shù)的指針。當(dāng)XMLHttpRequest對(duì)象的內(nèi)部狀態(tài)發(fā)生變化時(shí)，就會(huì)調(diào)用這個(gè)回調(diào)函數(shù)。當(dāng)進(jìn)行了異步調(diào)用，請(qǐng)求就會(huì)發(fā)出，腳本立即繼續(xù)處理（在腳本繼續(xù)工作之前，不必等待請(qǐng)求結(jié)束）。一旦發(fā)出了請(qǐng)求，對(duì)象的readyState屬性會(huì)經(jīng)過幾個(gè)變化。盡管針對(duì)任何狀態(tài)都可以做一些處理，不過你最感興趣的狀態(tài)可能是服務(wù)器響應(yīng)結(jié)束時(shí)的狀態(tài)。通過設(shè)置回調(diào)函數(shù)，就可以有效地告訴XMLHttpRequest對(duì)象：“只要響應(yīng)到來，就調(diào)用這個(gè)函數(shù)來處理響應(yīng)?！?.6.1 簡(jiǎn)單請(qǐng)求的示例第一個(gè)示例很簡(jiǎn)單。這是一個(gè)很小的HTML頁面，只有一個(gè)按鈕。點(diǎn)擊這個(gè)按鈕會(huì)初始化一個(gè)發(fā)至服務(wù)器的異步請(qǐng)求。服務(wù)器將發(fā)回一個(gè)簡(jiǎn)單的靜態(tài)文本文件作為響應(yīng)。在處理這個(gè)響應(yīng)時(shí)，會(huì)在一個(gè)警告窗口中顯示該靜態(tài)文本文件的內(nèi)容。代碼清單2-4顯示了這個(gè)HTML頁面和相關(guān)的JavaScript。代碼清單2-4simpleRequest.html頁面Simple XMLHttpRequestvar xmlHttp;function createXMLHttpRequest() if (window.ActiveXObject) xmlHttp = new ActiveXObject(Microsoft.XMLHTTP); else if (window.XMLHttpRequest) xmlHttp = new XMLHttpRequest(); function startRequest() createXMLHttpRequest(); xmlHttp.onreadystatechange = handleStateChange; xmlHttp.open(GET, simpleResponse.xml, true); xmlHttp.send(null);function handleStateChange() if(xmlHttp.readyState = 4) if(xmlHttp.status = 200) alert(The server replied with: + xmlHttp.responseText); 服務(wù)器的響應(yīng)文件simpleResponse.xml只有一行文本。點(diǎn)擊HTML頁面上的按鈕會(huì)生成一個(gè)警告框，其中顯示simpleResponse.xml文件的內(nèi)容。在圖2-4中可以看到分別在Internet Explorer和Firefox中顯示的包含服務(wù)器響應(yīng)的相同警告框。對(duì)服務(wù)器的請(qǐng)求是異步發(fā)送的，因此瀏覽器可以繼續(xù)響應(yīng)用戶輸入，同時(shí)在后臺(tái)等待服務(wù)器的響應(yīng)。如果選擇同步操作，而且倘若服務(wù)器的響應(yīng)要花幾秒才能到達(dá)，瀏覽器就會(huì)表現(xiàn)得很遲鈍，在等待期間不能響應(yīng)用戶的輸入。這樣一來，瀏覽器好像被凍住一樣，無法響應(yīng)用戶輸入，而異步做法可以避免這種情況，從而讓最終用戶有更好的體驗(yàn)。盡管這種改善很細(xì)微，但確實(shí)很有意義。這樣用戶就能繼續(xù)工作，而且服務(wù)器會(huì)在后臺(tái)處理先前的請(qǐng)求。圖2-4第一個(gè)簡(jiǎn)單的異步請(qǐng)求與服務(wù)器通信而不打斷用戶的使用流程，這種能力使開發(fā)人員采用多種技術(shù)改善用戶體驗(yàn)成為可能。例如，假設(shè)有一個(gè)驗(yàn)證用戶輸入的應(yīng)用。用戶在輸入表單上填寫各個(gè)字段時(shí)，瀏覽器可以定期地向服務(wù)器發(fā)送表單值來進(jìn)行驗(yàn)證，此時(shí)并不打斷用戶，他還可以繼續(xù)填寫余下的表單字段。如果某個(gè)驗(yàn)證規(guī)則失敗，在表單真正發(fā)送到服務(wù)器進(jìn)行處理之前，用戶就會(huì)立即得到通知，這就能大大節(jié)省用戶的時(shí)間，也能減輕服務(wù)器上的負(fù)載，因?yàn)椴槐卦诒韱翁峤徊怀晒r(shí)完全重建表單的內(nèi)容。2.6.2 關(guān)于安全如果討論基于瀏覽器的技術(shù)時(shí)沒有提到安全，那么討論就是不完整的。XMLHttpRequest對(duì)象要受制于瀏覽器的安全“沙箱”。XMLHttpRequest對(duì)象請(qǐng)求的所有資源都必須與調(diào)用腳本在同一個(gè)域內(nèi)。這個(gè)安全限制使得XMLHttpRequest對(duì)象不能請(qǐng)求腳本所在域之外的資源。這個(gè)安全限制的強(qiáng)度因?yàn)g覽器而異（見圖2-5）。IE會(huì)顯示一個(gè)警告，指出可能存在一個(gè)潛在的安全風(fēng)險(xiǎn)，但是用戶可以選擇是否繼續(xù)發(fā)出請(qǐng)求。Firefox則會(huì)斷然停止請(qǐng)求，并在JavaScript控制臺(tái)顯示一個(gè)錯(cuò)誤消息。Firefox確實(shí)提供了一些JavaScript技巧，使得XMLHttpRequest也可以請(qǐng)求外部URL的資源。不過，由于這些技術(shù)針對(duì)特定的瀏覽器，所以最好不要用，而且要避免使用XMLHttpRequest訪問外部URL。2.8 DOM / 2006-5-16 10:56:00 圖書導(dǎo)讀 當(dāng)前章節(jié):2.8 DOM 2.5 遠(yuǎn)程腳本2.6 如何發(fā)送簡(jiǎn)單請(qǐng)求 2.7 DOM Level 3 加載和保存規(guī)約 2.9 小結(jié) 3.1 處理服務(wù)器響應(yīng)3.2 發(fā)送請(qǐng)求參數(shù)我們一直在說DOM，如果你沒有做過太多客戶端的工作，可能不知道什么是DOM。DOM是一個(gè)W3C規(guī)約，可以以一種獨(dú)立于平臺(tái)和語言的方式訪問和修改一個(gè)文檔的內(nèi)容和結(jié)構(gòu)。換句話說，這是表示和處理一個(gè)HTML或XML文檔的常用方法。有一點(diǎn)很重要，DOM的設(shè)計(jì)是以對(duì)象管理組織（OMG）的規(guī)約為基礎(chǔ)的，因此可以用于任何編程語言。最初人們把它認(rèn)為是一種讓JavaScript在瀏覽器間可移植的方法，不過DOM的應(yīng)用已經(jīng)遠(yuǎn)遠(yuǎn)超出這個(gè)范圍。DOM實(shí)際上是以面向?qū)ο蠓绞矫枋龅膶?duì)象模型。DOM定義了表示和修改文檔所需的對(duì)象、這些對(duì)象的行為和屬性以及這些對(duì)象之間的關(guān)系。可以把DOM認(rèn)為是頁面上數(shù)據(jù)和結(jié)構(gòu)的一個(gè)樹形表示，不過頁面當(dāng)然可能并不是以這種樹的方式具體實(shí)現(xiàn)。假設(shè)有一個(gè)Web頁面，如代碼清單2-5所示。代碼清單2-5簡(jiǎn)單的表格 Foo Bar 可以畫出這個(gè)簡(jiǎn)單表格的DOM，如圖2-6所示。DOM規(guī)約好就好在它提供了一種與文檔交互的標(biāo)準(zhǔn)方法。如果沒有DOM，Ajax最有意思的方面也許根本就沒有存在的可能。由于DOM不僅允許遍歷DOM樹，還可以編輯內(nèi)容，因此可以建立極為動(dòng)態(tài)的頁面。2.9 小結(jié) / 2006-5-16 10:56:00 圖書導(dǎo)讀 當(dāng)前章節(jié):2.9 小結(jié) 2.6 如何發(fā)送簡(jiǎn)單請(qǐng)求 2.7 DOM Level 3 加載和保存規(guī)約 2.8 DOM 3.1 處理服務(wù)器響應(yīng)3.2 發(fā)送請(qǐng)求參數(shù)3.3 小結(jié)盡管Ajax風(fēng)格的技術(shù)已經(jīng)用了很多年，但直到最近XMLHttpRequest對(duì)象才得到現(xiàn)代瀏覽器的采納，而這也為開發(fā)豐富的Web應(yīng)用開啟了一個(gè)新的時(shí)代。在本章中，我們討論了Ajax核心（即XMLHttpRequest對(duì)象）的相關(guān)基礎(chǔ)知識(shí)。我們了解了XMLHttpRequest對(duì)象的方法和屬性，而且展示了使用XMLHttpRequest對(duì)象的簡(jiǎn)單示例。可以看到，這個(gè)對(duì)象相當(dāng)簡(jiǎn)單，無需你考慮其中很多的復(fù)雜性。適當(dāng)?shù)厥褂肑avaScript，再加上基本的DOM管理，Ajax可以提供高度的交互性，而這在此前的Web上是做不到的。第1章曾提到，利用XMLHttpRequest，你不必將整個(gè)頁面完全刷新，也不限于只能與服務(wù)器進(jìn)行同步會(huì)話。在后面的幾章中，我們會(huì)介紹如何將你已經(jīng)掌握的服務(wù)器端技術(shù)與XMLHttpRequest的獨(dú)特功能相結(jié)合，來提供高度交互性的Web應(yīng)用。3.1 處理服務(wù)器響應(yīng) / 2006-5-16 10:56:00 圖書導(dǎo)讀 當(dāng)前章節(jié):3.1 處理服務(wù)器響應(yīng)2.7 DOM Level 3 加載和保存規(guī)約 2.8 DOM 2.9 小結(jié) 3.2 發(fā)送請(qǐng)求參數(shù)3.3 小結(jié)4.1 完成驗(yàn)證XMLHttpRequest對(duì)象提供了兩個(gè)可以用來訪問服務(wù)器響應(yīng)的屬性。第一個(gè)屬性respo-nseText將響應(yīng)提供為一個(gè)串，第二個(gè)屬性responseXML將響應(yīng)提供為一個(gè)XML對(duì)象。一些