前言

AJAX，一項近5年來迅速竄紅的網頁設計技術，它的出現改變了以往人們對網頁的印象，讓網頁呈現更加靈活，也更利於網頁應用程式的開發。AJAX並不是一個全新的技術，是由HTML、JavaScript、DHTML、DOM等既有的語言和網頁元件所組成，其目的在於提高使用者和網頁的互動、加速網頁瀏覽的效率以及提升使用性。主要是改善以往網頁重新載入時，讓使用者等待的缺點，利用非同步資料傳輸，使得資料取得僅限於需要的部分，讓使用者可以繼續其他操作，是目前各大網站(Google、Amazon、Yahoo…etc)所使用的技術，以下筆者將介紹AJAX相關內容和目前開發出來的幾個函式庫(library)。

AJAX相關內容和函式庫(library)

按照現有的網頁架構，整個網頁可以概分為三個部分：網頁呈現、網頁控制、網頁資料傳輸；網頁呈現以XHTML(eXtensible HTML)和CSS(Cascading Style Sheets)為主；網頁控制則以DHTML(Dynamic HTML)和DOM(Document Object Model)讓開發人員能夠控制網頁上的元件和整個網頁的流程；最後，網頁資料傳輸，利用XMLHttpRequest來做非同步的資料傳輸，讓使用者不用等待整個網頁重新載入，而且能夠繼續其他操作。

AJAX自2005年發展至今，已經有各式各樣的函式庫(library)被開發出來，以下簡單介紹jQuery、Google AJAX、和ASP.NET AJAX Toolkit三種目前較為廣泛被應用的library，以及用於FireFox上的Javascript Debug Tool，FireBug。

一、jQuery

是以javascript為基礎再往上建立的而成的library，其用意在於讓程式開發者能夠更容易的在前端(client)執行並且任意取得DOM裡面的element或node(DOM泛指HTML、XML等相關的檔案，而當中的element或node指的是檔案裡面的每一個tag)，支援CSS Selector，所以能夠任意存取及設定網頁上任一個Tag的屬性，另外jQuery不需要任何安裝，只要在Head中加入下載的連結即可，在使用上非常方便。

二、Google AJAX API

為整合式library，除了整合上述的jQuery之外，自行開發的Google Map API，數種免費的library像是Prototype、MooTools、script.aculo.us…等，功能包羅萬象，給有需要的程式開發者去使用，要使用Google 的library，必須先向Google申請金鑰，然後在Head中加入下載的網址，並且設定傳遞參數Key為你申請的金鑰，就可以使用所有library包含的套件，唯一要注意的是，這些library當中，有些有分個人用版本(免費)以及企業用版本(付費)，功能上會有差異，在參考API Document時留意即可。

三、ASP.NET AJAX Control Toolkit

隸屬於Microsoft開發的library，同樣也包含了jQuery library，並且作用在ASPX 檔案中，包含了40種網頁元件控制和延伸，不同於上述兩者，AJAX Control Toolkit須要另外下載，並且整合在Visual Studio來做程式開發(Visual Studio 2008支援jQuery Intellisense(Microsoft Ajax CDN)，Visual Studio 2010將完整支援jQuery(.NET 4.0))。

四、FireBug

是一款外掛在FireFox瀏覽器下的套件，能夠有效且快速的針對Javascript語法Debug，並且能夠設定中斷點，逐步執行，觀看每一個變數的數值，利用滑鼠游標移至元件變數上，還能夠即時標示網頁上對應的元件，計算網頁執行時間，以及各部份花費時間的百分比，是一款免費且方便好用的Debug Tool。

實例介紹

簡單的介紹之後，筆者選擇較為熟悉的ASP.NET AJAX Control ToolKit，陳述實做內容以及碰到的問題。

筆者當初接觸到客戶的要求是撰寫薪資匯款維護，將駐外人員的薪資按照個人設定匯款給該人員的眷屬，這當中需要匯款人的姓名(匯款需要)和身份證號(資料儲存需要)，並且得互相對應，實做上是設計一個子視窗，讓使用者用姓名關鍵字查詢身份證號，將使用者選定的身份證號傳回母視窗；客戶還希望能夠在輸入完身份證號之後，能夠馬上看到姓名。

原先根據這個需求，是利用ASP.NET 裡面的 PostBack去實做，然而這不可避免的會造成整個網頁Reload，除了畫面閃爍之外，PostBack大量的資料傳遞，勢必會耗費相當多的資源，最後，把主意動到了ASP.NET AJAX控制項─UpdatePanel上面，由於UpdatePanel 的特性，可以只更新部份的資料，搭配Trigger標籤，選擇AsyncPostBackTrigger就可以達到只更新所需資料的結果；而這當中另外用了一點小小技巧，因為客戶希望的是身份證號和姓名的配對必須正確，所以在驅動事件上面，使用onChange觸發是不夠的，有興趣的讀者可以實驗一下，onChange觸發的判斷是使用者輸入前後TextBox資料是否改變，也就是說如果在身份證號輸入前後資料相同且姓名資料已經改變的狀況下，無法觸發onChange，自然也不會顯示出正確的姓名；針對這點，最後採取的措施是改用onblur事件，用onblur觸發javacript function，再由javascript function去執行隱藏的Button click事件。這樣兜圈子的原因是Trigger並不支援onblur，只好花點心思用隱藏的Button click去實做。筆者將相關的程式碼簡化後列在下面供大家參考：



一、利用UpdatePanel和AsyncPostBackTrigger做非同步的資料傳輸，把需要變更的欄位包在裡面。



二、在觸發onblur事件後，呼叫Javascript Function，並且藉此轉而去觸發btnQuery 的click事件。



三、放在裡面的Javascript Function。



四、在VB.NET端的程式，透過btnQuery click事件呼叫，這邊就能根據需求來撰寫需要的功能，包含SQL 查詢以及控制或設定被ContentTemplate包覆的網頁元件屬性。

結語

AJAX的出現，不僅僅只是改變網頁應用程式的外貌，更讓網頁應用程式在使用上更接近視窗應用程式，結合網路連結資訊的快捷和便利，使得網頁程式的實用性大幅上升。

參考資料

jQuery Tutorials

Google AJAX API

ASP.NET AJAX Control Toolkit

Mozilla FireBug

AJAX學習筆記(包含FireBug使用介紹)

黑暗執行緒(推薦Blog)