19-AJAX 與非同步傳輸.ppt

第十九章AJAX 與非同步傳輸

張智星[email protected]

http://www.cs.nthu.edu.tw/~jang

清大資工系多媒體檢索實驗室

JavaScript 程式設計與應用：用於伺服器端的 ASP環境

本章大綱大綱

本章介紹如何進行網頁的非同步傳輸，特別是著重於 AJAX 的原理及範例，並說明如何以 JavaScript Framework 中最常被用到的 Prototype.js 來簡化 AJAX 的設計及應用。

主題 19-1 ：簡介 19-2 ：使用隱藏式 iframe 的非同步傳輸 19-3 ：基本 AJAX 原理與範例 19-4 ：使用 Prototype.js 來進行 AJAX 網頁設計

2/30


19-1 ：簡介

本小節介紹 AJAX 的相關知識背景。

3/30


發展緣由 Web 基本上事一個分散的系統，所有的計算和處理，都由

用戶端和伺服器來共同完成，用戶端的電腦執行的是網頁中的 Client-side Scripts ，而伺服器則是執行網頁中的 Server-side Scripts 。

在 http 的協定下，每當使用者發出一個 Request 之後，伺服器就相執行網頁中的 Server-side Scripts （如 ASP ），並將結果傳回給用戶端，再由用戶端的瀏覽器來執行網頁中的 Client-side Scripts （如 JavaScript 或 VBScript ），並將結果顯示在螢幕上。

如果還要存取伺服器端的資料，就必須再一次經由表單的送出，才能指揮伺服器做事，並將結果以新的網頁資料回傳，造成換頁，因此要保存原先網頁的資訊，比較麻煩。

4/30


非同步傳輸由 Client-side Scripts 所接收的事件（如滑鼠點選某一按鈕）來指揮 Server-side Scripts 做事，並在不換頁的情況下，將 Server-side Scripts 的執行結果悄悄地送回 Client-side Scripts 並顯示結果於同一個網頁，我們可以使用以下兩種方式達成：使用隱藏式的 iframe ：這是一種比較傳統的方式，但是使用方式也比較受限。

使用 AJAX ：這是一種比較常用的方式，使用方式也比較有彈性。

註：我們也可以採用微軟的 Remote Scripting 來達到非同步傳輸的功能，但是這需要近端的機器安裝 Java ，對使用者造成多一層負擔，因此比較不實用。

5/30


AJAX AJAX 的全名是「 Asynchronous JavaScript

And XML 」，翻成中文是「非同步式的 JavaScript 與 XML 」，包含 HTML 及 CSS ：負責顯示結果。 JavaScript ：負責近端的事件擷取及資料處理，並大量運用 DOM (Document Object Model) 來讀取由伺服器回傳的資料，資料格式可能是 XML 或是 HTML 。

XMLHttpRequest 物件：負責以非同步的方式來執行遠端的程式，並接收相關的結果。

6/30


AJAX 優缺點採用 AJAX 可以提供下列好處：

簡化網頁流程設計。降低網路資料流量。

也有下列幾項缺點：因為不換頁，因此無法使用「上一頁」、「下一頁」來顯示所需的網頁。

搜尋引擎無法直接對動態資料建立索引，因此不利於搜尋。

7/30

JavaScript 程式設計與應用：用於伺服器端的 ASP環境 19-2 ：使用隱藏式 iframe 的非同步

傳輸

本小節介紹如何利用隱藏的 iframe 來接收伺服端的網頁，並將資料回傳到 client 端。

8/30


基本流程父網頁利用隱藏 iframe 來取得 Server 端的資料。

Server 端將參數回傳給父網頁的函式中。

藉由 innerHTML 的屬性，將預設的 <div>標籤內容修改成 Server 端回傳的資訊。

iframe.src = “Server 端網頁” ;

window.parent.函式 (<%ASP參數%>);

document.getElementById(‘DIV標籤 ID’).innerHTML= 顯示內容

9/30


範例 19-1 主題：使用 iframe 來進行非同步傳輸的簡單範例

連結：執行結果程式碼重點

說明我們利用 display:none 將 iframe 隱藏，再由

JavaScript 指定要連到 server 端的位置。下個範例是 server 端的處理方式。

<iframe id="myHiddenFrame" style="display:none"></iframe>var iframe = document.getElementById(‘myHiddenFrame’);iframe.src = “serverAction01.asp”;

10/30


範例 19-2 主題：續 19-1 回傳訊息給 iframe 來改變 client 端網頁

連結：檢視原始檔程式碼重點

說明回傳訊息給隱藏 iframe 的父網頁，也就是我們要修改的網頁本身。

使用 iframe 來進行非同步傳輸，是一個簡單可行的方式，足以對付一般基本應用。但是此方法最大的缺點，是子網頁無法支援 post 的資料傳送方式。

window.parent.showRetrievedInfo('<%=serverName%>', '<%=serverUrl%>', '<%=serverIp%>');

11/30


範例 19-3 主題：使用隱藏式 iframe 來查詢資料庫

連結：執行結果　檢視原始檔程式碼重點

說明由於 SQL 指令含有空格，因此在使用 get 方式來設定網址時，我們必須先將 SQL 指令送到 escape() 函數，以便進行適當之編碼來避開可能造成錯誤之字元。

由於我們必須反覆用到資料庫的查詢，達成此功能的相關函數是 getQueryResult() ，定義於 sqlUtility.fun 。

<script runat=server language=javascript src="sqlUtility.fun"></script>

12/30


範例 19-4 主題：查詢資料庫 Server 端網頁


說明由於我們不希望使用者去修改資料庫，因此會使用通用運算式來檢查 SQL 指令，不是 "select" 開頭，則認定是不合法的 SQL 指令並回傳警告訊息「 SQL command not started with SELECT is disabled! 」。

if (sql.search(/^select/i)<0)

13/30

JavaScript 程式設計與應用：用於伺服器端的 ASP環境 19-3 ：基本 AJAX 原理與範

例

本小節介紹 AJAX 的基本原理以及如何應用。

14/30


AJAX 的使用方式主要包含三個基本步驟：

近端（用戶端）的發送函數：負責在接收主網頁的事件後，設定 AJAX 物件，並對伺服器發送 request 以啟動伺服器端程式碼的執行。

遠端（伺服器端）的程式碼：通常是一個 ASP 網頁，負責在伺服器執行必要之步驟，例如檢查帳號密碼，或是對資料庫進行查詢等。

近端（用戶端）的接收函數：負責接收伺服器的執行結果，並將結果以非同步的方式顯示在主網頁上。

15/30


範例 19-5 主題：介紹 AJAX 使用原理的基本範例

連結：執行結果說明

近端的發送函數： getServerTime() 。遠端的程式碼： showTime.asp 。近端的接收函數： displayTime() 。以下會分別說明這個範例的原理。

16/30


近端發送函數近端的發送函數是 getServerTime() ，主要負責當使用者點選按鈕後，產生 AJAX 物件並設定之，然後對伺服器發出 request 我們使用下列產生 AJAX 物件

對此物件設定接收伺服器的設定函式

使用下列方式來設定 AJAX 物件的其它性質

最後，送出 AJAX命令

ajax = new ActiveXObject("Msxml2.XMLHTTP");

ajax.onReadyStateChange=displayTime;

ajax.open(“GET”, url, true);// 傳遞方式 , 網址 , 是否為非同步

ajax.send("");17/30


範例 19-6 主題：範例 19-5 的遠端程式碼


說明本例功能相當簡單，只是印出現在的時間

today=new Date(); time=today.toString(); Response.write("<font color=red>"+time+"</font>");

18/30


近端的接收函數 (1) 檢查伺服器程式碼是否執行完畢

說明 readyState 代表 ajax 目前的狀態

if (ajax.readyState==4)

readyState 的值說明

0 尚未啟始 1 已經建立連結 2 遠端已經收到要求 3 遠端程式碼處理中 4 處理完畢

19/30


近端的接收函數 (2) 檢查伺服器回應函數是否執行無誤

只有當網頁 showTime.asp 回傳的狀態碼是 200 時，才代表 showTime.asp 的執行無誤。

if (ajax.status==200)

20/30


近端的接收函數 (3) 將 AJAX 回傳的資訊指定給 <DIV>區塊內容

伺服器程式碼回傳的原始資訊，會原封不動地放到 responseText 此性質中。如果伺服器回傳的資訊是 XML 文件格式，我們可以由另一個性質 responseXML 來讀取 XML 文件內的各個物件。

document.getElementById('showResult').innerHTML = ajax.responseText;

21/30


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

本小節介紹如何使用 Prototype.js ，讓AJAX 可以在不同的瀏覽器平台上使用。

22/30


Prototype.js 目前在網路上最常被用到的 JavaScript framework ，就

是 prototype.js ，可由網址下載： http://prototype.conio.net

所謂的 framework ，可以看成是原先 JavaScript 的應用程式介面（ API ，或是 Appliation Program Interface ），可以根基於基本的 JavaScript 來提供更先進的功能。

prototype.js 所提供的擴充功能如下： AJAX ：提供對於 AJAX 的支援，簡化了使用方式及流程，也提高了 AJAX 在各種不同瀏覽器的相容性。

DOM ：延伸了 DOM 的物件和功能。 JSON （ JavaScript Object Notation ）：支援 JSON 的資料格

式，比 XML 易於瞭解與讀寫。 23/30


範例 19-7 主題：使用 Prototype.js 實作 AJAX 範例

連結：執行結果說明

資料庫連結： test.mdb 這是一個比較老的資料庫，你也可以輸入其他歌手看看，例如周華健、巫啟賢、林憶蓮、莫文蔚、陶晶瑩等。

24/30


近端發送函數 (1) 近端的發送函數： sendQuery()

此函數定義了遠端的程式碼網頁 queryDb01.asp ，同時也加入了參數列 singerName=鄧麗君，最後產生 AJAX 物件並定義相關參數，送到遠端執行。其中有幾點要注意：

「 $F('singerName') 」是 Prototype.js 所提供的簡化語法，其功能全等於「 document.getElementById('singerName').value 」。

如果我們在 $() 之內輸入多個 id ，此函數會回傳對應這些 id 的物件所成的陣列。

25/30


近端發送函數 (2) 產生 AJAX 物件的第二個參數是

此參數全等於一個具有三個欄位的物件，因此我們甚至可以將 sendQuery() 函數的第三列敘述：

改成：

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);

method:‘post’, parameters:queryString, onComplete:showQueryResult

26/30


範例 19-8 主題：範例 19-7 的遠端程式碼


說明此程式碼接收使用者輸入的歌手名字，造出

SQL 命令，並送入資料庫查詢，並將查詢結果印出來。

database="test.mdb"; sql="SELECT * from Singer where ChineseName = ‘“+Request("singerName")+"'“; outStr=getFirstRecordFromQueryResult(database, sql);Response.write(outStr);

27/30


近端接收函數近端的接收函數： 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

28/30


範例 19-9 主題：使用 prototype.js 中的 Updater() 來達成

AJAX 連結：執行結果程式碼重點

說明 Ajax.Updater() 的第一個參數是 ‘ queryResult’ ，這就是代表回傳資料將會被指定到 document.getElementById(‘queryResult’).innerHTML ，因此我們就不必另外在寫一個負責顯示結果的函數。

var ajax = new Ajax.Updater('queryResult', url, {method:'post', parameters:queryString});

29/30


範例 19-10 主題：使用 Responders.register 做出請稍候的效果

連結：執行結果程式碼重點

說明 onLoading 事件的函數可以不斷印出「資料處理中，請稍

後 ... 」之訊息，而對應至 onComplete 事件的函數則可以顯示最後查詢結果。

Ajax.Responders.register ({ onLoading: function(){ Element.update(‘queryResult’, ‘<font color=red>查詢資料中，請稍候 ...</font>');}, onComplete: function(junk, xmlHttpObj){ Element.update('queryResult', xmlHttpObj.responseText);}});

30/30

19-AJAX 與非同步傳輸.ppt

Documents

Transcript of 19-AJAX 與非同步傳輸.ppt