前言： |
AJAX(Asynchronous JavaScript and XML)技術如經已經是Pure Web Application不可或缺的一環，從應用程式的角度來看，非同步服務的呼叫、後端資料的非同步存取、前端頁面上的即時回應…在在都是一個完整的Web應用程式所不可或缺的。過去的ASP.NET AJAX Framework與隨之配合的AJAX Control Toolkit，適時的扮演了Web應用程式中前後端整合的角色。如今，前端互動功能更加被重視的今天，ASP.NET則在4.0版推出的同時，正式在Visual Studio 2010當中直接加入了jQuery支援，究竟目前要如何定位AJAX技術未來在微軟的走向呢？以及要如何選擇適合的AJAX技術？還有新版的ASP.NET Ajax Library究竟有哪些強項呢?在這篇文章中我們將為您探討… |
ASP.NET AJAX技術的出現
AJAX的發展在微軟的ASP.NET產品線中有著蠻特別的際遇，在90年代的後期，其實就有類似AJAX技術的應用出現，但真正開始普遍被大眾接受，則是在2005年前後，Google大量的使用AJAX技術在其產品當中，諸如搜尋引擎、Gmail等Web-Based Solutions。
如果我們回顧當時的情境，05年正好是ASP.NET 2.0大舉進攻的一年，該年11月，微軟正式推出了ASP.NET 2.0，其中琳瑯滿目的新功能，諸如Master-Page、新的資料存取技術與控制項、Login Controls、Profile、Navagation…等機制，成功擄獲了相當多Web開發人員的心，正式為Web應用程式開發開啟了嶄新的一頁。
但AJAX技術卻沒有在2.0時來得及加入到產品當中，當時的ASP.NET AJAX還是處於CTP階段--代碼為Atlas的一組Libraries。接著是06年的Beta, RC，遲遲到了07年一月才正式RTM。從這邊您也可以看出，其實並不像我們想的這樣，微軟似乎並沒有盡是趕鴨子上架的推一些新技術，反倒是社群當中早就開始使用並催促微軟在ASP.NET當中加入AJAX技術...
當時稱為ASP.NET AJAX Extensions 1.0的這組套件，最後是以外掛的方式加入了ASP.NET產品線中。不過同年(07)年底微軟就推出了ASP.NET 3.5這個中繼版本，並且正式把ASP.NET AJAX Extensions 1.0納入視為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控制項(事實上你打開ASP.NET 4.0的專案範本，與AJAX有關的控制項也只有這些，並沒有新增)，但真正改變且持續發展的，則是AJAX Control Toolkit，以及ASP.NET開發人員可能比較陌生的『Microsoft ASP.NET Ajax Library』。(順帶一提，AJAX Control Toolkit與Microsoft ASP.NET Ajax Library將會整併為單一套件，並且直接在CodePlex提供下載)。
Visual Studio 2010中針對jQuery的支援
但更有趣的是06年誕生的jQuery。
jQuery是一套跨平台的JavaScript函式庫，目前已經被廣泛的使用在各大網站當中，它包含了許多好用的前端功能，逐漸成為開發人員處理前端頁面的重要選擇之一，也因此2008年9月微軟正式宣布將jQuery整合進Visual Studio當中，並加入開發原始程式碼組織，一同參與制定未來jQuery的規格，這也是您會在開啟Visual Studio 2010的各種Web專案時，在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，而且，居然還是中文的(筆者撰寫本文的時候用的是中文版Visual Studio 2010)：
這個機制讓我們可以在僅撰寫純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的開發人員來說，不啻是一個理想的新選擇。
有關於ASP.NET AJAX Library當中所有的新功能相當繁多，讀者可以至筆者的部落格http://Blog.StudyHost.Com，或參考專欄後面的內容，在當中我們將會有更多更詳細的介紹。
說實話，衝著這個支援想不給Visual Studio 2010拍拍手都有點說不過去：
不用說，光是上面這幾點您就沒有任何理由不學jQuery了，而且從目前的趨勢看來jQuery將會成為Pure Web Application用戶端程式碼開發技術的主流。再加上Visual Studio 2010的全面支援，看來jQuery將會是Web開發人員用戶端開發技術所必需要學習的一塊。
Visual Studio 2010中的HTML Snippet支援
不只是jQuery的支援，在Visual Studio 2010當中，針對JavaScript 的IntelliSense支援也增強不少，光是底下的HTML Snipet就挺讓人驚艷的。我知道過去很多開發人員痛恨撰寫HTML或是JavaScript，不外乎是因為難寫且編輯器沒有IntelliSense，在編輯環境中輸入JavaScript程式碼簡直是一種折磨。
但現在的 Visual Studio 2010中，您會發現撰寫JavaScript也可以像一般C#程式碼一樣，輸入時自動帶入snippet，這個支援現在不僅僅在輸入HTML指令碼時可以享用，連帶的JavaScript也可以：
當您在上圖左方輸入javaScript的迴圈指令for之後，不僅出現提示(注意到沒，也是中文的…)，而且您直接按下[Tab]鍵，和C#/VB程式碼編輯器一樣，自動出現了右方的程式碼片段，您可以繼續利用[Tab]鍵切換並輸入參數即可。
現在在Visual Studio 2010當中開發JavaScript程式碼，就算不能誇張的說是一種享受，比起當年VS2008時代可說是輕鬆愉快了許多。
ASP.NET Ajax Library的新功能
最後，我們回過頭來談談ASP.NET Ajax Library的新功能，即便Visual Studio 2010當中針對了jQuery進行了全面的支援，但ASP.NET Ajax Library當中依舊有相當多不錯的功能，同時在整個RoadMap上，也可嗅出ASP.NET Ajax Library和jQuery已經在某種程度上開始進行了些許整合。
現在的ASP.NET Ajax Library已經是一個獨立於ASP.NET 4之外，可公開下載使用的『開放原始碼跨瀏覽器JavaScript函式庫套件』。
您可以在VISUAL STUDIO 2008或是Visual Studio 2010甚至任何其他的開發工具中使用，底下是一個典型的使用範例：
<head> <title>Untitled Page</title> <style type="text/css"> .wm { color:Gray } </style> <!--從CDN引用js--> <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.js" type="text/javascript"></script> <script src="http://ajax.microsoft.com/ajax/beta/0911/Start.debug.js" type="text/javascript"></script> <script src="http://ajax.microsoft.com/ajax/beta/0911/extended/ExtendedControls.debug.js" type="text/javascript"></script> <script type="text/javascript"> //建立watermark Sys.require(Sys.components.watermark, function() { $("#TextBoxName").watermark("<請輸入您的姓名>", "wm"); }); </script> </head> <body> <input type="text" id="TextBoxName" size="50" /> //實際的TextBox </body> |
透過上面這樣簡單的前端指令碼，就可以呈現出如同底下這樣的浮水印文字方塊：
順帶一提，您會發現我們在引用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> |
同樣的，最新版的jQuery您一樣可以從微軟的CDN網站直接下載：
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js" type="text/javascript"></script> |
如此一來，您就不需要從自己的網站或專案中引用JavaScript檔案了，不僅開發時不用在專案中放置相關檔案，而且效能將有所提升(微軟的CDN提出了多份Cache，當您的使用者下載時，會自動選擇位置最接近的伺服器)。當然，也節省您自己網站的頻寬。
您可以在底下網址找到微軟CDN上所支援的函式庫的完整清單：
不僅如此，您還可以在底下這個位置找到完整的ASP.NET Ajax Library使用範例(其中包含了近50種前端控制項，例如Accordion, AutoComplete, ColorPicker, DropDown, ModalPopup…etc)，相當的豐富且方便好用：
AJAX Script Loader
另一個值得一提的部分，是隨著這組豐富的JavaScript Library的釋出，這些JavaScript檔案的載入就變得相對的重要(因為有非常多個獨立的JavaScript檔案可能依照你在頁面上使用到的功能不同，而必須被分別載入)，因此在這個版本的ASP.NET Ajax Library當中，包含了一組Ajax Script Loader機制，可確保ASP.NET Ajax Library中的JavaScript可以被正確且依序的下載執行，同時也確保下載的內容最精簡，沒有重覆的Script檔案且不會有錯誤，整個關鍵在底下這段指令碼：
<script src="http://ajax.microsoft.com/ajax/beta/0911/Start.debug.js" type="text/javascript"></script> <script type="text/javascript"> Sys.require(Sys.components.watermark, function() { //實際要執行的指令 }); </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，抓取後端資料庫中的內容，並且套用在前端的頁面上，例如底下這段HTML指令碼：
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/beta/0911/Start.js"></script> <script type="text/javascript"> Sys.require([Sys.components.dataView, Sys.scripts.WebServices]); </script> </head> <body xmlns:sys="javascript:Sys" xmlns:dataview="javascript:Sys.UI.DataView"> <div id="CustomerView" class="sys-template" sys:attach="dataview" dataview:autofetch="true" dataview:dataprovider="WebService1.asmx" dataview:fetchoperation="GetData"> <ul> <li>{{ContactName}}</li> </ul> </div> </body> |
在上面這段HTML指令碼中，我們透過dataview控制項(請注意該控制項是一個用戶端控制項，在上面這些指令碼執行的時候，是完全不需要postback或submit的)呼叫伺服器端我們事先準備好的Web/WCF Services：
EX： |
// 在此新增其他作業，並以 [OperationContract] 來標示它們 [WebMethod] public List<Customers> GetData() { NorthwindDataContext db = new NorthwindDataContext(); //透過Linq抓取資料 var ret = from c in db.Customers select c; //回傳list集合 return ret.ToList(); } |
透過Linq抓取到的資料，以List型式回傳到用戶端並且直接繫結 (Bind) 到先前我們在HTML頁面上撰寫的dataview控制項上，立即呈現出底下這樣的結果：
沒有留言:
張貼留言