
|
什麼是AJAX? 英文全名是Asynchronous JavaScript + XML,Asynchronous是非同步的意思,JavaScript與XML同學都剛剛學過,它的命名來自一篇重要的文章http://www.adaptivepath.com/publications/essays/archives/000385.php 接下來的圖片就是來自這篇文章! AJAX的中文翻譯是:使用 JavaScript 與 XML 進行的非同步網頁通訊。 |
||
何謂同步與非同步?
左邊: 是傳統的網頁(伺服器與客戶端)通訊方式,主要是客戶提出網頁(HTTP request)需求,伺服器就給它一張網頁(HTML+CSS data)! 右邊: 是Ajax的通訊方式,相互間的通訊可以使用XML文件,而不必一定要是整張的HTML網頁。當有需要與伺服器互動時,客戶提出需求伺服器只回應必要(須改變)的資料,客戶端會有個Ajax引擎(一個JavaScript程式)處理回覆的資料,只修改部份網頁內容。通訊中使用者介面不需中斷等待新的網頁,客戶端變成一個類似獨立執行的程式,即使是在等XML的時候還是可以繼續操作,因為大部分的互動其實是使用JavaScript程式進行。 |
||
如果以時間序列來看通訊過程如下圖:
是傳統的通訊方式,在伺服端處理的時間,客戶端只能等待新的網頁,使用者界是中斷的狀態,必須在新網頁到達,或更新(重新整理)完畢之後才能進行下一個動作。這就是伺服器和客戶的動作被強迫『同步』(須互相等對方做完再繼續動作)! 下面: 是Ajax的通訊方式,伺服端與客戶端的程式是平行線,可以各自進行,如前所述,客戶端主要是由javaScript程式主控,不必事事等待伺服器回應,伺服器做好之後資料到達時也是JavaScript接收處理。伺服器與客戶端不一定要完全『同步』!所以說這是『非同步』通訊。 |
||
|
為什麼要用AJAX? 1.不用整張網頁,改用XML的通訊方式使得通訊量大減,速度變快。 2.客戶端功能大量使用JavaScript取代伺服端程式,也是減少通訊,加快速度。 3.網頁不再整張更換,不會閃爍,使用者用起來更舒服,像在使用一般視窗程式! 目前多數專業網站都已使用AJAX技術,已經是網站專業程度的新指標。 |
||
|
ASP.NET AJAX AJAX技術要實作很難,因為需要很複雜的JavaScript程式,不懂得XML文件也沒輒。所以一定要請專家先幫忙寫些工具程式的啦!目前微軟已經提供免費的AJAX的擴充套件,基本上就是擴充原來的ASP.NET功能,請按此下載! 下載後解壓縮,出現 ASPAJAXExtSetup.msi,執行 ASPAJAXExtSetup.msi 安裝即可。 OK!下次開啟Web Developer或Studio就會在工具箱看到新的AJAX元件了! |
||
|
實作一個AJAX時鐘 1.開啟新網站,指定要 ASP.NET AJAX-Enabled Web Site 那一種! 2.預設網頁會有一個 ScriptManager物件,這是一定要的幕後總管物件,不必管它,別殺掉它就好。 ![]() 3.先在網頁中加入一個 Timer 與一個 Label,寫出一個小時鐘程式。Label1.Text=Now.ToString,這個程式每次更換時間會整個網頁內容閃一次,並出現重新載入的進度表。 5.加入一個 UpdatePanel ,將 Label1放進去 ![]() 6.設定此 UpdatePanel 的 Trigger (觸發)屬性為依據 Timer1,這個程式效果就與真正的Windows程式相同。 ![]() |
||
|
AJAX點名單(資料庫) 1.參考資料檢視單元製作一個課程總表 2.使用RadioButtonList選單顯示科目總表 3.使用GeidView顯示該點名單 3.將Gridview丟入一個UpdatePanel 4.設定Trrigers為RadioButtonList觀察效果差異 |
||
|
AJAX Tool Kit http://www.codeplex.com/AjaxControlToolkit/Release/ProjectReleases.aspx?ReleaseId=11121 |