【文章內(nèi)容簡(jiǎn)介】 過(guò)程，在用戶交互模型上應(yīng)盡可能地直接參照傳統(tǒng) Web 應(yīng)用和桌面應(yīng)用程序，為了讓用戶免于重新投入時(shí)間和精力去學(xué)習(xí)和習(xí)慣新交互模式，開(kāi)發(fā)人員不應(yīng)過(guò)分關(guān)注和浪費(fèi)時(shí)間去發(fā)明不熟悉的交互模型。 4) 可訪問(wèn)性：充分考慮主要用戶的需求和喜好的同 時(shí)也不能閉門(mén)造車(chē)，將沒(méi)有預(yù)料到的新用戶拒之門(mén)外。要充分考慮到用戶是否會(huì)使用老版本的瀏覽器或特定的軟件，以制定相應(yīng)的措施。 5) 避免下載整個(gè)頁(yè)面：當(dāng)最初的頁(yè)面下載之后，所有與服務(wù)器的通信都交由Ajax 引擎管理。避免一些地方通過(guò) Ajax 來(lái)完成少量數(shù)據(jù)的下載，而在另一些地方卻仍需重新下載整個(gè)頁(yè)面，這種做法會(huì)對(duì)用戶的體驗(yàn)造成破壞。 Ajax 以提高 Web 可用性和用戶體驗(yàn)為出發(fā)點(diǎn)，在實(shí)踐中堅(jiān)持上述幾個(gè)原則有助于保證 Ajax 應(yīng)用的有效性和可用性。 常見(jiàn)的 Ajax 應(yīng)用 Ajax 的特點(diǎn)在于異步交互，動(dòng)態(tài)更新 Web 頁(yè) 面，因此它更適合交互較多，頻繁讀取數(shù)據(jù)的 Web 應(yīng)用?，F(xiàn)在來(lái)看幾個(gè)常見(jiàn)的 Ajax 的應(yīng)用實(shí)例。 數(shù)據(jù)驗(yàn)證 在填寫(xiě)表單內(nèi)容時(shí)，需要保證數(shù)據(jù)的唯一性（例如新用戶注冊(cè)填寫(xiě)的用戶名），因此必須對(duì)用戶輸入的內(nèi)容進(jìn)行數(shù)據(jù)驗(yàn)證。通常是在提交表單后在服務(wù)器進(jìn)行驗(yàn)證，不僅時(shí)間長(zhǎng)而且造成了服務(wù)器不必要的負(fù)擔(dān)。而使用 Ajax 技術(shù)，可以由XMLHttpRequest 對(duì)象發(fā)出驗(yàn)證請(qǐng)求，根據(jù)返回的 Http 響應(yīng)判斷驗(yàn)證是否成功，整個(gè)過(guò)程不需要彈出新窗口，也不需要將整個(gè)頁(yè)面提交到服務(wù)器，快速而又不加重服務(wù)器的負(fù)擔(dān)。 按需取數(shù)據(jù) 分類樹(shù)或者樹(shù)形結(jié)構(gòu)通常將分類結(jié)果中的數(shù)據(jù)一次性讀取出來(lái)并寫(xiě)入數(shù)組，然后根據(jù)用戶的操作，用 JavaScript 來(lái)控制節(jié)點(diǎn)的呈現(xiàn)。應(yīng)用 Ajax 初始化頁(yè)面時(shí)，只獲取第一級(jí)子分類的數(shù)據(jù)并且顯示；當(dāng)用戶點(diǎn)開(kāi)一級(jí)分類的第一節(jié)點(diǎn)時(shí)，頁(yè)面會(huì)通過(guò) Ajax 向服務(wù)器請(qǐng)求當(dāng)前分類所屬的二級(jí)子分類的所有數(shù)據(jù)；以此類推。頁(yè)面會(huì)根據(jù)用戶的操作向服務(wù)器請(qǐng)求它所需要的數(shù)據(jù)，這樣就不會(huì)存在數(shù)據(jù)冗余，減少數(shù)揚(yáng)州大學(xué)碩士學(xué)位論文 12 據(jù)下載總量。同時(shí)，更新頁(yè)面時(shí)不需要重載所有內(nèi)容，只更新需要更新的那部分內(nèi)容即可，相對(duì)于以前后臺(tái)處理并且重載的方式， 大大縮短了用戶等待時(shí)間。 自動(dòng)更新頁(yè)面 通常在聊天室等需要經(jīng)常刷新數(shù)據(jù)的頁(yè)面中，可以在頁(yè)面加載以后，通過(guò) Ajax引擎在后臺(tái)進(jìn)行定時(shí)的輪詢，向服務(wù)器發(fā)送請(qǐng)求，查看是否有最新的消息。如果有則將新的數(shù)據(jù)（而不是所有的數(shù)據(jù)）下載并且在頁(yè)面上進(jìn)行動(dòng)態(tài)的更新，通過(guò)一定的方式通知用戶。這樣既避免了用戶不斷手工刷新頁(yè)面的不便，也不會(huì)因?yàn)橹貜?fù)刷新頁(yè)面造成資源浪費(fèi)。 Ajax 的重要組成技術(shù) Ajax 涉及到了 JavaScript、 XHTML 和 CSS、 DOM、 XML 和 XSTL、XMLHttpRequest 等技術(shù)，其中 JavaScript， DOM， XML， XMLHttpRequest 比較有用 [13]。下面就主要介紹一下這四種技術(shù)： JavaScript JavaScript 是一種由 Netscape 的 LiveScript 發(fā)展而來(lái)的腳本語(yǔ)言，主要目的是為了解決服務(wù)器終端語(yǔ)言遺留的速度問(wèn)題 [14]。是適應(yīng)動(dòng)態(tài)網(wǎng)頁(yè)制作的需要而誕生的一種新的編程語(yǔ)言 。 JavaScript 短小精悍 ， 又是在客戶機(jī)上執(zhí)行的，大大提高了網(wǎng)頁(yè)的瀏覽速度和交互能力。 JavaScript 使網(wǎng)頁(yè)增加互動(dòng)性。 JavaScript 使有 規(guī)律地重復(fù)的 HTML 文段簡(jiǎn)化，減少下載時(shí)間。 JavaScript 能及時(shí)響應(yīng)用戶的操作，對(duì)提交表單做即時(shí)的檢查，無(wú)需浪費(fèi)時(shí)間 而是 交由 CGI 驗(yàn)證。 JavaScript 一直被定位為客戶端的腳本語(yǔ)言，應(yīng)用最多的地方是表單數(shù)據(jù)的校驗(yàn)?，F(xiàn)在，可以通過(guò) JavaScript 操作 XMLHttpRequest，來(lái)跟數(shù)據(jù)庫(kù)打交道。 DOM DOM（ Document Object Model，文檔對(duì)象模型）是由 W3C 制定的一種獨(dú)立于平臺(tái)和具體編程語(yǔ)言的 API 接口標(biāo)準(zhǔn) [15]。一般來(lái)說(shuō)，支持 JavaScript 的 所有瀏覽器都支持 DOM，例如 Web 瀏覽器 DOM 規(guī)定：通過(guò) Document 對(duì)象的 forms[]數(shù)組可以訪問(wèn) HTML 文檔中的表單。本論文所涉及的 DOM，是指 W3C 定義的標(biāo)準(zhǔn)的文檔對(duì)象模型，它以樹(shù)狀結(jié)構(gòu)表示 HTML/XHTML 文檔，并定義了遍歷這個(gè)樹(shù)和檢查、 13 修改樹(shù)節(jié)點(diǎn)的方法和屬性。該標(biāo)準(zhǔn)的其他部分為文檔的各個(gè)節(jié)點(diǎn)定義了事件處理程序、使用文檔的樣式和操作文檔鄰接范圍的方法。 DOM 還可以用來(lái)表示 XML 文檔，其語(yǔ)法比 HTML 文檔的語(yǔ)法復(fù)雜的多。這類文檔的樹(shù)狀結(jié)構(gòu)表示包含表示 XML 實(shí)體引用節(jié)點(diǎn)、表示處理指令的節(jié)點(diǎn)以及表示 CDATA 段的節(jié)點(diǎn)。 XML XML 是 Extended Markup Language 的縮寫(xiě)。它是互聯(lián)網(wǎng)聯(lián)合組織 ( W3C,World Wide Web Consortium)于 1998 年初制定的一種新的數(shù)據(jù)描述語(yǔ)言，用于描述數(shù)據(jù)文檔中數(shù)據(jù)的組織和安排結(jié)構(gòu) [16]。在 XML 文檔中，用戶可以定義自己需要的標(biāo)記，創(chuàng)造自己的標(biāo)記語(yǔ)言，只要在定義標(biāo)記時(shí)遵循 XML 規(guī)范。 XML 定義了一套元句法，這些符合規(guī)范的 XML 文檔能夠被應(yīng)用程序很容易地統(tǒng)一解析。這種數(shù)據(jù)存儲(chǔ)和傳輸就有章可循。 XML 由于簡(jiǎn)潔高效，能 夠用純文本的形式表現(xiàn)各種復(fù)雜的有層次的數(shù)據(jù)及其之間的相互關(guān)系，易于在各個(gè)平臺(tái)上構(gòu)造和解析，因此在數(shù)據(jù)交換、結(jié)構(gòu)化數(shù)據(jù)存儲(chǔ)與顯示、內(nèi)容呈現(xiàn)與顯示格式分離等方面得到了廣泛的應(yīng)用。 Ajax 核心技術(shù) —— XMLHttpRequest 對(duì)象 XML HttpRequest 對(duì)象是 Ajax 技術(shù)的核心，沒(méi)有 XML HttpRequest 對(duì)象就相當(dāng)于沒(méi)有 Ajax，它是 Ajax 的最重要的一個(gè)對(duì)象。 XML HttpRequest 是 XMLHTTP 組件的對(duì)象，通過(guò)這個(gè)對(duì)象， Ajax 可以像桌面應(yīng)用程序一樣只同服務(wù)器進(jìn)行 數(shù)據(jù)層面的交換 ,而不用每次都刷新界面，也不用每次將數(shù)據(jù)處理的工作都交給服務(wù)器來(lái)做 :這樣既減輕了服務(wù)器負(fù)擔(dān)又加快了響應(yīng)速度、縮短了用戶等待的時(shí)間 [17]。 XMLHttpRequest 對(duì)象是由 JavaScript 創(chuàng)建并使用，客戶端可以只從服務(wù)器端獲取需要的信息，通過(guò)與 DOM 和 CSS 的結(jié)合，可以實(shí)現(xiàn)局部刷新，同時(shí)還可以通過(guò)XMLHttpRequest 對(duì)象異步提交信息，將輸入的數(shù)據(jù)在后臺(tái)提交到服務(wù)器而無(wú)需刷新頁(yè)面。組合這些技術(shù)可以做出強(qiáng)大的應(yīng)用，典型的代表是 GoogleMaps 和 GoogleSuggest。 正是對(duì) XMLHttpRequest 對(duì)象的成功應(yīng)用，催生了 Ajax 的概念。 XMLHttpRequest 提供了一系列屬性和方法來(lái)向服務(wù)器發(fā)送異步的 HTTP 請(qǐng)求。在服務(wù)器處理用戶請(qǐng)求的過(guò)程中，它監(jiān)聽(tīng)服務(wù)器的狀態(tài)，并根據(jù)這些狀態(tài)指示JavaScript 做相應(yīng)的處理。當(dāng)服務(wù)器順利完成響應(yīng)用戶行為的動(dòng)作、并將響應(yīng)數(shù)據(jù)揚(yáng)州大學(xué)碩士學(xué)位論文 14 返回時(shí)， XMLHttpRequest 對(duì)象能夠回調(diào)響應(yīng)的處理函數(shù)。它提供的 Response 系列方法，可以將這些響應(yīng)數(shù)據(jù)以文本、 XMLDocument 對(duì)象、 AdoStream 對(duì)象或者 Unsignedbyte 數(shù)組的方式組裝起來(lái)，由 JavaScript 操縱 DOM 更新 Web 頁(yè)面內(nèi)容。 異步通信對(duì)于 Ajax 應(yīng)用來(lái)說(shuō)是非常重要的。通過(guò)異步通信可以完成很多傳統(tǒng)Web 開(kāi)發(fā)不能完成的功能， XMLHttpRequest 對(duì)象的應(yīng)用就體現(xiàn)在這里。 圖 24 顯示了 XMLHttpRequest 對(duì)象在 Ajax 開(kāi)發(fā)中的應(yīng)用。 XMLHttpRequest對(duì)象是基礎(chǔ)設(shè)施，是整個(gè) Ajax 開(kāi)發(fā)的基礎(chǔ)。 表 21 XMLHttpRequest 對(duì)象的方法 方法 描述 abort() 停止當(dāng)前請(qǐng)求 getAllResponseHeaders() 作為字符串返問(wèn)完整的 headers getResponseHeader(headerLabel) 作為字符串返問(wèn)單個(gè)的 header 標(biāo)簽 open(method,URL[,asyncFlag[,userName[,password]]]) 建立到服務(wù)器的新請(qǐng)求 send(content) 發(fā)送請(qǐng)求 setRequestHeader(label, value) 設(shè)置 header 并和請(qǐng)求一起發(fā)送 從 開(kāi)始，開(kāi)發(fā)人員可以在 Web 頁(yè)面內(nèi)部 使用 XMLHTTP ActiveX 組件擴(kuò)展自身的功能，不用從當(dāng)前的 Web 頁(yè)面導(dǎo)航就可以直接傳輸數(shù)據(jù)到服務(wù)器或者從服務(wù)器接收數(shù)據(jù) [18]。 Mozilla 以及 NetScape 7 則是創(chuàng)建繼承 XML 的代理類XMLHttpRequest；對(duì)于大多數(shù)情況， XMLHttpRequest 對(duì)象和 XMLHTTP 組件很相似，方法和屬性類似，只是部分屬性不同。表 21 和表 22 給出將要用于該對(duì)象的服務(wù)器端程序 訪問(wèn)接口 客戶端頁(yè)面 XML HttpRequest Ajax 應(yīng)用邏輯 圖 24 XML HttpRequest 對(duì)象的作用 15 幾個(gè)方法和屬性。 表 22 XMLHttpRequest 對(duì)象的屬性 屬性 描述 onreadystatechange 狀態(tài)改 變的事件觸發(fā)器 readyState 對(duì)象狀態(tài) (integer): 0 = 未初始化 1 = 讀取中 2 = 已讀取 3 = 交互中 4 = 完成 responseText 服務(wù)器進(jìn)程返回?cái)?shù)據(jù)的文本版本 responseXML 服務(wù)器進(jìn)程返回?cái)?shù)據(jù)的兼容 DOM 的 XML 文檔對(duì)象 status 服務(wù)器返回的狀態(tài)碼： 如： 404 = 文件末找到 、 200 =成功 statusText 服務(wù)器返回的狀態(tài)文本信息 Ajax 的生命周期 為了能使作為 Web 應(yīng)用程序一部分的 Ajax 的生命周期更像桌面系統(tǒng)的 GUI，而 DOM 則扮演了類似 GUI 控件的角色。 JavaScript 腳本對(duì) DOM 注冊(cè)事件監(jiān)聽(tīng)，操作響應(yīng)事件。在響應(yīng)事件的過(guò)程中， Web 服務(wù)器可能被調(diào)用。這個(gè)調(diào)用是異步進(jìn)行的，所以事件監(jiān)聽(tīng)階段和事件響應(yīng)階段是分開(kāi)的。 下面是一個(gè)典型的瀏覽器中 Ajax 應(yīng)用的生命周期。 1) 用戶訪問(wèn)：用戶訪問(wèn)一個(gè)網(wǎng)站，比如點(diǎn)擊鏈接或者在瀏覽器中輸入網(wǎng)站的URL 地址。 2) 頁(yè)面初始化：頁(yè)面初始化加載，準(zhǔn)備處理用戶輸入或者刷新頁(yè)面內(nèi)容。 3) 觸發(fā)瀏覽器事件：瀏覽器觸發(fā)一個(gè)事件，比如鼠標(biāo)單擊或者按下鍵盤(pán)。 4) 向服務(wù)器發(fā) 起請(qǐng)求：瀏覽器向服務(wù)器發(fā)出一個(gè)請(qǐng)求。 5) 服務(wù)器響應(yīng)請(qǐng)求：服務(wù)器響應(yīng)瀏覽器發(fā)出的請(qǐng)求，將處理結(jié)果返回。這個(gè)返回結(jié)果傳遞給在發(fā)出請(qǐng)求時(shí)指定的請(qǐng)求調(diào)用函數(shù)。 6) 瀏覽器更新頁(yè)面：請(qǐng)求調(diào)用函數(shù)根據(jù)響應(yīng)結(jié)果更新 DOM 內(nèi)容，比如 DOM變量或者任何 JavaScript 變量，更新頁(yè)面內(nèi)容。 “觸發(fā)瀏覽器事件→向服務(wù)器發(fā)起請(qǐng)求→服務(wù)器處理請(qǐng)求→服務(wù)器響應(yīng)請(qǐng)求→瀏覽器更新頁(yè)面”這個(gè)過(guò)程是可以多次循環(huán)的，如圖 25 所示。 在循環(huán)過(guò)程中通常會(huì)有很多的變量產(chǎn)生，很多事件也可能在客戶端解決而不提揚(yáng)州大學(xué)碩士學(xué)位論文 16 用戶訪問(wèn) 頁(yè)面初始化 觸 發(fā) 瀏覽 器 事件 向 服 務(wù)器 發(fā) 起請(qǐng)求 服務(wù)器處理請(qǐng)求 服 務(wù) 器響 應(yīng) 請(qǐng)求 瀏 覽 器更 新 頁(yè)面 循環(huán) 圖 25 Ajax的生命周期 交到服務(wù)器。有些 Ajax 應(yīng)用的生命周期可能是 短暫的，隨著用戶提交表單或者重新刷新頁(yè)面而結(jié)束。其他則持續(xù)呈現(xiàn)在瀏覽器上（用戶不重新刷新頁(yè)面，也不提交表單），一直響應(yīng)用戶的行為。 Ajax 應(yīng)用程序的開(kāi)發(fā)過(guò)程 通過(guò)上述分析，結(jié)合 Ajax 的生命周期，可以 形成一個(gè)發(fā)送和接收XMLHttpRequest 請(qǐng)求的程序框架。 Ajax 實(shí)質(zhì)上也是遵循 Request/Server 模式，所以這個(gè)框架基本的流程也是：對(duì)象初始化→發(fā)送請(qǐng)求→服務(wù)器接收→服務(wù)器返回→客戶端接收→修改客戶端頁(yè)面內(nèi)容。只不過(guò)這個(gè)過(guò)程是異步的。 初始化 XMLHttpRequest 對(duì)象 為了讓 JavaScript 可以向服務(wù)器發(fā)送 HTTP 請(qǐng)求，必須使用 XMLHttpRequest對(duì)象 ,使用之前，要先將 XMLHttpRequest 對(duì)象實(shí)例化 [19]。之前說(shuō)過(guò)，各個(gè)瀏覽器對(duì)這個(gè)實(shí)例化過(guò)程實(shí)現(xiàn)不同。 IE 以 ActiveX 控件的形式提供，而 Mozilla 等瀏覽器則直接以 XMLHttpRequest 類的形式提供。為了讓編寫(xiě)的程序能夠跨瀏覽器運(yùn)行，要這樣寫(xiě)： if() //Mozilla,Safari { _request = new XMLHttpRequest()。} else if() //IE { _request = new ActiveXObject