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