加入RUN!PC粉絲團
最近新增的精選文章
 
最多人點閱的精選文章
 
 
精選文章 - 開發技術
分享到Plurk
分享到FaceBook
 
新一代 .NET Framework 4.0的4大主軸(2)
更聰明的方法製作動態網頁─
jQuery及AJAX

文/董大偉

AJAX(Asynchronous JavaScript and XML)技術幾乎已是Pure Web應用程式中不可或缺的一環。從應用程式的角度來看,非同步服務的呼叫、後端資料的非同步存取、前端頁面上的即時回應,都是一個完整Web應用程式所不可或缺。過去的ASP.NET AJAX Framework與隨之配合的AJAX Control Toolkit,適時的扮演了Web應用程式中前後端整合的角色。而如今,前端互動功能更加受到重視,ASP.NET也在4.0版推出的同時,正式將jQuery加入,開發人員要如何選擇適合的AJAX技術?還有新版的ASP.NET Ajax Library究竟有哪些強項呢?

早在2007年開始,ASP.NET AJAX Extensions 1.0就已被正式納入到ASP.NET 3.5中,並被視為是ASP.NET WebForm技術的重要一環。然而透過CodePlex持續更新的ASP.NET AJAX 技術並沒有隨ASP.NET 3.5的推出而中止,反倒更加蓬勃發展,如今在ASP.NET 4.0當中看到的Microsoft ASP.NET Ajax Library,就是這幾年發展下的成果。

就ASP.NET AJAX Extensions核心來看,其實並沒有太大的改變,依舊是熟悉的ScriptManager、UpdatePanel、Timer、UpdateProgress等Server-Site控制項。有較大變化的部份是AJAX Control Toolkit,以及開發人員可能較陌生的「Microsoft ASP.NET Ajax Library」。(順帶一提,AJAX Control Toolkit與Microsoft ASP.NET Ajax Library將會整併為單一套件,並且直接在CodePlex提供下載)。


Visual Studio 2010中針對jQuery的支援
jQuery是一套跨平台的JavaScript函式庫,目前已經被廣泛的使用在各大網站當中,它包含了許多好用的前端功能,逐漸成為開發人員處理前端頁面的重要選擇之一。而Visual Studio自2008年就已加入整合,同時微軟也加入開發原始程式碼組織,一同參與制定未來jQuery的規格,現在只要開啟Visual Studio 2010的Web專案,在Script資料夾下即可看到jQuery。(圖1)

圖1:在Script資料夾下即可看到jQuery。


隨著jQuery正式加入到了Visual Studio 2010當中,我們在開發Web應用程式的同時,將有著更方便的前端指令碼開發套件支援,而整個ASP.NET Ajax Library的設計,也將與jQuery充分的整合。

所謂的充分整合並非空談,這次Visual Studio 2010中的jQuery整合相當完整,甚至讓筆者有些感到驚豔。當你在.aspx頁面上引用了jQuery之後:「<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>」。在Visual Studio 2010當中的HTML編輯器,不但開始支援jQuery的IntelliSense,而且還是中文!如圖2與圖3,真是令人眼睛一亮!

圖2:jQuery的中文IntelliSense。



圖3:中文版的語法說明。


其實光是上面這幾點就已經提高jQuery的接受度,而且從目前的趨勢看來,jQuery將會成為Pure Web用戶端程式碼開發技術的主流。再加上Visual Studio 2010的全面支援,看來jQuery將會是Web開發人員用戶端開發技術所必需要學習的一塊。

除了上述的支援外,HTML Snippet機制也為開發人員帶來更方便撰寫JavaScript程式碼的體驗。如今在Visual Studio 2010,撰寫JavaScript也可以像C#程式碼一樣,輸入時自動帶入Snippet。

以圖4來看,當你在左方輸入JavaScript的迴圈指令for之後,不僅會自動出現中文提示,而且你直接按下[Tab]鍵,和C#/VB程式碼編輯器一樣,自動出現了右方的程式碼片段,你可以繼續利用[Tab]鍵切換並輸入參數即可。這相較於過去,真的方便很多。

圖4:JavaScript撰寫模式的改變。



ASP.NET Ajax Library的新功能
即便Visual Studio 2010當中針對jQuery進行了全面的支援,但ASP.NET Ajax Library當中依舊有許多不錯的功能,且是以一個獨立於ASP.NET 4.0外,可公開下載使用的「開放原始碼跨瀏覽器JavaScript函式庫套件」。

透過簡單的前端指令碼,就可以呈現出如同圖5這樣的浮水印文字方塊。順帶一提,在引用ASP.NET Ajax Library這組函式庫,需從「ajax.microsoft.com」網站下載,現在微軟也已經提供了CDN(Content Delivery Network)服務,因此你會看到我們剛才指令碼當中的JavaScript引用位置並非相對於網站本身的路徑,而是從「ajax.microsoft.com」網站下載的JavaScript:「<script src="http://ajax.microsoft.com/ajax/beta/0911/Start.debug.js" type="text/javascript"></script>」。

圖5:浮水印文字方塊。


同樣的,最新版的jQuery你一樣可以從微軟的CDN網站直接下載:「<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js" type="text/javascript"></script>」。

如此一來,你就不需要從自己的網站或專案中引用JavaScript檔案了,不僅開發時不用在專案中放置相關檔案,而且效能將有所提昇(微軟的CDN提出了多份Cache,當你的使用者下載時,會自動選擇位置最接近的伺服器)。當然也節省你自己網站的頻寬。

不僅如此,你還可以在:「http://www.asp.net/ajaxLibrary/learn.ashx」找到完整的ASP.NET Ajax Library使用範例(其中包含了近50種前端控制項,例如Accordion、AutoComplete、ColorPicker、DropDown、ModalPopup等),相當的豐富且方便好用。

另一個值得一提的部分,是隨著這組豐富的JavaScript Library的釋出,這些JavaScript檔案的載入就變得相對的重要(因為有非常多個獨立的JavaScript檔案可能依照你在頁面上使用到的功能不同,而必須被分別載入)。因此在這個版本的ASP.NET Ajax Library當中,包含了一組Ajax Script Loader機制,可確保ASP.NET Ajax Library中的JavaScript可以被正確且依序的下載執行,同時也確保下載的內容最精簡,沒有重覆的Script檔案且不會有錯誤。

其中的Start.debug.js是Script Loader機制的主要指令來源,而Sys.require()方法則會依照我們要執行的指令,幫我們下載需要的Script。下載完成之後,才會執行被括在{…}當中實際要執行的命令。這是在面對用戶端JavaScript應用程式開發時相當重要的一環。


Client Templates
除了可以透過ASP.NET Ajax Library讓瀏覽器上的控制項呈現更加的豐富之外,另一個重要的常用功能則是透過ASP.NET Ajax Library從用戶端直接抓取伺服器端的資料,並且與頁面上的HTML整合。

利用ASP.NET AJAX Library中的Client Templates機制,即可讓我們直接透過撰寫HTML配合JavaScript,就可以從頁面上直接呼叫遠端的Web/WCF Services,抓取後端資料庫中的內容,並且套用在前端的頁面上。透過dataview控制項(請注意該控制項是一個用戶端控制項,不需要postback或submit),呼叫伺服器端中事先準備好的Web/WCF Services。Linq抓取到的資料,以List型式回傳到用戶端,且直接繫結(Bind)到先前我們在HTML頁面上撰寫的dataview控制項上,立即呈現出圖6這樣的結果。

圖6:繫結到先前在HTML頁面上撰寫的dataview。


這個機制讓我們可以在僅撰寫純HTML/JavaScript程式碼的狀況下,即可以非同步的方式抓取到伺服器端的資料庫內容,並且利用DataBinding的方式呈現在使用者端的瀏覽器上。整個動作僅透過ASP.NET Ajax Library,除了抓取後端資料所撰寫的Web/WCF Services之外,並沒有用到任何的伺服器端程式碼,這讓瀏覽器端程式碼的開發更加的便利與快速。


結語
隨著Visual Studio 2010對jQuery的全面支援,ASP.NET AJAX Library與Ajax Control Toolkit的整併,可以想見未來在Client-Side Programming技術上,.NET開發人員將擁有更豐盛的資源,可更快速的開發出便捷好用的Web應用程式,同時也可兼顧用戶端UI呈現的即時性與精緻度。這對於想要開發跨瀏覽器、跨平台的Web應用程式,卻無法(或暫時不打算)使用Silverlight的開發人員來說,不啻是一個理想的新選擇。