WaveSun

Ajax在門戶網中的應用

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

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

正文：

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

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

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

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

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

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

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

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

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

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

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

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