WaveSun

Ajax在門戶網(wǎng)中的應(yīng)用

摘要：現(xiàn)在的各大門戶網(wǎng)站都以吸引網(wǎng)民，提高點(diǎn)擊率為主要目的。以此為目標(biāo)不斷推出各種服務(wù)，內(nèi)容等以提高自身競(jìng)爭(zhēng)優(yōu)勢(shì)。與此同時(shí)如何提高用戶滿意度作為一項(xiàng)重要的目標(biāo)擺在各大門戶網(wǎng)站的面前。

      用戶滿意度很大一部分是交互所決定的。在現(xiàn)有計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)的限制下，交互在很大一部分程度下依賴于服務(wù)器本身或者用戶的請(qǐng)求內(nèi)容。甚至一個(gè)很小的按鈕都會(huì)導(dǎo)致也導(dǎo)致頁(yè)面的提交，并使得服務(wù)器必須處理新的頁(yè)面發(fā)給用戶，這個(gè)交互過(guò)程無(wú)論是對(duì)于服務(wù)器還是用戶來(lái)說(shuō)都是非常不合適的，基于用戶滿意度的問(wèn)題，我們?cè)陂T戶網(wǎng)中引入了Ajax作為關(guān)鍵技術(shù)對(duì)原有的門戶網(wǎng)架構(gòu)進(jìn)行重新設(shè)計(jì)實(shí)施。這個(gè)項(xiàng)目主要是針對(duì)原有的門戶網(wǎng)站進(jìn)行分析，重新添加需求后根據(jù)ajax的技術(shù)特點(diǎn)重新進(jìn)行架構(gòu)設(shè)計(jì)。我在該門戶網(wǎng)擔(dān)任主要技術(shù)負(fù)責(zé)人，主要工作針對(duì)架構(gòu)設(shè)計(jì)和系統(tǒng)測(cè)試工作。

正文：

     在傳統(tǒng)的網(wǎng)絡(luò)開(kāi)發(fā)中，B/S架構(gòu)占據(jù)了絕對(duì)主流的地位。愈來(lái)愈多的Web應(yīng)用出現(xiàn)在網(wǎng)絡(luò)上，怎么樣以一種用戶更能接受的方式與用戶進(jìn)行交互，也就是如何創(chuàng)建一種有“智能”的客戶端是一個(gè)越來(lái)越影響門戶網(wǎng)站的緊要目標(biāo)。 我們以此為發(fā)展契機(jī)，擴(kuò)大我們門戶網(wǎng)站在業(yè)界都優(yōu)勢(shì)，決定應(yīng)用現(xiàn)在的ajax技術(shù)來(lái)完成整個(gè)服務(wù)變化，為了是保護(hù)原來(lái)的系統(tǒng)資源，最大程度的利用原有系統(tǒng)的功能和代碼，我們選擇了ASP.NET與AJAX的混合模式。

     Ajax從字面上來(lái)理解是（Asynchornous+javescript+xml），異步的javescript與xml的結(jié)合物。在現(xiàn)在普遍流行的N層架構(gòu)中，服務(wù)器往往要和更遠(yuǎn)的后端服務(wù)器（比如說(shuō)數(shù)據(jù)庫(kù)服務(wù)器，中間件服務(wù)器等）進(jìn)行通信。Ajax技術(shù)主要是在客戶端進(jìn)行使用。在桌面式開(kāi)發(fā)當(dāng)中，異步工作是一種已經(jīng)使用了很久的實(shí)踐。讓一個(gè)新的線程去處理大量的處理等不用于用戶交互的工作。但是對(duì)于WEB開(kāi)發(fā)來(lái)說(shuō)，這幾乎是不可能的，因?yàn)?/span>http協(xié)議是無(wú)連接的請(qǐng)求—響應(yīng)模式的連接。也就是只能客戶端發(fā)送請(qǐng)求信息，然后服務(wù)器回應(yīng)信息。但下一次客戶端連接的時(shí)候，服務(wù)器也不能識(shí)別出客戶端身份。

     普通的交互數(shù)據(jù)傳輸總量是一個(gè)隨著時(shí)間增長(zhǎng)很大的折線模型，而使用Ajax技術(shù)之后的交互數(shù)據(jù)傳輸是一個(gè)一開(kāi)始會(huì)比較大，不過(guò)之后數(shù)據(jù)量增長(zhǎng)得很慢。普通的網(wǎng)絡(luò)服務(wù)回應(yīng)的是頁(yè)面，頁(yè)面中包含有很多大量的數(shù)據(jù)與頁(yè)面自身標(biāo)志或動(dòng)態(tài)代碼。而ajax每次從服務(wù)器那得到的都是數(shù)據(jù)，除了第一次的連接傳回了包含動(dòng)態(tài)客戶端代碼之外。介于原來(lái)使用的是基于.NET Framework的ASP.NET，所以使用微軟推出針對(duì)ajax開(kāi)發(fā)的atlas工具包。原來(lái)系統(tǒng)機(jī)構(gòu)如下：

（1）本系統(tǒng)可分為4層，分別是Browser、表示層、中間件層和數(shù)據(jù)層。
          （2）表示層用Java Script來(lái)實(shí)現(xiàn)頁(yè)面輸出。
          （3）中間件層使用DCOM，即實(shí)現(xiàn)Component（構(gòu)件），主要實(shí)現(xiàn)業(yè)務(wù)邏輯的封裝與復(fù)用。
          （4）數(shù)據(jù)層主要是數(shù)據(jù)庫(kù)和存儲(chǔ)過(guò)程的實(shí)現(xiàn)。j

在使用Ajax技術(shù)后，表示層與中間件層之間增加了一層Client Application tier（CA層）。因?yàn)?/span>CA層是第一次連接的主要部分，并且占用了第一次連接絕大部分的數(shù)據(jù)量。所以CA層我們使用了javescript來(lái)實(shí)現(xiàn)，為了盡量保持代碼的簡(jiǎn)短和安全有效，代碼內(nèi)部原則上不使用2個(gè)字符以上的變量名，函數(shù)名則不超過(guò)3個(gè)。為了不影響測(cè)試，另外我們專門制作了一個(gè)代碼縮進(jìn)程序。把調(diào)試好的代碼進(jìn)一步壓縮，使得js代碼文件盡可能的小，減小網(wǎng)絡(luò)傳輸?shù)呢?fù)擔(dān)。

DOM 是給 HTML 和 XML 文件使用的一組 API。它提供了文件的結(jié)構(gòu)表述，讓你可以改變其中的內(nèi)容及可見(jiàn)物。其本質(zhì)是建立網(wǎng)頁(yè)與 Script 或程序語(yǔ)言溝通的橋梁。所有 WEB 開(kāi)發(fā)人員可操作及建立文件的屬性、方法及事件都以對(duì)象來(lái)展現(xiàn)（例如，document 就代表“文件本身“這個(gè)對(duì)像，table 對(duì)象則代表 HTML 的表格對(duì)象等等）。這些對(duì)象可以由當(dāng)今大多數(shù)的瀏覽器以 Script 來(lái)取用。一個(gè)用 HTML 或 XHTML 構(gòu)建的網(wǎng)頁(yè)也可以看作是一組結(jié)構(gòu)化的數(shù)據(jù)，這些數(shù)據(jù)被封在DOM（Document Object Model）中，DOM 提供了網(wǎng)頁(yè)中各個(gè)對(duì)象的讀寫的支持。以DOM來(lái)使得數(shù)據(jù)和表現(xiàn)分離，并控制輸出。

經(jīng)過(guò)對(duì)網(wǎng)站服務(wù)的各項(xiàng)分析總結(jié)了ajax技術(shù)適用的范圍。Ajax適用場(chǎng)景有
    1.表單驅(qū)動(dòng)的交互
    傳統(tǒng)的表單提交，在文本框輸入內(nèi)容后，點(diǎn)擊按鈕，后臺(tái)處理完畢后，頁(yè)面刷新，再回頭檢查是否刷新結(jié)果正確。使用Ajax，在點(diǎn)擊sunmit按鈕后，立刻進(jìn)行異步處理，并在頁(yè)面上快速顯示了更新后的結(jié)果，這里沒(méi)有整個(gè)頁(yè)面刷新的問(wèn)題。
    2.深層次的樹(shù)的導(dǎo)航
    深層次的級(jí)聯(lián)菜單（樹(shù)）的遍歷是一項(xiàng)非常復(fù)雜的任務(wù)，使用JavaScript來(lái)控制顯示邏輯，使用Ajax延遲加載更深層次的數(shù)據(jù)可以有效的減輕服務(wù)器的負(fù)擔(dān)。我們以前的對(duì)級(jí)聯(lián)菜單的處理多數(shù)是這樣的：
    為了避免每次對(duì)菜單的操作引起的重載頁(yè)面，不采用每次調(diào)用后臺(tái)的方式，而是一次性將級(jí)聯(lián)菜單的所有數(shù)據(jù)全部讀取出來(lái)并寫入數(shù)組，然后根據(jù)用戶的操作用 JavaScript來(lái)控制它的子集項(xiàng)目的呈現(xiàn)，這樣雖然解決了操作響應(yīng)速度、不重載頁(yè)面以及避免向服務(wù)器頻繁發(fā)送請(qǐng)求的問(wèn)題，但是如果用戶不對(duì)菜單進(jìn)行 操作或只對(duì)菜單中的一部分進(jìn)行操作的話，那讀取的數(shù)據(jù)中的一部分就會(huì)成為冗余數(shù)據(jù)而浪費(fèi)用戶的資源，特別是在菜單結(jié)構(gòu)復(fù)雜、數(shù)據(jù)量大的情況下（比如菜單有 很多級(jí)、每一級(jí)菜又有上百個(gè)項(xiàng)目），這種弊端就更為突出。
    如果在此案中應(yīng)用Ajax后，結(jié)果就會(huì)有所改觀：
在初始化頁(yè)面時(shí)我們只讀出它的第一級(jí)的所有數(shù)據(jù)并顯示，在用戶操作一級(jí)菜單其中一項(xiàng)時(shí)，會(huì)通過(guò)Ajax向后臺(tái)請(qǐng)求當(dāng)前一級(jí)項(xiàng)目所屬的二級(jí)子菜單的所有數(shù)據(jù)，如 果再繼續(xù)請(qǐng)求已經(jīng)呈現(xiàn)的二級(jí)菜單中的一項(xiàng)時(shí)，再向后面請(qǐng)求所操作二級(jí)菜單項(xiàng)對(duì)應(yīng)的所有三級(jí)菜單的所有數(shù)據(jù)，以此類推……這樣，用什么就取什么、用多少就取 多少，就不會(huì)有數(shù)據(jù)的冗余和浪費(fèi)，減少了數(shù)據(jù)下載總量，而且更新頁(yè)面時(shí)不用重載全部?jī)?nèi)容，只更新需要更新的那部分即可，相對(duì)于后臺(tái)處理并重載的方式縮短了 用戶等待時(shí)間，也把對(duì)資源的浪費(fèi)降到最低。
    3.快速的用戶與用戶間的交流響應(yīng)
    在眾多人參與的交流討論的場(chǎng)景下，最不爽的事情就是讓用戶一遍又一遍刷新頁(yè)面以便知道是否有新的討論出現(xiàn)。新的回復(fù)應(yīng)該以最快的速度顯示出來(lái)，而把用戶從分神的刷新中解脫出來(lái)，Ajax是最好的選擇。
    4.類似投票、yes/no等無(wú)關(guān)痛癢的場(chǎng)景
對(duì)于類似這樣的場(chǎng)景中，如果提交過(guò)程需要達(dá)到40秒，很多的用戶就會(huì)直接忽略過(guò)去而不會(huì)參與，但是Ajax可以把時(shí)間控制在1秒之內(nèi)，從而更多的用戶會(huì)加入進(jìn)來(lái)。
    5.對(duì)數(shù)據(jù)進(jìn)行過(guò)濾和操縱相關(guān)數(shù)據(jù)的場(chǎng)景
    對(duì)數(shù)據(jù)使用過(guò)濾器，按照時(shí)間排序，或者按照時(shí)間和名稱排序，開(kāi)關(guān)過(guò)濾器等等。任何要求具備很高交互性數(shù)據(jù)操縱的場(chǎng)合都應(yīng)該用JavaScript，而不是用一系列的服務(wù)器請(qǐng)求來(lái)完成。在每次數(shù)據(jù)更新后，再對(duì)其進(jìn)行查找和處理需要耗費(fèi)較多的時(shí)間，而Ajax可以加速這個(gè)過(guò)程。
    6.普通的文本輸入提示和自動(dòng)完成的場(chǎng)景
在文本框等輸入表單中給予輸入提示，或者自動(dòng)完成，可以有效的改善用戶體驗(yàn)，尤其是那些自動(dòng)完成的數(shù)據(jù)可能來(lái)自于服務(wù)器端的場(chǎng)合，Ajax是很好的選擇。

     最后根據(jù)以上分析完成了整個(gè)門戶網(wǎng)的項(xiàng)目。在開(kāi)發(fā)過(guò)程中，我們發(fā)現(xiàn)ajax作為一項(xiàng)新技術(shù)，也有它不成熟的地方。

1．沒(méi)有強(qiáng)大的IDE來(lái)支持javescipt代碼的編寫和調(diào)試工作。CA層的代碼編寫和測(cè)試顯得格外舉步維艱。

2．因?yàn)?/span>javescript的本身原因，用JavaScript作的Ajax引擎，JavaScript的兼容性和DeBug都是讓人頭痛的事。

3．Ajax的無(wú)刷新重載，由于頁(yè)面的變化沒(méi)有刷新重載那么明顯，所以容易給用戶帶來(lái)困擾――用戶不太清楚現(xiàn)在的數(shù)據(jù)是新的還是已經(jīng)更新過(guò)的。

4．一些手持設(shè)備（如手機(jī)、PDA等）現(xiàn)在還不能很好的支持Ajax。