張智星 jang@mirlab.org http://mirlab.org/jang 台大資工系 MIR實驗室 第十九章 AJAX 與非同步傳輸 張智星 jang@mirlab.org http://mirlab.org/jang 台大資工系 MIR實驗室.

Presentation on theme: "張智星 jang@mirlab.org http://mirlab.org/jang 台大資工系 MIR實驗室 第十九章 AJAX 與非同步傳輸 張智星 jang@mirlab.org http://mirlab.org/jang 台大資工系 MIR實驗室."— Presentation transcript:

1 張智星 jang@mirlab.org http://mirlab.org/jang 台大資工系 MIR實驗室
第十九章 AJAX 與非同步傳輸 張智星 台大資工系 MIR實驗室

2 本章大綱 大綱 本章介紹如何進行網頁的非同步傳輸，特別是著重於 AJAX 的原理及範例，並說明如何以 JavaScript Framework 中最常被用到的 Prototype.js 來簡化 AJAX 的設計及應用。 主題 19-1：簡介 19-2：使用隱藏式 iframe 的非同步傳輸 19-3：基本 AJAX 原理與範例 19-4：使用 Prototype.js 來進行 AJAX 網頁設計

3 19-1：簡介 本小節介紹AJAX的相關知識背景。

4 發展緣由 Web 基本上是一個分散的系統，所有的計算和處理，都由用戶端和伺服器來共同完成，用戶端的電腦執行的是網頁中的 Client-side Scripts，而伺服器則是執行網頁中的 Server-side Scripts。 在 http 的協定下，每當使用者發出一個 Request 之後，伺服器就相執行網頁中的 Server-side Scripts （如 ASP），並將結果傳回給用戶端，再由用戶端的瀏覽器來執行網頁中的 Client-side Scripts（如 JavaScript 或 VBScript），並將結果顯示在螢幕上。 如果還要存取伺服器端的資料，就必須再一次經由表單的送出，才能指揮伺服器做事，並將結果以新的網頁資料回 傳，造成換頁，因此要保存原先網頁的資訊，比較麻煩。

5 非同步傳輸 目標：由 Client-side Scripts 所接收的事件（如滑鼠點選某一按鈕）來指揮 Server-side Scripts 做事，並在不換頁的情況下，將 Server-side Scripts 的執行結果悄悄地送回 Client-side Scripts 並顯示結果於同一個網頁。 可以使用以下幾種方式達成： 使用隱藏式的 iframe：這是一種比較傳統的方式，但是使用方式也比較受限。 使用 AJAX：這是一種比較常用的方式，也比較有彈性。 亦可採用微軟的 Remote Scripting 來達成非同步傳輸，但是這需要近端的機器安裝 Java，對使用者造成負擔，因此比較不實用。

6 AJAX AJAX 的全名是「Asynchronous JavaScript And XML」，翻成中文是「非同步式的 JavaScript 與 XML」，包含 HTML 及 CSS：負責顯示結果。 JavaScript：負責近端的事件擷取及資料處理，並大量運用 DOM (Document Object Model) 來讀取由伺服器回傳的資料，資料格式可能是 XML 或是 HTML。 XMLHttpRequest物件：負責以非同步的方式來執行遠端的程式，並接收相關的結果。

7 AJAX優缺點 採用 AJAX 可以提供下列好處： 也有下列幾項缺點： 簡化網頁流程設計。 降低網路資料流量。
因為不換頁，因此無法使用「上一頁」、「下一頁」來顯示所需的網頁。 搜尋引擎無法直接對動態資料建立索引，因此不利於搜尋。

8 19-2：使用隱藏式 iframe 的非同步傳輸 本小節介紹如何利用隱藏的iframe來接收伺服端的網頁，並將資料回傳到client端。

9 範例19-1 主題：使用 iframe 來進行非同步傳輸的簡單範例 說明
Webpage: remote host, local host 程式碼重點 說明 我們利用display:none將iframe隱藏，再由JavaScript指定要連到server端的位置。 此範例使用附檔名htm以顯示並沒有直接執行遠端程式碼。 下個範例是server端的處理方式。 <iframe id="myHiddenFrame" style="display:none"></iframe> var iframe = document.getElementById(‘myHiddenFrame’); iframe.src = “serverAction01.asp”;

10 範例19-2 主題：續19-1子網頁回傳訊息給母網頁 說明 檢視子網頁: remote host, local host 程式碼重點
子網頁會回傳訊息給隱藏iframe的母網頁。 使用 iframe 來進行非同步傳輸，是一個簡單可行的方式，足以對付一般基本應用。但是此方法最大的缺點，是子網頁無法支援 post 的資料傳送方式。 window.parent.showRetrievedInfo('<%=serverName%>', '<%=serverUrl%>', '<%=serverIp%>');

11 基本流程總結 母網頁利用隱藏的iframe（子網頁）來即時執行伺服器端的程式。 子網頁將結果回傳給母網頁的函式。
母網頁的函式藉由innerHTML的屬性，來修改<div>標籤內容。 iframe.src = “Server端網頁”; window.parent.函式(<%ASP參數%>); document.getElementById(‘DIV標籤ID’).innerHTML=顯示內容

12 範例19-3 主題：使用隱藏式iframe來查詢資料庫 說明 Webpage: remote host, local host 程式碼重點
由於 SQL 指令含有空格，因此在使用 get 方式來設定網址時，我們必須先將 SQL 指令送到 escape() 函數，以便進行適當之編碼來避開可能造成錯誤之字元。 由於我們必須反覆用到資料庫的查詢，達成此功能的相關函數是 getQueryResult()，定義於 sqlUtility.fun。 <script runat=server language=javascript src="sqlUtility.fun"></script>

13 範例19-4 主題：查詢資料庫Server端網頁 說明 檢視子網頁: remote host, local host 程式碼重點
由於我們不希望使用者去修改資料庫，因此會使用通用運算式來檢查 SQL 指令，不是 "select" 開頭，則認定是不合法的 SQL 指令並回傳警告訊息「SQL command not started with SELECT is disabled!」。 if (sql.search(/^select/i)<0)

14 19-3：基本 AJAX 原理與範例 本小節介紹AJAX的基本原理以及如何應用。

15 AJAX 的使用方式 主要包含三個基本步驟：
近端（用戶端）的發送函數：負責在接收主網頁的事件後，設定 AJAX 物件，並對伺服器發送 request 以啟動伺服器端程式碼的執行。 遠端（伺服器端）的程式碼：通常是一個 ASP 網頁，負責在伺服器執行必要之步驟，例如檢查帳號密碼，或是對資料庫進行查詢等。 近端（用戶端）的接收函數：負責接收伺服器的執行結果，並將結果以非同步的方式顯示在主網頁上。

16 範例19-5 主題：介紹AJAX使用原理的基本範例 說明 Webpage: remote host, local host
近端的發送函數：getServerTime()。 遠端的程式碼：showTime.asp。 近端的接收函數：displayTime()。 以下會分別說明這個範例的原理。

17 近端發送函數 近端的發送函數是 getServerTime()，主要負責當使用者點選按鈕後，產生 AJAX 物件並設定之，然後對伺服器發出 request 我們使用下列產生AJAX物件 對此物件設定接收伺服器的設定函式 使用下列方式來設定 AJAX 物件的其它性質 最後，送出AJAX命令 ajax = new ActiveXObject("Msxml2.XMLHTTP"); ajax.onReadyStateChange=displayTime; ajax.open(“GET”, url, true);//傳遞方式, 網址, 是否為非同步 ajax.send("");

18 範例19-6 主題：範例19-5的遠端程式碼 說明 連結：檢視原始檔 程式碼重點 本例功能相當簡單，只是印出現在的時間
today=new Date(); time=today.toString(); Response.write("<font color=red>"+time+"</font>");

19 近端的接收函數(1) 檢查伺服器程式碼是否執行完畢 說明 readyState 代表 ajax 目前的狀態
if (ajax.readyState==4) readyState 的值 說明 尚未啟始 1 已經建立連結 2 遠端已經收到要求 3 遠端程式碼處理中 4 處理完畢

20 近端的接收函數(2) 檢查伺服器回應函數是否執行無誤
只有當網頁 showTime.asp 回傳的狀態碼是 200 時，才代表 showTime.asp 的執行無誤。 if (ajax.status==200)

21 近端的接收函數(3) 將 AJAX 回傳的資訊指定給 <DIV>區塊內容
伺服器程式碼回傳的原始資訊，會原封不動地放到 responseText 此性質中。如果伺服器回傳的資訊是 XML 文件格式，我們可以由另一個性質 responseXML 來讀取 XML 文件內的各個物件。 document.getElementById('showResult').innerHTML = ajax.responseText;

22 19-4：使用 Prototype.js 來進行 AJAX 網頁設計

23 Prototype.js 目前在網路上最常被用到的 JavaScript framework，就是 prototype.js，可由網址下載： 所謂的 framework，可以看成是原先 JavaScript 的應用程式介面（API，或是 Appliation Program Interface），可以根基於基本的 JavaScript 來提供更先進的功能。 prototype.js所提供的擴充功能如下： AJAX：提供對於 AJAX 的支援，簡化了使用方式及流程，也提高了 AJAX 在各種不同瀏覽器的相容性。 DOM：延伸了 DOM 的物件和功能。 JSON（JavaScript Object Notation）：支援 JSON 的資料格式，比 XML 易於瞭解與讀寫。

24 範例19-7 主題：使用Prototype.js實作AJAX範例 說明 Webpage: remote host, local host
資料庫連結：test.mdb 這是一個比較老的資料庫，你也可以輸入其他歌手看看，例如周華健、巫啟賢、林憶蓮、莫文蔚、陶晶瑩等。

25 近端發送函數(1) 近端的發送函數：sendQuery()
此函數定義了遠端的程式碼網頁 queryDb01.asp，同時也加入了參數列 singerName=鄧麗君，最後產生 AJAX 物件並定義相關參數，送到遠端執行。其中有幾點要注意： 「$F('singerName')」是 Prototype.js 所提供的簡化語法，其功能全等於「document.getElementById('singerName').value」。 如果我們在 $() 之內輸入多個 id，此函數會回傳對應這些 id 的物件所成的陣列。

26 近端發送函數(2) 產生 AJAX 物件的第二個參數是 此參數全等於一個具有三個欄位的物件，因此我們甚至可以將 sendQuery() 函數的第三列敘述： 改成： method:‘post’, parameters:queryString, onComplete:showQueryResult var ajax = new Ajax.Request(url, {method:'post', parameters:queryString, onComplete:showQueryResult}); var ajaxParam = new Object(); ajaxParam.method='post'; ajaxParam.parameters=queryString; ajaxParam.onComplete=showQueryResult; var ajax = new Ajax.Request(url, ajaxParam);

27 範例19-8 主題：範例19-7的遠端程式碼 說明 連結：檢視原始檔 程式碼重點
此程式碼接收使用者輸入的歌手名字，造出 SQL 命令，並送入資料庫查詢，並將查詢結果印出來。 database="test.mdb"; sql="SELECT * from Singer where ChineseName = ‘“ +Request("singerName")+"'“; outStr=getFirstRecordFromQueryResult(database, sql); Response.write(outStr);

28 近端接收函數 近端的接收函數：showQueryResult() 在此函數中，我們只使用一列程式碼：
這也是 Prototype.js 所提供的簡化語法，其功能全等於 ： 由於資料庫和網頁編碼的不一致，常會導致亂碼的產生，因此我們這個範例的兩個檔案（ajaxViaPrototype01.htm 和queryDb01.asp），都是採用 UTF-8 的編碼，一般常用的文字編輯器，例如記事本（notepad.exe）及 UltraEdit，都支援 UTF-8 文字檔的檢視和編輯。 Element.update('queryResult', xmlHttpObj.responseText); document.getElementById('queryResult').innerHTML= xmlHttpObj.responseText

29 範例19-9 主題：使用prototype.js中的Updater()來達成AJAX 說明
Webpage: remote host, local host 程式碼重點 說明 Ajax.Updater() 的第一個參數是 ‘queryResult’，這就是代表回傳資料將會被指定到 document.getElementById(‘queryResult’).innerHTML，因此我們就不必另外在寫一個負責顯示結果的函數。 var ajax = new Ajax.Updater('queryResult', url, {method:'post', parameters:queryString});

30 範例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);}});