通過 AJAX，您的 JavaScript 可使用 JavaScript 的 XMLHttpRequest 對(duì)象來直接與服務(wù)器進(jìn)行通信。通過這個(gè)對(duì)象，您的 JavaScript 可在不重載頁面的情況與 Web 服務(wù)器交換數(shù)據(jù)。下面介紹Ajax開發(fā)時(shí)需要思考的幾個(gè)基本原則

我們用到的很多框架中都已經(jīng)固化了基于頁面的傳統(tǒng)應(yīng)用模式，同時(shí)這些應(yīng)用模式也已經(jīng)深深進(jìn)入了我們的思想中。我們花幾分鐘來揭示出哪些核心概念是我們需要重新思考的，以及如何從Ajax的角度來重新思考。

一、瀏覽器中的是應(yīng)用而不是內(nèi)容

在傳統(tǒng)的基于頁面的Web應(yīng)用中，瀏覽器扮演著啞終端1的角色。它對(duì)用戶處于操作流程哪一階段一無所知。這些信息全部都保存在服務(wù)器上，確切地說，就是在用戶會(huì)話上。時(shí)至今日，服務(wù)器端的用戶會(huì)話早已是司空見慣。如果你使用Java 或者.NET 編程，服務(wù)器端的用戶會(huì)話更是標(biāo)準(zhǔn)API 的一部分——還有Request、Response、MIME 類型——沒有了它們簡直不可想象。

當(dāng)用戶登錄或者以其他方式初始化一個(gè)會(huì)話時(shí)，系統(tǒng)會(huì)創(chuàng)建幾個(gè)服務(wù)器端的對(duì)象。例如，電子商務(wù)類型的網(wǎng)站需要?jiǎng)?chuàng)建表示購物車以及用戶身份證明的對(duì)象。同時(shí)將瀏覽器站點(diǎn)的首頁呈現(xiàn)給用戶，這個(gè)HTML 標(biāo)記的數(shù)據(jù)流由模板文件以及特定于該用戶的數(shù)據(jù)和內(nèi)容（例如該用戶最近瀏覽的商品列表）組成。

用戶每次和服務(wù)器交互，都會(huì)獲得另一個(gè)文檔。在這個(gè)文檔中，除了特定于該用戶的數(shù)據(jù)以外，包含的其他模板文件和數(shù)據(jù)都是相同的。瀏覽器總是忠實(shí)地丟棄掉老的文檔，顯示新的文檔，因?yàn)樗菃〗K端，而且也不知道還可以做些什么。

當(dāng)用戶選擇退出或者關(guān)閉瀏覽器的時(shí)候，應(yīng)用退出，會(huì)話消失。這個(gè)時(shí)候持久層會(huì)把用戶下次登錄后需要顯示的信息存儲(chǔ)起來。Ajax則不同，它把一部分應(yīng)用邏輯從服務(wù)器端移到了瀏覽器端。

傳統(tǒng)Web應(yīng)用的生命周期。用戶和應(yīng)用會(huì)話的所有狀態(tài)都保留在Web服務(wù)器上。用戶在會(huì)話中看到的是一系列的頁面，每次頁面切換都不可避免地要到服務(wù)器上走一個(gè)來回。

Ajax應(yīng)用的生命周期。用戶登錄后，服務(wù)器交付一個(gè)客戶端應(yīng)用給瀏覽器。這個(gè)應(yīng)用可以獨(dú)立處理很多的用戶交互，對(duì)于自己無法獨(dú)立處理的交互，應(yīng)用會(huì)以后臺(tái)方式發(fā)送請(qǐng)求給服務(wù)器，而不會(huì)打斷用戶的操作流程。
用戶登錄的時(shí)候，服務(wù)器交付給瀏覽器一個(gè)復(fù)雜得多的文檔，其中包含大量的JavaScript代碼。這個(gè)文檔將會(huì)在整個(gè)會(huì)話的生命周期內(nèi)與用戶相伴。在這一過程中，隨著用戶與其交互，它的外觀可能會(huì)發(fā)生相當(dāng)大的變化。它知道如何響應(yīng)用戶的輸入，能夠決定對(duì)于這些請(qǐng)求，是自行處理還是傳遞給Web服務(wù)器（Web服務(wù)器再去訪問數(shù)據(jù)庫或者其他資源），或者通過兩者結(jié)合的方式進(jìn)行處理。因?yàn)檫@個(gè)文檔在整個(gè)用戶會(huì)話中都存在，所以它可以保存狀態(tài)1。例如，購物車的內(nèi)容可以保存在瀏覽器中而不是服務(wù)器的會(huì)話中。

二、服務(wù)器交付的是數(shù)據(jù)而不是內(nèi)容

我們已經(jīng)提到，在傳統(tǒng)的Web應(yīng)用中，服務(wù)器在每個(gè)步驟都需要把模板文件、內(nèi)容和數(shù)據(jù)混合發(fā)送給瀏覽器。但實(shí)際上，當(dāng)向購物車中添加一件物品的時(shí)候，服務(wù)器真正需要響應(yīng)的僅僅是更新一下購物車中的價(jià)格。

基于Ajax的購物車可以向服務(wù)器發(fā)起一個(gè)異步請(qǐng)求來完成這件事，這樣做顯得更聰明。模板文件、導(dǎo)航列表和頁面布局上的其他部分已經(jīng)隨著初始頁面發(fā)送給了瀏覽器，服務(wù)器無需重發(fā)，以后每次只需要發(fā)送相關(guān)的數(shù)據(jù)就可以了。Ajax應(yīng)用可以通過多種方式來做這件事情。例如，返回一段JavaScript代碼、一段純文本或者一小段XML文檔。這些方式各自的優(yōu)缺點(diǎn)，我們將留到第5 章再詳細(xì)考察。但是，毫無疑問的是，無論返回?cái)?shù)據(jù)采用何種格式，這些方式所傳輸?shù)臄?shù)據(jù)量都要比傳統(tǒng)的Web應(yīng)用中一股腦返回一個(gè)大雜燴的方式少得多。

在Ajax應(yīng)用中，網(wǎng)絡(luò)的通信流量主要是集中在加載的前期，無論如何，用戶登錄后是需要一次性地將一個(gè)大而復(fù)雜的客戶端交付給瀏覽器。但是在此之后，與服務(wù)器的通信則會(huì)有效率得多。對(duì)于瞬態(tài)應(yīng)用來說，積累起來的通信流量要比以前的基于頁面的Web應(yīng)用少很多。與此同時(shí)，平均的交互次數(shù)則有所增加。整體而言，Ajax應(yīng)用的帶寬消耗要比傳統(tǒng)的Web應(yīng)用低一些。

三、用戶交互變得流暢而連續(xù)

瀏覽器提供了兩種輸入機(jī)制：超鏈接和HTML 表單。超鏈接可以在服務(wù)器上創(chuàng)建，并預(yù)加載指向動(dòng)態(tài)服務(wù)器頁面或者servlet 的CGI 參數(shù)?？梢杂脠D片或者CSS（層疊樣式表）來裝飾超鏈接，并且當(dāng)鼠標(biāo)停在上面時(shí)還可以提供基本的反饋。經(jīng)過合理設(shè)計(jì)，超鏈接可以變成一個(gè)很有想像力的UI 組件。表單則提供了桌面應(yīng)用的一組基礎(chǔ)UI 組件：輸入文本框、單選按鈕和多選按鈕，還有下拉列表。但仍然缺少很多有用的UI 組件，例如，沒有可用的樹控件、可編輯的柵格、組合輸入框等。表單像超鏈接一樣，也指向服務(wù)器的一個(gè)URL 地址。

超鏈接和表單也可以指向JavaScript函數(shù)。這一技術(shù)通常用在將數(shù)據(jù)提交給服務(wù)器之前對(duì)表單輸入進(jìn)行簡單的校驗(yàn)，如檢驗(yàn)是否有空值，數(shù)值是否越界等等。這些JavaScript函數(shù)的生存期和頁面本身是一致的，當(dāng)頁面提交之后，這些函數(shù)也就不存在了。

當(dāng)一個(gè)頁面已提交而下一個(gè)頁面還沒有顯示出來的時(shí)候，用戶實(shí)際上處于沒人管的狀態(tài)。老的頁面還要顯示一會(huì)兒，瀏覽器甚至還會(huì)允許用戶點(diǎn)擊一些鏈接。但這些點(diǎn)擊可能會(huì)導(dǎo)致一些不可預(yù)料的結(jié)果，甚至破壞服務(wù)器端會(huì)話的狀態(tài)。用戶通常應(yīng)該等到頁面刷新完成，當(dāng)然也可以選擇在刷新完成之前就在新頁面上做一些操作。例如，當(dāng)頁面只顯示了一部分時(shí)從中選擇一條褲子放進(jìn)購物車不大可能會(huì)造成什么破壞（例如，不會(huì)修改頂級(jí)的服裝分類：男裝、女裝、童裝、配飾）。我們繼續(xù)看這個(gè)購物車的例子。Ajax的購物車是通過異步方式發(fā)送數(shù)據(jù)的，用戶可以很快地把東西拖進(jìn)來，就像點(diǎn)擊一樣快。只要客戶端購物車的代碼足夠健壯，它可以很輕松地處理這樣的負(fù)載，而用戶則可以繼續(xù)做他想做的事。

要知道，在服務(wù)器端并沒有一個(gè)真正的購物車等著裝東西，只有會(huì)話中的一個(gè)對(duì)象而已。購物的時(shí)候，用戶并不想知道會(huì)話對(duì)象，購物車對(duì)于用戶而言是一個(gè)較恰當(dāng)?shù)谋扔鳎矛F(xiàn)實(shí)世界中熟悉的概念來描述這里發(fā)生的事情。對(duì)于用戶來說，如果強(qiáng)迫他們?nèi)ダ斫庥?jì)算機(jī)領(lǐng)域中的術(shù)語，只會(huì)讓他們遠(yuǎn)離網(wǎng)站。等待頁面的刷新，一下子就把用戶從愉快的使用體驗(yàn)中拽了出來，讓他感覺到自己所面對(duì)的只不過是一臺(tái)冰冷的機(jī)器罷了。使用Ajax來實(shí)現(xiàn)這些應(yīng)用則可以避免這些令人不快的體驗(yàn)。當(dāng)然了，在這個(gè)例子中的購物只是一個(gè)瞬態(tài)活動(dòng)?？疾煲幌缕渌臉I(yè)務(wù)領(lǐng)域，例如，一個(gè)業(yè)務(wù)量很大的幫助中心或者一項(xiàng)復(fù)雜的工程任務(wù)，如果因?yàn)樾枰却撁嫠⑿?，而將工作流程打斷幾秒鐘，那肯定是不可接受的?/p>

Ajax的另一個(gè)好處是，我們可以對(duì)豐富的用戶操作事件進(jìn)行捕獲。類似于拖拽這樣的復(fù)雜UI 概念也不再是遙不可及的。這使得Web應(yīng)用的UI 體驗(yàn)可以全面提升到近乎與桌面應(yīng)用的UI組件相媲美的高度。從可用性的角度來看，這很重要，不僅僅是因?yàn)樗尫帕宋覀兊南胂罅?，而且也是因?yàn)樗梢詫⒂脩艚换ズ头?wù)器端的請(qǐng)求更加充分地混合起來。在傳統(tǒng)的Web應(yīng)用中，與服務(wù)器交互需要點(diǎn)擊超鏈接或者提交表單，然后等待頁面的刷新，這打斷了用戶的工作流程。與之相對(duì)應(yīng)的是，讓服務(wù)器響應(yīng)鼠標(biāo)移動(dòng)、拖拽或者鍵盤輸入這樣的用戶事件，也就是說，服務(wù)器在用戶身邊為用戶服務(wù)，而不是擋在用戶前面，打斷他的操作。
google Suggest（www.google.com/webhp?complete=1）就是這樣一個(gè)簡單的但是很有說服力的例子。當(dāng)用戶在搜索框鍵入一些字符的時(shí)候，應(yīng)用從服務(wù)器取回與用戶已鍵入字符串相似的搜索條目（根據(jù)全世界其他人的搜索），并且顯示在輸入框下方的下拉列表中。

四、有紀(jì)律的嚴(yán)肅編程

現(xiàn)在傳統(tǒng)的Web應(yīng)用有時(shí)候也會(huì)用到JavaScript，不過主要是用來給頁面添加一些花哨的東西。基于頁面的模型使得這樣的增強(qiáng)沒有辦法更進(jìn)一步，限制了用戶可以得到的更加理想的交互。這種類似于第22條軍規(guī)的狀況，使得JavaScript很不公平地獲得了一種瑣碎的、自由散漫的編程語言的名聲，為那些嚴(yán)肅的開發(fā)者1所不屑。

為Ajax應(yīng)用編程的情況則完全不同。提交給用戶運(yùn)行的應(yīng)用將會(huì)一直運(yùn)行直到用戶關(guān)閉程序?yàn)橹埂２槐罎?，不變慢，也沒有內(nèi)存泄漏之類的毛病。如果我們的產(chǎn)品定位于獨(dú)占式應(yīng)用的市場(chǎng)，這還意味著很多小時(shí)的密集使用。要達(dá)到這個(gè)目標(biāo)，當(dāng)然需要高性能的、可維護(hù)的代碼，這與服務(wù)器端應(yīng)用的要求是一致的。

相比之下，Ajax的代碼庫會(huì)比傳統(tǒng)的Web應(yīng)用大很多。對(duì)代碼庫進(jìn)行良好的組織是非常重要的。編寫代碼不再是單個(gè)開發(fā)者的職責(zé)，而是整個(gè)團(tuán)隊(duì)來參與。可維護(hù)性、分離關(guān)注點(diǎn)、共同的編程風(fēng)格以及設(shè)計(jì)模式，這些都是需要考慮的問題。

從某個(gè)角度來看，Ajax應(yīng)用就是用戶所使用的一塊復(fù)雜的代碼，它需要高效地與服務(wù)器進(jìn)行通信。它顯然來源于傳統(tǒng)的基于頁面的Web應(yīng)用，但是它們之間的相似性也僅限于此，兩者之間的差別就像是木馬輪和現(xiàn)代自行車之間的差別。在腦海中要記得它們之間的這些差別，因?yàn)橹挥羞@樣才能創(chuàng)造出真正引人注目的Web應(yīng)用。

原文地址:http://www.yiiyaa.net/

【編輯推薦】

1. 10大Ajax開發(fā)守則
2. Ajax應(yīng)用需要注意的事項(xiàng)
3. jQuery+Ajax+PHP+MySQL實(shí)現(xiàn)分類列表管理
4. 詳解struts2與Ajax的集成
5. Ajax和WEB服務(wù)數(shù)據(jù)格式：JSON JSONP