AJAX技术之发展与介绍[教程].ppt

AJAX 技術之發展與介紹 報告：資管碩一 王聖元 9822001M 什麼是AJAX? 什麼是AJAX？ 英文全名是Asynchronous JavaScript + XML，Asynchronous是非同步的意思。 AJAX它Power的地方似乎不在於 「Asynchronous JavaScript and XML」表面上技術，重點在於AJAX能夠將WEB Browser與AP Server串起來。 同步與非同步? 客戶瀏覽端 使用者介面 網路伺服器 傳輸 資料儲存、後端處理、 其他後端系統 伺服器端系統 客戶瀏覽端 使用者介面 傳輸 資料儲存、後端處理、 其他後端系統 伺服器端系統 AJAX引擎 傳統的通訊方式 使用者活動 使用者活動 使用者活動 系統資料處理 系統資料處理 資料傳輸 資料傳輸 資料傳輸 資料傳輸 伺服器端 客戶端 Ajax web的通訊方式 資料 傳輸 資料 傳輸 資料 傳輸 資料 傳輸 使用者活動 IE瀏覽端 Ajax引擎 系統資料處理 系統資料處理 系統資料處理 系統資料處理 客戶端資料處理 客戶端 伺服器端 與傳統的 Web 應用比較 老式做法 傳統網頁無論新增、修改、換頁，以及排序都會有頁面重新讀取的動作 。在過去如果我們希望頁面不重新讀取、達成上述動作時，就必須藉助如「開新視窗」、「Frame 或 Iframe」、「Cookie」等方式來達成我們的目標。 Web 2.0 的現在 現今我們有看到許多像 Yahoo! Map、Google Calendar 等「網路應用程式」（使用習慣類似電腦中的應用程式），如果我們還是使用過去的老式做法，頁面上一定會一大堆隱藏的 I frame 或跳出一大堆視窗。幸好，現在我們有了 AJAX，簡單來說我們可以直接用 Javascript 去發出一個 Request，不需要產生許多累贅的東西。 傳統Web AJAX應用 Vs 義守大學資管系 AJAX 的發展… AJAX 技術在1997年被發明 ?允許客戶端腳本發送HTTP請求(XMLHTTP)的第一 個組件由Outlook Web Access小組寫成 ?迅速地成為了Internet Explorer 4.0的一部分 ?Outlook Web Access是第一個應用了Ajax技術的 成功的商業應用程序 2005年初，許多事件使得AJAX被大眾所接受 2007年 ASP.net AJAX 誕生 為什麼要用AJAX? 為什麼要用AJAX? 不用整張網頁，改用XML的通訊方式使得通訊量大減，速度變快。 客戶端功能大量使用JavaScript取代伺服端程式，也是減少通訊，加快速度。  網頁不再整張更換，不會閃爍，使用者用起來更舒服，像在使用一般視窗程式！ 建立含有Ajax的網頁 Visual Studio 2008 Pro Ajax 重要的核心控制項 1. ScriptManager： 建立 Ajax網頁必備的基本元件。負責管理Page中的AJAX元件、局部更新、Client 要求、Server 回應。每個凡使用到AJAX應用程式的頁面都必須加入。 2. UpdatePanel： 非同步更新區塊，提供簡單易設計的非同步更新。只要把須要局部更新的東西放進這個框框內即可 UpdatePanel’s Trigger屬性：觸發UpdatePanel動作(執行局部更新的PostBack)的機制。 3. Timer： 讓網頁在指定的間隔時間來觸發一個動作。ex:設定每幾秒自動更新。 非同步更新技術範例 非同步更新技術範例 體驗AJAX風格的網頁 Google Maps Yahoo Maps 有龍數位教學平台 資料來源 Mantas Mint accounts to make a Mint AJAX魔法工廠（魔法祭壇） AJAX 是什麼？ 維基百科 臺灣大學計算機及資訊網路中心電子報