WaveSun

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

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

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

正文：

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

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

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

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

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

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

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

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

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

2．因為javescript的本身原因，用JavaScript作的Ajax引擎，JavaScript的兼容性和DeBug都是讓人頭痛的事。

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

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