【文章內(nèi)容簡介】 索； 使用 JavaScript 將所有的東西綁定在一起。英文參見 Ajax 的提出者Jesse James Garrett 的原文 ,原文題目 (Ajax: A New Approach to Web Applications)。 類似于 DHTML 或 LAMP， AJAX 不是指一種單一的技術(shù)，而是有機地利用了一系列相關(guān)的技術(shù)。事實上，一些基于 AJAX 的 “派生 /合成 ”式（ derivative/posite）的技術(shù)正在出現(xiàn)，如 “AFLAX”。 AJAX 的應(yīng)用使用支持以上技術(shù)的 web 瀏覽 器作為運行平臺。這些瀏覽器目前包括： Mozilla Firefox、 Inter Explorer、 Opera、 Konqueror 及Safari。但是 Opera 不支持 XSL 格式對象，也不支持 XSLT。 該技術(shù)在 1998 年前后得到了應(yīng)用。允許客戶端腳本發(fā)送 HTTP 請求(XMLHTTP)的第一個組件由 Outlook Web Access 小組寫成。該組件原屬于微軟 Exchange Server，并且迅速地成為了 Inter Explorer [3]的一部分。部分觀察家認為， Outlook Web Access 是第一個應(yīng)用了 Ajax 技術(shù)的成功的商業(yè)應(yīng)用程序，并成為包括 Oddpost 的網(wǎng)絡(luò)郵件產(chǎn)品在內(nèi)的許多產(chǎn)品的領(lǐng)頭羊。但是， 2021 年初，許多事件使得 Ajax 被大眾所接受。 Google 在它著名的交互應(yīng)用程序中使用了異步通訊，如 Google 討論組、 Google 地圖、Google 搜索建議、 Gmail 等。 Ajax 這個詞由《 Ajax: A New Approach to Web Applications》一文所創(chuàng)，該文的迅速流傳提高了人們使用該項技術(shù)的意識。另外，對 Mozilla/Gecko 的支持使得該技術(shù)走向成 熟，變得更為易用。 AJAX 前景非常樂觀，可以提高系統(tǒng)性能，優(yōu)化用戶界面。 AJAX 現(xiàn)有直接框架 AjaxPro，可以引入 文件，可以直接在前臺頁面JS 調(diào)用后臺頁面的方法。但此框架與 FORM 驗證有沖突。另微軟也引入了 AJAX 組建，需要添加 文件，可以在控件列表中基于 AJAX 技術(shù)的虛擬閱讀室 7 出現(xiàn)相關(guān)控件，但如以往微軟控件類似，屬于雞肋，靈活性較差 。 傳統(tǒng)的 web 應(yīng)用允許用戶填寫表單 (form)，當(dāng)提交表單時就向 web 服務(wù)器發(fā)送一個請求。服務(wù)器接收并處理傳來的表單，然後返回一個 新的網(wǎng)頁。這個做法浪費了許多帶寬，因為在前後兩個頁面中的大部分 HTML 代碼往往是相同的。由于每次應(yīng)用的交互都需要向服務(wù)器發(fā)送請求，應(yīng)用的響應(yīng)時間就依賴于服務(wù)器的響應(yīng)時間。這導(dǎo)致了用戶界面的響應(yīng)比本地應(yīng)用慢得多。 與此不同， AJAX 應(yīng)用可以僅向服務(wù)器發(fā)送并取回必需的數(shù)據(jù)，它使用 SOAP 或其它一些基于 XML 的 web service 接口，并在客戶端采用JavaScript 處理來自服務(wù)器的響應(yīng)。因為在服務(wù)器和瀏覽器之間交換的數(shù)據(jù)大量減少，結(jié)果我們就能看到響應(yīng)更快的應(yīng)用。同時很多的處理工作可以在發(fā)出請求的客戶端機器上 完成，所以 Web 服務(wù)器的處理時間也減少了。 使用 Ajax 的最大優(yōu)點，就是能在不更新整個頁面的前提下維護數(shù)據(jù)。這使得 Web 應(yīng)用程序更為迅捷地回應(yīng)用戶動作，并避免了在網(wǎng)絡(luò)上發(fā)送那些沒有改變過的信息。 Ajax 不需要任何瀏覽器插件，但需要用戶允許 JavaScript 在瀏覽器上執(zhí)行。就像 DHTML 應(yīng)用程序那樣， Ajax 應(yīng)用程序必須在眾多不同的瀏覽器和平臺上經(jīng)過嚴格的測試。隨著 Ajax 的成熟，一些簡化 Ajax 使用方法的程序庫也相繼問世。同樣，也出現(xiàn)了另一種輔助程序設(shè)計的技術(shù)，為那些不支持 JavaScript 的用戶提供 替代功能。 對應(yīng)用 Ajax 最主要的批評就是，它可能破壞瀏覽器后退按鈕的正常行為 [4]。在動態(tài)更新頁面的情況下，用戶無法回到前一個頁面狀態(tài)，這是因為瀏覽器僅能記下歷史記錄中的靜態(tài)頁面。一個被完整讀入的頁面與一個已經(jīng)被動態(tài)修改過的頁面之間的差別非常微妙；用戶通常都希望單擊后退按鈕，就能夠取消他們的前一次操作，但是在 Ajax 應(yīng)用程序中，卻無法這樣做。不過開發(fā)者已想出了種種辦法來解決這個問題，當(dāng)中大多數(shù)都是在用戶單擊后退按鈕訪問歷史記錄時，通過建立或使用一個隱藏的IFRAME 來重現(xiàn)頁面上的變更。（例如，當(dāng)用戶在 Google Maps 中單擊后退時，它在一個隱藏的 IFRAME 中進行搜索，然后將搜索結(jié)果反映到 Ajax元素上，以便將應(yīng)用程序狀態(tài)恢復(fù)到當(dāng)時的狀態(tài)。） 一個相關(guān)的觀點認為，使用動態(tài)頁面更新使得用戶難于將某個特定的狀態(tài)保存到收藏夾中。該問題的解決方案也已出現(xiàn)，大部分都使用 URL基于 AJAX 技術(shù)的虛擬閱讀室 8 片斷標識符（通常被稱為錨點，即 URL 中 后面的部分）來保持跟蹤，允許用戶回到指定的某個應(yīng)用程序狀態(tài)。（許多瀏覽器允許 JavaScript 動態(tài)更新錨點，這使得 Ajax 應(yīng)用程序能夠在更新顯示內(nèi)容的同時更新錨點。）這些解決方案也同時解決了許多關(guān)于不 支持后退按鈕的爭論。 進行 Ajax 開發(fā)時，網(wǎng)絡(luò)延遲 ——即用戶發(fā)出請求到服務(wù)器發(fā)出響應(yīng)之間的間隔 ——需要慎重考慮。不給予用戶明確的回應(yīng) ，沒有恰當(dāng)?shù)念A(yù)讀數(shù)據(jù) ，或者對 XMLHttpRequest 的不恰當(dāng)處理，都會使用戶感到延遲，這是用戶不欲看到的，也是他們無法理解的。通常的解決方案是， 使用一個可視化的組件來告訴用戶系統(tǒng)正在進行后臺操作并且正在讀取數(shù)據(jù)和內(nèi)容 。 XML HTTP Request (1)XMLHttpRequest 簡介 XMLHttpRequest，是我們得以實現(xiàn)異步通訊的根本。最早 在 IE 5 中以 ActiveX 組件實現(xiàn)；最近， Mozilla 和 Safari 中實現(xiàn)為本地對象。XMLHttpRequest 雖然不是 W3C 標準，但卻得到了 FireFox、 Safari、 Opera、Konqueror、 IE 等絕大多數(shù)瀏覽器的支持。這就使得 Ajax 有了今天如火如荼的發(fā)展。 用 XMLHttpRequest 進行異步通訊，首先必須用 JavaScript 創(chuàng)建一個XMLHttpRequest 對象實例。創(chuàng)建 XMLHttpRequest 對象實例的代碼清單如下所示： var xmlHttp。 function createXMLHttpRequest(){ if(){ xmlHttp = new ActiveXObject()。 } else if(){ xmlHttp = new XMLHttpRequest()。 } } 可以看出，創(chuàng)建 XMLHttpRequest 對象相當(dāng)容易。首先，聲明一個全局變量 xmlHttp 用來保存即將創(chuàng)建的 XMLHttpRequest 對象的 引用；然后，在 createXMLHttpRequest()方法中完成具體創(chuàng)建工作。因為 IE 與其他瀏覽器對 XMLHttpRequest 對象的實現(xiàn)方法不同，因此在創(chuàng)建時，通過一個基于 AJAX 技術(shù)的虛擬閱讀室 9 分支語句進行判斷。如果 調(diào)用返回 true，則證明為 IE 瀏覽器，那么就通過傳遞“ ”給 ActiveXObject()來創(chuàng)建 XMLHttpRequest 對象，否則就把 XMLHttpRequest 實現(xiàn)為本地JavaScript 對象。 XMLHttpRequest 對象在不同瀏 覽器上的實現(xiàn)是兼容的，所以可以用同樣的方法訪問 XMLHttpRequest 的方法和屬性。 表 1 標準 XMLHttpRequest 方法 方 法 說 明 abort() getAllResponseHeader() getResponseHeader(Header) open(method, url) send(content) setRequestHeader(header, value) 停止當(dāng)前請求 把 HTTP 請求的所有響應(yīng)頭部作為鍵 /值對返回 返回指定首部的 串值 建立對服務(wù)器的調(diào)用 向服務(wù)器發(fā)送請求 把指定首部設(shè)置為所提供的值 表 2 標準 XMLHttpRequest 屬性 屬 性 說 明 onreadystatechange readyState responseText responseXML status statusText 每個狀態(tài)改變都會觸發(fā)這個事件處理器 請求的狀態(tài)： 0－未初始化， 1－正在加載， 2－已加載， 3－交互中， 4－完成 服務(wù)器的響應(yīng)，表示為一個文本字符串值 服務(wù)器的響應(yīng)，表示為一個 XML 服務(wù)器的 HTTP 狀 態(tài)碼 HTTP 狀態(tài)碼的相應(yīng)文本 1． 利用 XMLHttpRequest 對象發(fā)送簡單請求 創(chuàng)建了 XMLHttpRequest 對象，并了解了 XMLHttpRequest 對象的方法和屬性之后，讓我們來看看怎樣利用 XMLHttpRequest 對象發(fā)送簡單的請求。利用 XMLHttpRequest 對象發(fā)送簡單請求的基本步驟如下： 1） 創(chuàng)建 XMLHttpRequest 對象實例。 2） 設(shè)定 XMLHttpRequest 對象的回調(diào)函數(shù)，利用 onreadystatechange屬性。 3） 設(shè)定請求屬性：設(shè)定 HTTP 方法（ GET 或 POST）；設(shè)定 目標 URL。利基于 AJAX 技術(shù)的虛擬閱讀室 10 用 open()方法。 將請求發(fā)送給服務(wù)器。利用 send()方法。 DOM 文檔對象模型（ Document Object Model， DOM）是一種用于 HTML和 XML 文檔的編程接口。它給文檔提供了一種結(jié)構(gòu)化的表示方法，可以改變文檔的內(nèi)容和呈現(xiàn)方式。我們最為關(guān)心的是， DOM 把網(wǎng)頁和腳本以及其他的編程語言聯(lián)系了起來。腳本開發(fā)人員可以通過文檔對象的屬性、方法和事件來掌控、操縱和創(chuàng)建動態(tài)的網(wǎng)頁元素。每一個網(wǎng)頁元素（一個HTML 標簽）都對應(yīng)著一個對象（ object，所謂“對象”，用白話說就是 “東西”。 object 這個詞在臺灣通常翻譯成“物件”）。網(wǎng)頁上的標簽是一層層嵌套的，最外面的一層是 HTML，文檔對象模型也這樣一層層嵌套著，但是通常被理解成一棵樹的形狀。樹根是 window 或 document 對象，相當(dāng)于最外層的標簽的外圍，也就是整個文檔。樹根之下（這棵樹的圖通常是倒著畫，就好像遺傳譜系或者家譜那樣。樹根就是唯一的共同祖先）是子一級的對象，子對象也有它自己的子對象，除了根對象以外，所有的對象都有自己的父對象，同一對象的子對象之間就是兄弟的關(guān)系。在這種由“父子兄弟”組成的“單性繁殖家族圖譜樹 ”框架結(jié)構(gòu)中，每個網(wǎng)頁元素都可以被確切地定位。文檔對象模型把整張網(wǎng)頁組織成這樣的一個樹狀的結(jié)構(gòu)，樹結(jié)構(gòu)中的每一個元素都被視為一個節(jié)點（ node）。包括 JavaScript在內(nèi)的各種編程語言都可以通過文檔對象模型來訪問和改變網(wǎng)頁的各種細節(jié)。萬維網(wǎng)協(xié)會（ World Wide Web Consortium， W3C）已經(jīng)給文檔對象模型制定了一系列標準，并且正在制定更多的相關(guān)標準。當(dāng)代的瀏覽器除支持其中的一部分標準之外，還支持某些早在 W3C 標準制定以前就流行了的歷史既成的編程接口。也就是說現(xiàn)在瀏覽器使用的技術(shù)歷史由來 紛繁復(fù)雜，有些人們普遍使用的 DOM 技術(shù)并無標準可依。我們將深入所有通用 DOM 的細節(jié)（包括 IE 瀏覽器中“與眾不同”的某些技術(shù)），以全面掌握面向?qū)嵺`的技術(shù)。 CSS CSS 就是一種叫做樣式表（ stylesheet）的技術(shù)。也有的人稱之為層疊樣式表（ Cascading Stylesheet）。 在主頁制作時采用 CSS 技術(shù)，可以有效地對頁面的布局、字體、顏色、背景和其它效果實現(xiàn)更加精確的控制。只要對相應(yīng)的代碼做一些簡單的修改，就可以改變同一頁面的不同部分，或者頁數(shù)不同的網(wǎng)頁的外觀和格式。 基于 AJAX 技術(shù)的虛擬閱讀室 11 它的作用可以 達到： （ 1）在幾乎所有的瀏覽器上都可以使用。 （ 2）以前一些非得通過圖片轉(zhuǎn)換實現(xiàn)的功能，現(xiàn)在只要用 CSS 就可以輕松實現(xiàn)，從而更快地下載頁面。 （ 3）使頁面的字體變得更漂亮，更容易編排，使頁面真正賞心悅目。 （ 4）你可以輕松地控制頁面的布局 。 （ 5）你可以將許多網(wǎng)頁的風(fēng)格格式同時更新，不用再一頁一頁地更新了。你可以將站點上所有的網(wǎng)頁風(fēng)格都使用一個 CSS 文件進行控制，只要修改這個 CSS 文件中相應(yīng)的行，那么整個站點的所有頁面都會隨之發(fā)生變動。 想一想，沒有使用 CSS 前我們是如何控制字體的顏色和大小以及 所使用的字體的？我們一般使用 HTML 標簽來實現(xiàn)，代碼非常煩瑣。很難想象，如果在一個頁面里需要頻繁地更替字體的顏色大小，最終生成的 HTML 代碼的長度一定臃腫不堪。說實話， CSS 就是為了簡化這樣的工作誕生的，當(dāng)然其功能決非這么簡單。 CSS 是通過對頁面結(jié)構(gòu)的風(fēng)格控制的思想，控制整個頁面的風(fēng)格的。 式樣單放在頁面中，通過瀏覽器的解釋執(zhí)行，是完全的文本，任何懂得 HTML 的人都可以掌握，非常