CIO
|
PCDIY!
|
旗標圖書
|
旗景數位影像
|
讀者服務
首 頁
即時新聞
業界動態
最新活動
企業採購
精選文章
線上教學
品牌活動
程式碼下載
雲端運算智庫
最近新增的
精選文章
AP內建AI引擎 Mist Cloud平台分析能力強 Juniper Mist AI領先全球 改善WiFi穩定、效能首選
解決IT供應鏈攻擊
內部威脅的七個警訊
遠百以專案辦公室推動數位體驗
多廠牌與多重電信業者網路架構的挑戰與機會
德明科大啟用電貿暨AI實習基地 ViewSonic ViewBoard 智慧互動電子白板 扮要角
淺談計算誤差
秀傳醫療體系統 以Lenovo HyperConverged HX 超融合架構扎穩智慧醫療發展基礎
模組化設計 偵測率達99.99% 全面防杜惡意郵件入侵 首選Cellopoint Email UTM
滿足網路管理與檔案安全傳輸需求,Ipswitch的MOVEit及WhatsUp Gold一次完整提供
來自學界的資料分析利器 - Weka 與 R
北醫建置肺癌資料庫,透過深度標註訓練AI,協助醫師早期發現癌症
北榮AI門診上路!人工智慧判讀腦瘤,有效縮短醫師確診時間
台灣智慧機器人玩具聯盟攜手英閱音躍研創 推廣T. Robot程式教育,協助國中小學扎根培養運算思維
一場與時間賽跑的戰役 ,人工智慧加速心血管疾病診斷
最多人點閱的
精選文章
免費IT建置--Linux系統操作與管理
免費IT建置--網頁伺服器的完美組合LAMP(下)
初探Hadoop開放原始碼平台環境
Linux下的防火牆(基礎篇)
免費IT建置--檔案共享與檔案伺服器
Linux下的防火牆(進階篇)
N.Y.BAGELS CAFE善用SAP Business One
手機程式設計入門與應用 Android、iPhone、Windows Mobile─ 影片播放器範例
手機程式設計入門與應用 Android、iPhone、Windows Mobile─ 線上查詢匯率
手機程式設計入門與應用 Android、iPhone、Windows Mobile─ 擲骰子遊戲
手機程式設計入門與應用 Android、iPhone、Windows Mobile─ 音樂播放器範例
手機程式設計入門與應用 Android、iPhone、Windows Mobile─ 來電黑名單
免費IT建置--網頁伺服器的完美組合LAMP(上)
手機程式設計入門與應用 Android、iPhone、Windows Mobile─ 繪圖板範例
手機程式設計入門與應用 Android、iPhone、Windows Mobile─ Matrix應用範例
精選文章 - 開發技術
分享到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的開發人員來說,不啻是一個理想的新選擇。
回首頁...
關於RUN!PC
|
廣告刊登
|
聯絡我們
|
讀者服務
|
雜誌訂閱
|
出刊&補寄時間
-- Copyright© FLAG INFORMATION CO., LTD. 旗訊科技(股)公司. All rights reserved. 本站圖文著作權所有 未經授權 不得任意轉載使用 --
-- 請使用1024*768螢幕解析度,IE 7.0或firefox 3.0以上瀏覽器,以達到最佳閱讀效果--