1 以客戶端為中心的ajax應用
在進行ajax應用開發的之前,通常我們首先要考慮一個問題,那就是此應用到底以客戶端為中心還是以服務器端為中心。什么情況下應該以客戶端為中心,而什么情況下應該以服務器端為中心呢?要回答這個問題首先我們要來看看它們各自的一些例子。
我們所見到的一部分ajax網站,它們和非ajax網站的結構是類似的,也就是由多個頁面組成,一般一個視圖就是一個頁面,與非ajax網站不同的地方僅在于引入了與服務器端的后臺通信,而且這些通信邏輯通常僅服務于頁面上一個局部的區域。例如一個社區的注冊頁面,輸入用戶名后自動在后臺向服務器查詢該用戶名是否已被使用;又例如一個書評網站,在你通過選擇星星的數量表明對一本書的評級之后,無需刷新頁面就能后臺保存你的選擇。這些都是以服務器端為中心的ajax應用例子,因為這些網站的邏輯大部分還是放在服務器端,必須在服務器端執行,只不過客戶端通過引入后臺通信機制增加了對用戶的友善程度,減少了用戶等待頁面刷新的時間。
另外一些ajax網站則不同,例如gmail和pageflakes,它們通常只有一個或者少數幾個頁面,大部分的邏輯都在客戶端執行,服務器的作用僅在于提供數據以及執行少數在客戶端執行會導致安全漏洞的操作。這些網站我們稱之為以客戶端為中心的ajax應用。接下來我們就看看常見的以客戶端為中心的ajax應用的三種模型。
以客戶端為中心的三種模型
我們都知道ajax無非就是使用xmlhttprequest對象發送請求給服務器,然后使用返回的數據更新頁面上的內容。在這里,我們所能夠發送和接收的數據其實都是純文本的,因此我們能夠做出的選擇就是以什么樣的格式去發送與接收數據。
以內容為中心
|||最大的網站源碼資源下載站,
在已有的服務器端邏輯基礎上,如何盡量少作出改動就能實現ajax?可能很多人都能想到同樣的結果,就是將原本整頁輸出的html改為僅僅輸出內容更新過的一個局部,使用xhr獲取這個局部html然后更新到頁面上。這正是asp.net ajax中的updatepanel控件所做的事情。因此xhr接收的是即將現實的html內容,因此被稱之為以內容為中心的ajax。
以腳本為中心
如果你覺得發送html到客戶端,然后還要使用javascript才能更新到頁面上,這還是麻煩,干脆把更新用的javascript也嵌入在發送的內容中就好了,也就是所謂的以腳本為中心的ajax。腳本被xhr接收至客戶端后,直接使用eval()執行,無需任何復雜的客戶端邏輯。這種實現方式在asp.net ajax/futures中暫時沒有直接的支持,因此也較少人使用。
以數據為中心
與以腳本為中心相反的做法就是,服務器端連html也不生成了,直接將數據發送至客戶端,讓客戶端承擔數據處理并生成對應html的工作。由于傳輸的是純粹的數據,因此這被稱之為以數據為中心的ajax。
說到傳輸數據,我們面臨的選擇是數據格式,例如xml與json。xml固然好,因為.net內置了眾多的xml支持,并且.net web service本身也就是使用xml的。然而客戶端解釋xml是一件很麻煩的事情,瀏覽器的dom api提供的操作都非常有限,開發復雜應用時客戶端解釋xml所需的代碼將變得非常繁多。
對于客戶端來說,json則要有好得多,只需要放進eval()函數里,出來的便是解釋好的javascript對象。同時,asp.net ajax已經為.net web service引入了json支持,因此在.net作為服務器端框架的前提下json比xml更具優勢。
2 使用asp.net futures開發以客戶端為中心的ajax應用
在使用asp.net futures開發之前,我們首先要知道它是怎么工作的,以及它為我們提供了哪些基礎部件以便于我們的開發。
|||國內最大的酷站演示中心!asp.net futures提供的客戶端模型
首先,asp.net ajax/futures在客戶端為我們提供了一種類似于服務器端的控件機制。你可以將一個<input type=”text” />初始化為一個sys.ui.textbox,然后它就如同服務器端的textbox一樣易于使用。
然后,asp.net futures還提供了一種叫做behavior的東東。什么是behavior呢?你可以簡單地認為behavior就是一組事件、方法與對象的集合,這個集合是基于交互邏輯而聚合的,而非基于對象性質。例如現在有一個textbox,你希望在其中輸入前幾個字母之后,textbox會彈出下拉框提供若干可能的輸入選項給你選擇,也就是我們通常所說的autocomplete(自動完成)。那么在這里autocomplete就可以是一個behavior,它包括對textbox輸入事件的相應,包括顯示下拉,可能好包括通過web service查詢可提供的選項,這些邏輯原本的耦合度不高,不應該聚合成為control,但是它們在一個特定的交互操作中聚合在一次,因此就應該將它們定義為一個behavior。
另外,asp.net futures還提供了一種比event更高層次的事件機制,稱之為action。我們現在能看到一些服務器端控件包含一些成對出現的數據操作時間,例如updating/updated、inserting/inserted、deleting/deleted,之所以要這樣設計是為了向開發人員提供一個更靈活的接口,允許開發人員在特定的事件之前以及之后進行自己的邏輯調用。例如update操作吧,其實這對于數據控件來說是一個事件,然而對外暴露則成了updating/updated兩個事件,這就增加了事件的數量。action的引入正是為了解決這個問題,在向一個action添加事件處理函數時就可以聲明這個函數是在action前調用還是在action后調用。有些action是僅被執行一次的,只有已執行和未執行這兩種狀態,添加事件處理函數時可以聲明如果action被執行過了事件馬上被觸發。action機制的引入都大大簡化了復雜對象的事件模型。
asp.net futures值得一提的強大功能還有binding。這名字聽起來與服務器端的數據綁定有點關系,實際上也正是這樣。binding可以綁定任意兩個對象的屬性(注意是asp.net ajax/futures引入的屬性概念而不是成員變量),這種綁定可以單向的也可以是雙向的,而且綁定支持transform。什么是transform呢?例如你提供一個下拉列表提供用戶選擇羅馬數字的i、ii、iii、iv、v、vi……然后這個下拉選擇的值要綁定到一個對象的屬性上,該屬性是一個number,那么你就可以設計一個transform將string的羅馬數字和它實際代表的number值對應起來,之后binding就能自動完成這個綁定,無論何時你訪問此對象屬性,你得到的都是用戶選擇的羅馬數字對應的數值。
最后需要了解的是,asp.net futures還引入了drag and drop與animation的支持。前者為頁面上的拖放操作提供了一個低層框架;后者類似于基于prototype的scriptaculous庫的effect,提供了豐富的html元素動畫效果。
第1部分到這里就結束了,我們通過這部分內容了解了以客戶端為中心的3種ajax應用模型,知道了asp.net futures為開發提供的底層框架。在之后的文章當中,我們將來探討如何使用asp.net futures進行實際的開發,并且看看它有多大的潛力以適應未來的ajax網站發展趨勢。
新聞熱點
疑難解答
圖片精選