邂逅 Ajax
當(dāng)使用 Asynchronous JavaScript + XML (Ajax) 開發(fā)技術(shù)增強(qiáng)的應(yīng)用程序第一次出現(xiàn)在網(wǎng)上時(shí)，Web 開發(fā)人員肅然起敬。一夜之間，Web 站點(diǎn)和 Web 應(yīng)用程序的潛在價(jià)值似乎變得無窮無盡了。過去，許多開發(fā)人員和用戶認(rèn)為，Web 站點(diǎn)和 Web 應(yīng)用程序只是其桌面應(yīng)用程序的一個(gè)粗燥、丑陋、復(fù)雜的版本而已。但見識(shí)了 Ajax 增強(qiáng)的應(yīng)用程序和 Web 站點(diǎn)之后，開發(fā)人員和用戶不約而同地意識(shí)到，在瀏覽器中可以做的事情超乎想象。隨著如今的 Web 瀏覽器擁有了處理高級(jí)文檔對(duì)象模型(Document Object Model，DOM)腳本和復(fù)雜層疊樣式表(Cascading Style Sheets，CSS)的能力，需要?jiǎng)?chuàng)建一種能夠更改、更新，以及通過與后臺(tái)服務(wù)器對(duì)話立即響應(yīng)的接口，而 Ajax 給這一任務(wù)劃上了圓滿的句號(hào)。但是，有時(shí)候由于太過興奮導(dǎo)致了用戶體驗(yàn)不太理想。
Web 開發(fā)的游戲規(guī)則已經(jīng)改變了，許多開發(fā)人員一有機(jī)會(huì)就使用 Ajax 完成工作。許多站點(diǎn)甚至放棄了超文本標(biāo)記語言(HTML)，而轉(zhuǎn)為完全使用 JavaScript? 構(gòu)建站點(diǎn)。
創(chuàng)新與可預(yù)見性
Ajax 使 Web 創(chuàng)新成為可能，但同時(shí)增加了違背用戶意愿的可能性。請(qǐng)記住，在向站點(diǎn)添加 Ajax 的同時(shí)，您也承擔(dān)著為用戶修復(fù)它引起的任何問題的責(zé)任。
如果問一般的 Web 用戶覺得 Ajax 技術(shù)怎么樣，他(她)可能只會(huì)茫然的看著你。許多用戶都不關(guān)心他們使用的網(wǎng)站的構(gòu)建技術(shù)。他們對(duì)好的用戶體驗(yàn)更感興趣，即能夠盡可能輕松地完成所需的工作，至于應(yīng)用程序的具體結(jié)構(gòu)，就讓它安全地呆在后臺(tái)吧。
本文分析 Ajax 的能力，同時(shí)探討什么情況下使用 Ajax 將會(huì)弊大于利。希望您能從中獲得靈感，能以從未想過的方式使用 Ajax，也希望您不至于因?yàn)闃?gòu)建一個(gè)流行站點(diǎn)而瘋狂。
擺脫刷新
沒有比不停地刷新 Web 頁面更加煩人的事情了。對(duì)于那些等著看自己是否贏得拍賣、關(guān)注比賽得分、密切關(guān)注天氣預(yù)報(bào)的用戶來說，Ajax 對(duì)這些類型 Web 頁面的增強(qiáng)可以極大地提高用戶體驗(yàn)。
在 Ajax 技術(shù)出現(xiàn)以前，已經(jīng)可以使用簡(jiǎn)單的 JavaScript 代碼實(shí)現(xiàn) Web 頁面的自動(dòng)更新。但是，更新 JavaScript Web 頁面需要刷新整個(gè)頁面。這就是為什么 Ajax 技術(shù)在 Web 應(yīng)用程序中的出現(xiàn)會(huì)對(duì) Web 產(chǎn)生如此重大的影響。
用原來的方法刷新頁面時(shí)，用戶無法與之交互。Ajax 頁面可以異步地(Ajax 中的 A) 向 Web 服務(wù)器請(qǐng)求數(shù)據(jù)，用戶完全無法察覺后臺(tái)正在處理事務(wù)。返回?cái)?shù)據(jù)之后，只會(huì)更新部分頁面。
Web 不需要實(shí)時(shí)
自動(dòng)更新部分頁面使用戶擺脫了刷新之苦，但對(duì) Web 服務(wù)器架構(gòu)卻是一場(chǎng)災(zāi)難。如果 Web 站點(diǎn)一天只有 1,000 個(gè)訪問者，Web 服務(wù)器也許還能夠應(yīng)付。但是如果該站點(diǎn)的每個(gè) Web 頁面每秒鐘使用 Ajax 刷新一次，平均每個(gè)用戶打開該頁面 10 分鐘，那么該站點(diǎn)每天的頁面請(qǐng)求將暴增到 600,000 次。
為了避免 Web 服務(wù)器出現(xiàn)這種情況，開發(fā)人員一定要注意最小化更新頻率。如果知道信息每隔幾分鐘才更新一次，可以嘗試將 Ajax 請(qǐng)求調(diào)整為相同的頻率。如果信息每秒更新一次，則可以考慮在不損害用戶體驗(yàn)的情況下盡可能延長(zhǎng)刷新間隔時(shí)間(比如，每 5 秒或 10 秒刷新一次)。
還可以提供一個(gè)簡(jiǎn)單的刷新鏈接，只有在用戶需要時(shí)才觸發(fā) Ajax 調(diào)用。這類似于瀏覽器的 “刷新” 按鈕，但是，如果只需獲取一小部分?jǐn)?shù)據(jù)，這種方法更加快捷，對(duì) Web 服務(wù)器的要求更低。
小變化，大影響
Ajax 的優(yōu)勢(shì)體現(xiàn)在對(duì)頁面進(jìn)行較小的修改和更新時(shí)。曾幾何時(shí)，即使是微小更新也需要刷新整個(gè) Web 頁面。借助 Ajax 和 JavaScript 代碼，頁面能夠幾乎實(shí)時(shí)地進(jìn)行更新。例如，可以讓頁面在添加新注釋時(shí)更新注釋列表、顯示一個(gè)關(guān)于最新條目的紙條，或者實(shí)時(shí)顯示進(jìn)度條。
開發(fā)人員的關(guān)鍵目標(biāo)應(yīng)該是增加可用性，也就是方便用戶。用戶在等待頁面做出反應(yīng)時(shí)可能會(huì)覺得他們?cè)诶速M(fèi)時(shí)間，在 Web 應(yīng)用程序引入 Ajax 之前，許多用戶更傾向于使用桌面應(yīng)用程序，因?yàn)樽烂鎽?yīng)用程序更加快捷，反應(yīng)更加迅速。Ajax 增強(qiáng)消除了等待和滾動(dòng)時(shí)間，它使 Web 應(yīng)用程序的響應(yīng)能力達(dá)到了許多傳統(tǒng)桌面應(yīng)用程序的水平。
大變化，大災(zāi)難
如果說對(duì)頁面進(jìn)行小的更改可以增強(qiáng)用戶體驗(yàn)，那么大的改動(dòng)(比如幾乎或完全替換整個(gè)頁面的內(nèi)容)則可能讓用戶不知所措并導(dǎo)致不好的結(jié)果。
如果站點(diǎn)使用 Ajax 更新的速率過快，用戶可能會(huì)以為后退和前進(jìn)按鈕以及書簽出現(xiàn)了問題。(Flash 站點(diǎn)與純 Ajax 站點(diǎn)一樣，也容易使人產(chǎn)生這種感覺。)用戶希望可以單擊后退按鈕返回上一頁或上一個(gè)視圖。更加不利于用戶體驗(yàn)的是，當(dāng)用戶再次單擊前進(jìn)按鈕時(shí)，他們沒有回到剛才查看的那個(gè)視圖，而是回到了初始頁面，就像刷新了 Ajax 站點(diǎn)一樣。
如果用戶臨時(shí)加載了一個(gè)頁面，然后返回到剛才查看的站點(diǎn)，結(jié)果發(fā)現(xiàn)頁面已經(jīng)變了，那么他們可能會(huì)很失望。不幸的是，瀏覽器很可能將頁面加載為初始狀態(tài)，經(jīng)常丟失所有的更改。與此類似，如果用戶希望與他人分享某個(gè)站點(diǎn)的特定視圖或頁面，或者將一個(gè)頁面加入書簽，他們認(rèn)為并相信只需要從瀏覽器復(fù)制 URL 并使用即可(目前確實(shí)如此)。
如果頁面的內(nèi)容更改過多，使用戶感覺像是一個(gè)新的頁面，那么還不如直接向他們發(fā)送一個(gè)新頁面。但是，如果開發(fā)人員確實(shí)需要使用 Ajax 更改頁面內(nèi)容，最好使用 Ajax History 工具存儲(chǔ)后退和前進(jìn)按鈕以及書簽功能。這些工具使用哈希值(例如，“#tab3”)改變 URL，而無需加載一個(gè)新頁面。當(dāng)用戶單擊后退或前進(jìn)按鈕，或者加載一個(gè)加入書簽的 URL 時(shí)，JavaScript 代碼查看哈希表并重新生成用戶希望的視圖。當(dāng)然，這只對(duì)支持 JavaScript 語言的瀏覽器有用。
釋放 Web 頁面的信息
您可能已經(jīng)注意到了，Internet 還有另一個(gè)重要特征：似乎可以訪問無限量的信息，而無需在本地機(jī)器上進(jìn)行復(fù)制。有了 Ajax，您可以構(gòu)建一個(gè)與某個(gè)巨大數(shù)據(jù)庫(無論它位于全球的哪個(gè)服務(wù)器)連接的互動(dòng)界面，實(shí)現(xiàn)前所未有的功能。
Google Maps 就是這種 Ajax 應(yīng)用程序之一，它集中體現(xiàn)了開發(fā)人員和用戶的想象力。在這個(gè) Web 站點(diǎn)上，您可以瀏覽整個(gè)地球的地圖和衛(wèi)星照片，而無需刷新頁面。以這種方式釋放數(shù)據(jù)可能是 Ajax 最具價(jià)值的潛在用途。
在 Google Maps 出現(xiàn)之前，地圖網(wǎng)站已經(jīng)出現(xiàn)了很多年，但是 Google Maps 是與眾不同的，因?yàn)?Ajax 所允許的界面是前所未有的。在傳統(tǒng)的地圖網(wǎng)站上，將視圖向西移動(dòng)需要單擊一個(gè)鏈接。然后出現(xiàn)一個(gè)新頁面，它包含生成的調(diào)整后的地圖。所以必須等待頁面清除，再次加載，然后滾動(dòng)到該地圖。
這種糟糕的界面是由 Web 的根本局限性導(dǎo)致的。獲取 Web 服務(wù)器數(shù)據(jù)的惟一方式是訪問一個(gè)新的 URL，然后下載包含新內(nèi)容的新 Web 頁面。如果希望查看當(dāng)前視圖任何微小更改(比如向西移動(dòng)一點(diǎn))，必須加載整個(gè)新地圖。由于 Ajax 允許在后臺(tái)異步獲取數(shù)據(jù)，因此無需清除和加載整個(gè)頁面。只需要加載地圖的數(shù)據(jù)和圖片碎片。也可以為特定的地圖視圖生成 URL，但這不再是加載更多信息的惟一途徑。
您可以使用 Web 頁面作為許多其他場(chǎng)景數(shù)據(jù)的界面?？紤]一個(gè)分頁場(chǎng)景，比如查看分為很多頁的搜索結(jié)果時(shí)。用戶界面控件(比如上一頁和下一頁)不需要每次都加載整個(gè)新 Web 頁面。使用 Ajax，您可以異步加載下一頁的結(jié)果，并相應(yīng)地更新頁面。甚至可以預(yù)加載下一頁，以便在用戶希望查看時(shí)立即顯示。
通過文檔與信息的分離，還可以加快速度并節(jié)省帶寬。大多數(shù)情況下，可擴(kuò)展標(biāo)記語言(XML)或者 JavaScript Serialized Object Notion (JSON) 形式的原始數(shù)據(jù)比 Web 頁面的 HTML 表示形式要小，特別是頁面的剩余部分(比如標(biāo)題、導(dǎo)航、腳注尤其明顯)。
將信息留在 Web 頁面上
Ajax 打開了從 Web 服務(wù)器獲取原始數(shù)據(jù)的方便之門，但這并不意味著您不再需要老式的 Web 頁面。用戶能夠通過 URL 訪問數(shù)據(jù)片斷很重要，因?yàn)檫@樣才能與他人分享。
Ajax 還能讓搜索引擎抓取您的站點(diǎn)。針對(duì)搜索引擎對(duì)站點(diǎn)內(nèi)容進(jìn)行優(yōu)化不僅僅是為了將用戶吸引到站點(diǎn)中，它同時(shí)也是一個(gè)可用性問題。您也許通過搜索引擎找到了大多數(shù)要用的站點(diǎn)，也可能只使用大多數(shù)站點(diǎn)的一兩個(gè)頁面。如果站點(diǎn)提供的內(nèi)容被隱藏在 Ajax 技術(shù)背后，那么搜索引擎將無法搜索到，從而世界上大多數(shù)人都無法找到您的站點(diǎn)。因此讓站點(diǎn)的信息可以通過傳統(tǒng)的 HTML 頁面瀏覽非常重要，即使還可以通過 JSON 或 XML 瀏覽。
Ajax 可以拯救站點(diǎn)
Web 用戶界面通常能夠讓用戶在 Web 服務(wù)器上保存數(shù)據(jù)，或者輕松創(chuàng)建、更新、刪除條目。 當(dāng)然，這些任務(wù)總是能夠通過 HTML 形式實(shí)現(xiàn)，但是 Ajax 能更加便捷地在后臺(tái)異步發(fā)送數(shù)據(jù)。試想使用 Ajax 和 JavaScript 代碼簡(jiǎn)化添加、編輯和刪除內(nèi)容，它們使條目列表的管理變得更加簡(jiǎn)單。還可以增強(qiáng)單個(gè)條目的添加，比如在消息板上編寫，只需要使用 Ajax 向服務(wù)器發(fā)送消息，然后使用 DOM 腳本將消息立即添加到頁面。
Ajax 可以毀滅站點(diǎn)
大多數(shù)用戶不希望 Web 站點(diǎn)使用 Ajax;很多用戶甚至從未聽說過 Ajax。因此，在使用 Ajax 設(shè)計(jì)頁面時(shí)，一定要確保程序與目標(biāo)用戶能夠交流。例如，如果使用 Ajax 向服務(wù)器提交一個(gè)表單或發(fā)送數(shù)據(jù)，則在發(fā)生以下動(dòng)作時(shí)，應(yīng)用程序必須與用戶進(jìn)行交流：
正在發(fā)送或獲取數(shù)據(jù)時(shí)。此動(dòng)作常常通過動(dòng)態(tài)圖片指示，比如一個(gè)旋轉(zhuǎn)指針，或者通過短語 “Loading…” 或 “Saving…” 指示。
成功發(fā)送或獲取數(shù)據(jù)時(shí)?？梢燥@示 “Success” 消息，也可以使用 JavaScript 動(dòng)畫將用戶的注意力吸引到頁面的特定部分。
與 Web 服務(wù)器對(duì)話過程中出現(xiàn)錯(cuò)誤或超時(shí)。通常給出一條解釋消息，提示用戶再試一次。
如果應(yīng)用程序無法交流，則用戶將不知道到底發(fā)生了什么事情。如果單擊 Form Submit 按鈕時(shí)什么也沒有發(fā)生，則用戶會(huì)認(rèn)為 Web 站點(diǎn)出了問題。如果應(yīng)用程序無法提示發(fā)生了錯(cuò)誤，則用戶一般會(huì)認(rèn)為他們的操作成功。如果實(shí)際情況是沒有成功，那么用戶的這種假設(shè)可能導(dǎo)致極度的失望，尤其是花了很長(zhǎng)時(shí)間完成表單內(nèi)容時(shí)。如果應(yīng)用程序在出現(xiàn)問題或超時(shí)通知用戶，至少用戶還有機(jī)會(huì)進(jìn)行復(fù)制粘貼，在本地保存數(shù)據(jù)，從而避免了最糟的用戶體驗(yàn)。
尋找 Ajax 力量的平衡點(diǎn)
漸進(jìn)式增強(qiáng) —— 黃金法則：
為了幫助確保應(yīng)用程序的設(shè)計(jì)能提供最好的體驗(yàn)，最好遵守漸進(jìn)式增強(qiáng)的黃金法則：首先不用任何 JavaScript 代碼開發(fā)，然后在站點(diǎn)開始運(yùn)行后添加 JavaScript 代碼。
Ajax 使 Web 創(chuàng)新成為可能，但同時(shí)增加了違背用戶意愿的可能性。請(qǐng)記住，在向站點(diǎn)添加 Ajax 的同時(shí)，您也必須為用戶修復(fù)它導(dǎo)致的任何問題。
漸進(jìn)式增強(qiáng) 是一個(gè) Web 開發(fā)戰(zhàn)略，它能確保所有的內(nèi)容和功能可用于所有的瀏覽器，但是也支持更加先進(jìn)的 Web 瀏覽器利用 JavaScript 編程和 Ajax 創(chuàng)造更好的用戶體驗(yàn)。為了幫助確保應(yīng)用程序的設(shè)計(jì)能提供最好的體驗(yàn)，最好遵守漸進(jìn)式增強(qiáng)的黃金法則：首先不用任何 JavaScript 代碼開發(fā)，然后在站點(diǎn)開始運(yùn)行后添加 JavaScript 代碼。從根本上說，您構(gòu)建一個(gè)基本的 Web 站點(diǎn)，讓實(shí)際鏈接和表單都指向真實(shí)的 URL。然后，使用 JavaScript 編程和 Ajax 更改這些鏈接和表單的功能。
例如，假設(shè)您希望有一個(gè)評(píng)論表單能夠使用 Ajax 提交評(píng)論，并能更新頁面以在合適的位置顯示評(píng)論，所有過程都不需要刷新頁面。首先，像往常一樣構(gòu)建評(píng)論表單，不使用任何 JavaScript 代碼，保證它能正常運(yùn)行。接下來，向表單添加一個(gè) JavaScript onsubmit 事件。表單提交時(shí)，使用 Ajax 將評(píng)論保存到服務(wù)器，使用 DOM 腳本更新頁面。這樣一來，對(duì)于不支持 JavaScript 語言的 Web 瀏覽器表單也能運(yùn)行良好，對(duì)于更先進(jìn)的 Web 瀏覽器將會(huì)運(yùn)行的更好。
developerWorks Ajax 資源中心
訪問 Ajax 資源中心，這是一個(gè)一站式中心，包含用于開發(fā) Ajax 應(yīng)用程序的免費(fèi)工具、代碼和信息。在 Ajax 專家 Jack Herrington 維護(hù)的 活躍的 Ajax 社區(qū)論壇 中可能有您正在尋求的問題的答案。
有些 Web 站點(diǎn)完全使用 JavaScript 代碼和 Ajax 構(gòu)建，我建議在任何情況下都應(yīng)該避免這樣做。構(gòu)建這樣的站點(diǎn)意味著將一部分潛在的網(wǎng)絡(luò)人群排除在外，而且不僅僅是選擇禁用 JavaScript 語言支持的用戶。同時(shí)被排除在外的還有搜索引擎，以及在 Web 上進(jìn)行搜索的人。此外，使用未經(jīng)測(cè)試的設(shè)備和瀏覽器訪問站點(diǎn)內(nèi)容的潛在用戶也被排除在外。請(qǐng)記住，對(duì)于純 JavaScript 站點(diǎn)，最微小的 JavaScript 錯(cuò)誤也會(huì)導(dǎo)致整個(gè)站點(diǎn)的損壞。如果有非 JavaScript 站點(diǎn)的支持，就可以確保不會(huì)阻擋任何潛在用戶(和潛在客戶!)訪問您的內(nèi)容。
結(jié)束語
Ajax 徹底顛覆了開發(fā)人員構(gòu)建 Web 應(yīng)用程序的方式，其結(jié)果可好可壞。重點(diǎn)在于要確保選擇在應(yīng)用程序中包含的 Ajax 增強(qiáng)能提高用戶體驗(yàn)。盡可能避免出現(xiàn)令人混淆的、不可預(yù)計(jì)的，以及讓人失望的情形。對(duì)于許多開發(fā)人員，這些決策可能關(guān)系著公司的成敗。
聯(lián)系客服
