第十九章AJAX与非同步传输.PPT

範例19-10 主題：使用Responders.register做出請稍候的效果 Webpage: remote host, local host 程式碼重點 說明 onLoading 事件的函數可以不斷印出「資料處理中，請稍後...」之訊息，而對應至 onComplete 事件的函數則可以顯示最後查詢結果。 Ajax.Responders.register ({ onLoading: function(){ Element.update(‘queryResult’, ‘font color=red查詢資料中，請稍候.../font);}, onComplete: function(junk, xmlHttpObj){ Element.update(queryResult, xmlHttpObj.responseText);}}); */30 JavaScript 程式設計與應用：用於伺服器端的ASP環境 JavaScript 程式設計與應用：用於伺服器端的ASP環境 第十九章AJAX 與非同步傳輸 張智星 jang@ /jang 台大資工系 MIR實驗室 本章大綱 大綱 本章介紹如何進行網頁的非同步傳輸，特別是著重於 AJAX 的原理及範例，並說明如何以 JavaScript Framework 中最常被用到的 Prototype.js 來簡化 AJAX 的設計及應用。 主題 19-1：簡介 19-2：使用隱藏式 iframe 的非同步傳輸 19-3：基本 AJAX 原理與範例 19-4：使用 Prototype.js 來進行 AJAX 網頁設計 */30 19-1：簡介 本小節介紹AJAX的相關知識背景。 */30 發展緣由 Web 基本上是一個分散的系統，所有的計算和處理，都由用戶端和伺服器來共同完成，用戶端的電腦執行的是網頁中的 Client-side Scripts，而伺服器則是執行網頁中的 Server-side Scripts。 在 http 的協定下，每當使用者發出一個 Request 之後，伺服器就相執行網頁中的 Server-side Scripts （如 ASP），並將結果傳回給用戶端，再由用戶端的瀏覽器來執行網頁中的 Client-side Scripts（如 JavaScript 或 VBScript），並將結果顯示在螢幕上。 如果還要存取伺服器端的資料，就必須再一次經由表單的送出，才能指揮伺服器做事，並將結果以新的網頁資料回 傳，造成換頁，因此要保存原先網頁的資訊，比較麻煩。 */30 非同步傳輸 目標：由 Client-side Scripts 所接收的事件（如滑鼠點選某一按鈕）來指揮 Server-side Scripts 做事，並在不換頁的情況下，將 Server-side Scripts 的執行結果悄悄地送回 Client-side Scripts 並顯示結果於同一個網頁。 可以使用以下幾種方式達成： 使用隱藏式的 iframe：這是一種比較傳統的方式，但是使用方式也比較受限。 使用 AJAX：這是一種比較常用的方式，也比較有彈性。 亦可採用微軟的 Remote Scripting 來達成非同步傳輸，但是這需要近端的機器安裝 Java，對使用者造成負擔，因此比較不實用。 */30 AJAX AJAX 的全名是「Asynchronous JavaScript And XML」，翻成中文是「非同步式的 JavaScript 與 XML」，包含 HTML 及 CSS：負責顯示結果。 JavaScript：負責近端的事件擷取及資料處理，並大量運用 DOM (Document Object Model) 來讀取由伺服器回傳的資料，資料格式可能是 XML 或是 HTML。 XMLHttpRequest物件：負責以非同步的方式來執行遠端的程式，並接收相關的結果。 */30 AJAX優缺點 採用 AJAX 可以提供下列好處： 簡化網頁流程設計。 降低網路資料流量。 也有下列幾項缺點： 因為不換頁，因此無法使用「上一頁」、「下一頁」來顯示所需的網頁。 搜尋引擎無法直接對動態資料建立索引，因此不利於搜尋。 */30 19-2：使用隱藏式 iframe 的非同步傳輸 本小節介紹如何利用隱藏的iframe來接收伺服端的網頁，並將資料回傳到client端。 */30 範例19-1 主題：使用 iframe 來進行非同步傳輸的簡單範例 Webpage: remote host, local host 程式碼重點 說明 我們利用display:none將iframe隱藏，再由JavaScript指定要連到server端的位置。 此範例使用附檔名h