Ajax

Chapter
動態網頁技術
與 Ajax
23
23-1 認識動態網頁技術
23-2 認識 Ajax
23-3 撰寫導入 Ajax 技術的動態網頁

網頁程式設計
動態網頁技術與 Ajax
23-1 認識動態網頁技術
在網際網路風行的早期，網頁只是靜態的圖文組合，使用者可以在網頁上瀏覽
資料，但無法做進一步的查詢、發表意見或進行電子商務、即時通訊、線上遊
戲、會員管理等活動，而這顯然不能滿足人們日趨多元化的需求。
為此，開始有不少人提出動態網頁的解決方案，
「動態網頁」指的是用戶端和
伺服器可以互動，也就是伺服器可以即時處理用戶端的要求，然後將結果回應
給用戶端。動態網頁通常是藉由「瀏覽器端 Scripts」和「伺服器端 Scripts」兩
種技術來完成，以下就為您做說明。
23-1-1 瀏覽器端 Scripts

瀏覽器端 Scripts 指的是嵌入在 HTML 原始碼內的小程式，由瀏覽器負責執
行。JavaScript 和 VBScript 均能用來撰寫瀏覽器端 Scripts，其中以 JavaScript 為
主流。
下圖是 Web 伺服器處理瀏覽器端 Scripts 的過程，當瀏覽器向 Web 伺服器要求

開啟包含瀏覽器端 Scripts 的 HTML 網頁時 ( 副檔名為 .html 或 .htm)，Web 伺服
器會從磁碟上讀取該網頁，然後傳送給瀏覽器並關閉連線，不做任何運算，而
瀏覽器一收到該網頁，就會執行裡面的瀏覽器端 Scripts 並將結果解譯成畫面。
下面是一個包含瀏覽器端 Scripts 的網頁 ( 副檔名為 .html 或 .htm)，<script> 元

素裡面的程式碼就是以 JavaScript 所撰寫的瀏覽器端 Scripts，您可以拿它和下
一節所要介紹的伺服器端 Scripts 做對照。
23-2
23
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> 我的第一個 JavaScript 程式 </title>
<script language="javascript">

</script>
</head>
<body>
<h1> 歡迎光臨 !</h1>
</body>
</html>
<\Ch23\hello.html> 1 顯示此對話方塊，請按 [ 確定 ] 2 顯示網頁內容
23-3
網頁程式設計
23-1-2 伺服器端 Scripts

雖然瀏覽器端 Scripts 已經能夠完成許多工作，但有些工作還是得在伺服器端
執行 Scripts 才能完成，例如存取資料庫。伺服器端 Scripts 也是嵌入在 HTML
原始碼內的小程式，但和瀏覽器端 Scripts 不同的是它由 Web 伺服器負責執行。
下圖是 Web 伺服器處理伺服器端 Scripts 的過程，當瀏覽器向 Web 伺服器要

求開啟包含伺服器端 Scripts 的網頁時 ( 副檔名為 .php、.asp、.aspx、.jsp、.cgi
等 )，Web 伺服器會從磁碟上讀取該網頁，先執行裡面的伺服器端 Scripts，將
結果轉換成 HTML 網頁 ( 副檔名為 .htm 或 .html)，然後傳送給瀏覽器並關閉連
線，而瀏覽器一收到該網頁，就會將之解譯成畫面。
常見的伺服器端 Scripts 有下列幾種：
CGI (Common Gateway Interface)：CGI 是在伺服器端程式之間傳送訊息的

標準介面，而 CGI 程式則是符合 CGI 標準介面的 Scripts，通常是由 Perl、
Python 或 C 語言所撰寫 ( 副檔名為 .cgi)。
PHP (PHP:Hypertext Preprocessor)：PHP 程式是在 Apache、Microsoft IIS

等 Web 伺服器執行的 Scripts，由 PHP 語言所撰寫，屬於開放原始碼
(open source)，具有完全免費、穩定、快速、跨平台 (UNIX、FreeBSD、
Windows、Linux、Mac OS…)、易學易用、物件導向等優點。
ASP (Active Server Pages)：ASP 程式是在 Microsoft IIS Web 伺服器執行的

Scripts，通常是由 VBScript 或 JavaScript 所撰寫 ( 副檔名為 .asp)，而新一
代的 ASP.NET 程式則改由功能較強大的 Visual Basic、Visual C#、Microsoft
J#、JScript.NET 等 .NET 相容語言所撰寫 ( 副檔名為 .aspx)。
23-4
23
JSP (Java Server Pages)：JSP 是 Sun 公司所提出的動態網頁技術，可以在
HTML 原始檔中嵌入 Java 程式並由 Web 伺服器負責執行 ( 副檔名為 .jsp)。
下面是一個包含伺服器端 Scripts 的網頁 ( 副檔名為 .php)，<?php...?> 裡面的程

式碼就是以 PHP 所撰寫的伺服器端 Scripts。請注意，這個程式必須在 Web 伺
服器上執行，此例為 Apache HTTP Server，有關 PHP 的語法與應用，建議您參
閱「PHP&MySQL 案例開發實戰手冊」一書 ( 碁峰資訊出版 )。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> 我的第一個 PHP 程式 </title>
</head>
<body>
<?php
echo("Hello World!");
PHP 程式碼區塊
phpinfo();
?>
</body>
</html>
<\Ch23\hello.php>
顯示 "Hello World!"
和 PHP 相關資訊
23-5
網頁程式設計
23-2 認識 Ajax
Ajax 是 Asynchronous JavaScript And XML 的簡寫，代表 Ajax 具有非同步、使
用 JavaScript 與 XML 等技術的特性。雖然 Ajax 的概念早在 Microsoft 於 1999
年推出 Internet Explorer 5 時，就已經存在，但並不是很受重視，直到近年來被
大量應用於 Google 網頁 ( 例如 Google Maps、Google Suggest、Gmail)，才迅速
竄紅。
為了讓您瞭解導入 Ajax 概念的動態網頁和傳統的動態網頁有何不同，我們先

來說明傳統的動態網頁如何運作，其運作方式如下圖，當瀏覽者變更下拉式功
能表中選取的項目、點取按鈕或做出任何與 Web 伺服器互動的動作時，就會
產生 Http Request，將整個網頁內容傳回 Web 伺服器，即使這次的動作只需要
一個欄位的資料，瀏覽器仍會將所有欄位的資料都傳回 Web 伺服器，Web 伺
服器在收到資料後，就會執行指定的動作，然後以 Http Response 的方式，將
執行結果全部送回瀏覽器 ( 包括完全沒有變動過的資料、圖片、JavaScript 等 )。
瀏覽器在收到資料時，便會將整個網頁內容重新顯示，所以瀏覽者通常都會看
到網頁閃一下，當網路太慢或網頁內容太大時，瀏覽者看到的可能不是一閃，
而是畫面停格，完全無法與網頁互動，相當浪費時間。
23-6
23
相反的，導入 Ajax 概念的動態網頁運作方式則如下圖，當瀏覽者變更下
拉式功能表中選取的項目、點取按鈕或做出任何與 Web 伺服器互動的動作
時，瀏覽器端會使用 JavaScript 透過 XMLHttpRequest 物件送出非同步的 Http
Request，此時只會將需要的欄位資料傳回 Web 伺服器 ( 不是全部資料 )，然後
執行指定的動作，並以 Http Response 的方式，將執行結果送回瀏覽器 ( 不包括
完全沒有變動過的資料、圖片、JavaScript 等 )，瀏覽器在收到資料後，可以使
用 JavaScript 透過 DHTML 或 DOM (Document Object Model) 來更新特定欄位。
由於整個過程均使用非同步技術，無論是將資料傳回伺服器或接收伺服器送回
的執行結果並更新特定欄位等動作，都是在背景運作，因此，瀏覽者不會看到
網頁閃一下，畫面也不會停格，瀏覽者在這個過程中仍能進行其它操作。
由前面的討論可知，Ajax 是用戶端的技術，它讓瀏覽器能夠與 Web 伺服器進

行非同步溝通，伺服器端的程式寫法不會因為導入 Ajax 概念而有太大差異，
同時導入 Ajax 的動態網頁將享有如下效益：
非同步溝通無須將整個網頁內容傳回 Web 伺服器，能夠節省網路頻寬。
由於只傳回部分資料，所以能夠減輕 Web 伺服器的負荷。
不會像傳統的動態網頁產生短暫空白或閃動的情況。
23-7
網頁程式設計
23-2-1 Ajax 的應用

目前已經有愈來愈多網站導入 Ajax 概念，常見的應用如下：
拖曳操作：導入 Ajax 概念的網站能夠讓瀏覽者以拖曳的方式自訂個人化

網頁，也就是將網頁上的區塊拖曳到喜歡的位置，重新配置網頁的版面。
線上遊戲與社群網站：導入 Ajax 概念的線上遊戲與社群網站可以讓使用

者擁有更即時的反應，減少操作延遲或畫面重新整理的情況。
諸如臉書、撲浪
等社群網站均有
導入 Ajax 概念
23-8
23
改善使用者介面與使用者經驗：導入 Ajax 概念的網站能夠營造更友善的
使用者介面與使用者經驗，例如使用者可以在 Google Maps 網站 (http://
maps.google.com) 平順拖曳整張地圖，而不會有延遲，也不會因為點取地
圖的操作按鈕，導致網頁重新整理，而必須浪費時間等待。
自動完成拼字清單：導入 Ajax 概念的搜尋引擎網站都有這項功能，只要

在搜尋欄位中輸入部分關鍵字，就會出現自動完成拼字清單，若裡面有您
想要輸入的關鍵字，可以從中選取，否則就繼續輸入。
23-9
網頁程式設計
23-2-2 Ajax 的相關技術

Ajax 並不是某個廠商的專利或特定產品，而是多項技術的整合運用，換句話
說，只要是整合了下列技術所製作的網頁，皆能視為導入 Ajax 概念的動態網
頁，您不妨到 Google Maps (http://maps.google.com) 網站體驗一下 Ajax 所帶來
的操作經驗：
JavaScript：這是多數瀏覽器都支援的用戶端 Scripts，我們可以使用
JavaScript 來建立用戶端瀏覽器與 Web 伺服器之間的溝通管道，也可以使
用 DOM 或 DHTML 來動態更新網頁的內容。
XML (eXtensible Markup Language)：這是用來交換資料的格式。
DHTML (Dynamic HTML)：DHTML 綜合了 HTML、JavaScript 及 CSS，您

可以將 DHTML 視為動態版的 HTML，只要賦予每個 HTML 元素獨一無
二的識別名稱 (ID)，然後使用 JavaScript 來動態更新網頁的內容，並配合
CSS 來設計網頁的編排格式，就能達到動態 HTML 的效果。
DOM (Document Object Model，文件物件模型 )：顧名思義，DOM 就是將

網頁的各個元素視為物件，並賦予屬性、方法與事件，諸如表格、超連
結、圖片等均為物件，並且擁有豐富的屬性、方法與事件，透過操作這些
物件，就能達到動態網頁的效果。
通常我們會使用 JavaScipt 透過 DOM 來動態新增、移除、修改 HTML 文

件或 XML 文件的內容，例如動態改變文字方塊的文字、指定超連結的位
址或圖片的來源位址。事實上，DHTML 與 DOM 有不少重疊的部分，用
途都是動態改變文件的格式或內容。
XMLHttpRequest：XMLHttpRequest 允許用戶端瀏覽器非同步地與 Web 伺

服器進行溝通與交換資料，透過 XMLHttpRequest 與 Web 伺服器溝通只會
將選擇的資料傳回 Web 伺服器，不會傳回整個網頁的資料。
23-10
23
23-3 撰寫導入 Ajax 技術的動態網頁
為了讓您對網頁如何導入 Ajax 技術有初步的認識，我們將其運作過程描
繪如下圖。首先，使用 JavaScipt 建立 XMLHttpRequest 物件；接著，透
過 XMLHttpRequest 物件傳送非同步 Http Request，Web 伺服器一收到 Http
Request，就會執行預先寫好的程式碼 ( 後端程式可以是 JSP、PHP、ASP/
ASP.NET...)，再將結果以純文字或 XML 格式傳回瀏覽器；最後，仍是使用
JavaScript 根據傳回來的結果更新網頁內容，整個過程都是非同步並在背景運
作，而且瀏覽器的所有動作均是透過 JavsScript 來完成。
一、建立 XMLHttpRequest 物件
不同瀏覽器建立 XMLHttpRequest 物件的方式不同，主要分為非 Internet
Explorer 與 Internet Explorer 兩派：
非 Internet Explorer：我們可以使用下列語法在 Firefox、Mozilla、Opera、

Netscape、Safari 等非 Internet Explorer 的瀏覽器建立 XMLHttpRequest 物件：
var XHR = new XMLHttpRequest();
由於我們無法事先得知瀏覽器是否支援上述的 JavaScript 語法，所以會加

入下列程式碼來做判斷：
var XHR = null;

if (window.XMLHttpRequest)
XHR = new XMLHttpRequest();
23-11
網頁程式設計
Internet Explorer：我們可以使用 ActiveX 控制項在 Internet Explorer 建立

XMLHttpRequest 物件，其語法如下：
var XHR = new ActiveXObject("Microsoft.XMLHttp");
同樣的，我們無法事先得知瀏覽器是否支援上述的 JavaScript 語法，所以

會加入下列程式碼來做判斷：
var XHR = null;

if (window.ActiveXObject)
XHR = new ActiveXObject("Microsoft.XMLHttp");
不同版本的 Internet Explorer 提供了不同版本的 XMLHttpRequest，差別在

於建立 ActiveX 控制項時須傳入不同參數，雖然我們建議使用最新版的
XMLHttpRequest 物件，但使用者的 Internet Explorer 卻不一定是最新版，
因此，我們會加入下列程式碼來做判斷：
01:var XHR = null;

02:if (window.ActiveXObject)
03:{
04: var XMLVersions = ["MSXML2.XMLHttp.5.0", "MSXML2.XMLHttp.4.0",
"MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp","Microsoft.XMLHttp"];
05: for (var i = 0; i < XMLVersions.length; i++)
06: {
07: try
08: {
09: XHR = new ActiveXObject(XMLVersions[i]);
10: break;
11: }
12: catch (error)
13: {
14: // 不用做處理，只是為了預防程式出錯終止
15: }
16: }
17:}
23-12
23
在前面的程式碼中，第 04 行是建立一個名稱為 XMLVersions、包含五個元素的
陣列，分別代表五種版本的 XMLHttpRequest 參數，愈前面的版本愈新；第 09
~ 10 行是建立 XMLHttpRequest 物件，若瀏覽器支援該版本的 XMLHttpRequest
物件，就會建立成功並離開 for 迴圈，使用 for 迴圈的目的就是為了一個一個
版本測試，直到找出瀏覽器支援的版本才停止，愈新的版本放愈前面才能保證
使用最新版。
由於建立 XMLHttpRequest 物件的頻率頗高，建議將它寫成下列函式。
function createXMLHttpRequest()
{
if (window.XMLHttpRequest)
return new XMLHttpRequest();
else if (window.ActiveXObject)
{
var XMLVersions = ["MSXML2.XMLHttp.5.0", "MSXML2.XMLHttp.4.0",
"MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp", "Microsoft.XMLHttp"];
for (var i = 0; i < XMLVersions.length; i++)
{
try
{
return new ActiveXObject(XMLVersions[i]);
}
catch (error)
{
// 不用做處理，純粹為了預防程式出錯終止
}
}
}
throw new Error(" 您的瀏覽器不支援 XMLHttpRequest 物件 ");
}
<\Ch23\utility.js>
日後若網頁需要建立 XMLHttpRequest 物件，就將 utility.js 檔案 include 進來，

然後呼叫 createXMLHttpRequest() 函式即可，如下所示：
var XHR = createXMLHttpRequest();
23-13
網頁程式設計
二、傳送 Http Request
成功建立 XMLHttpRequest 物件後，我們必須做如下設定才能傳送非同步 Http

Request：
1. 首先，呼叫 XMLHttpRequest 物件的 open() 方法，來設定要向 Web 伺服器

要求什麼資源 ( 文字檔、網頁 ...)，其語法如下，參數 method 用來指定建
立 Http 連線的方式，例如 GET、POST、HEAD，參數 URL 為欲要求的檔
案位址，參數 async 用來指定是否使用非同步呼叫，預設值為 true：
open(string method , string URL , bool async )
例如下面的程式碼會向 Web 伺服器以 GET 方式非同步要求 poetry.txt 檔案：

XHR.open("GET", "poetry.txt", true);
2. 接著，在 Web 伺服器接收到資料，進行處理並傳回結果後，
XMLHttpRequest 物件的 readyState 屬性會變更，進而觸發
onreadystatechange 事件，因此，我們可以藉由 onreadystatechange 事件處理
程式接收 Http Response，例如下面的敘述表示當發生 onreadystatechange 事
件時，就執行 handleStateChange() 函式，來取得 Web 伺服器傳回的結果：
XHR.onreadystatechange = handleStateChange;
3. 最後，呼叫 XMLHttpRequest 物件的 send() 方法，來送出 Http Request，

其語法如下，參數 content 是欲傳送給 Web 伺服器的參數，例如
"UserName=Jerry &PageNo=1"，當您以 GET 方式傳送 Request 時，由於不
需要傳送參數，故參數 content 為 null，而當您以 POST 方式傳送 Request
時，則可以指定要傳送的參數：
send(string content )
23-14
23
綜合前面的討論，可以整理成如下：

XHR.open("GET", "poetry.txt", true);
XHR.onreadystatechange = handleStateChange;
XHR.send(null);
function handleStateChange()
{
// 此處用來取得 Web 伺服器傳回的結果
}
三、接收 Http Response 並更新網頁內容
由於我們只能透過 XMLHttpRequest 物件的 onreadystatechange 事件瞭
解 Http Request 的執行狀態，因此，接收 Http Response 的程式碼是寫在
onreadystatechange 事件處理程式，也就是前面例子所指定的 handleStateChange()
函式。
XMLHttpRequest 物件的 readyState 屬性會記錄目前是處於哪個階段，傳回值

為 0 ~ 4 的數字，其中 4 代表 Http Request 執行完畢，不過，Http Request 執行
完畢並不等於執行成功，因為有可能發生指定的資源不存在或執行錯誤，所以
我們還得判斷 XMLHttpRequest 物件的 status 屬性，只有當 status 屬性傳回 200
時，才代表執行成功，此時 statusText 屬性會傳回 "OK"，若指定的資源不存
在，則 status 屬性會傳回 404，而 statusText 屬性會傳回 "Object Not Found"。
當 Web 伺服器傳回的資料為文字時，我們可以透過 XMLHttpRequest 物件的

responseText 屬性取得執行結果；當 Web 伺服器傳回的資料為 XML 文件時，
我們可以透過 XMLHttpRequest 物件的 responseXML 屬性取得執行結果。
此外，XMLHttpRequest 物件還提供了下列方法：
abort()：停止 HTTP Reqeust。
getAllResponseHeaders()：取得所有 HTTP 標頭資訊。
getResponseHeader(string Name )：取得參數 Name 指定的標頭資訊。
23-15
網頁程式設計
現在，我們就來看個實際應用，這個例子的執行結果如下圖，當瀏覽者點取
[ 顯示詩句 ] 按鈕時，就會讀取伺服器端的 poetry.txt 文字檔，然後將檔案內容
顯示在按鈕下面。
1 點取此鈕 2 顯示詩句
為了讓您做比較，我們先採用傳統的 PHP 寫法，如下所示，由於這個網頁尚

未導入 Ajax 技術，所以在點取 [ 顯示詩句 ] 按鈕時，整個網頁會重新載入而快
速閃一下，然後在按鈕下面顯示詩句。
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<input type="submit" value=" 顯示詩句 "><br><br>
<?php if (!isset($_POST["Send"])) { ?>
<input type="hidden" name="Send" value="TRUE">
<?php }
else echo file_get_contents("poetry.txt");
?>
</form>
</body>
</html>
<\Ch23\program1.php>
23-16
23
至於下面的程式則是改成導入 Ajax 技術，注意網頁的副檔名為 .html。
01:<html>
02: <head>
03: <meta http-equiv="content-type" content="text/html; charset=utf-8">
04: <script src="utility.js" type="text/javascript"></script>
05: <script type="text/javascript">
06: var XHR = null;
07:
08: function startRequest()
09: {
10: XHR = createXMLHttpRequest();
11: XHR.open("GET", "poetry.txt", true);
12: XHR.onreadystatechange = handleStateChange;
13: XHR.send(null);
14: }
15:
16: function handleStateChange()
17: {
18: if (XHR.readyState == 4)
19: {
20: if (XHR.status == 200)
21: document.getElementById("span1").innerHTML = XHR.responseText;
22: else
23: window.alert(" 檔案開啟錯誤 !");
24: }
25: }
26: </script>
27: </head>
28: <body>
29: <form id="form1">
30: <input id="button1" type="button" value=" 顯示詩句 " onclick="startRequest()">
31: <br><br> <span id="span1"></span>
32: </form>
33: </body>
34:</html>
<\Ch23\program2.html>
23-17
網頁程式設計
這個網頁的執行結果如下圖，和前面的 <\Ch23\program1.php> 相同，但副檔名

為 .html，表示它純粹是一個在用戶端執行的網頁。
1 點取此鈕 2 顯示詩句
04：將 utility.js 檔案 include 進來，方便建立 XMLHttpRequest 物件。
05 ~ 26：這是用戶端的 JavaScript 指令碼，用來進行非同步傳輸。
06：宣告一個名稱為 XHR 的全域變數，用來代表即將建立的
XMLHttpRequest 物件。
08 ~ 14：宣告 startRequest() 函式，這個函式會在瀏覽者點取 [ 顯示詩

句 ] 按鈕時執行，第 10 行是建立 XMLHttpRequest 物件，第 11 行是
指定以 GET 方式向伺服器要求 poetry.txt 文字檔，第 12 行是指定在
XMLHttpRequest 物件的 readyState 屬性變更時執行 handleStateChange() 函
式，第 13 行是送出非同步要求。
16 ~ 25：宣告 handleStateChange() 函式，它會在 XMLHttpRequest 物件的

readyState 屬性變更時執行，故會重覆觸發多次，第 18 行的 if 條件式用
來判斷 XMLHttpRequest 物件的 readyState 屬性是否傳回 4，是的話，表示
非同步傳輸完成，就執行第 19 ~ 24 行，而第 20 行的 if 條件式用來判斷
XMLHttpRequest 物件的 status 屬性是否傳回 200，是的話，就執行第 21 行，
將傳回值顯示在 <span> 元素，否的話，就執行第 23 行，顯示錯誤訊息。
23-18
23
事實上，JavaScript 也可以在用戶端直接呼叫伺服器端的 PHP 程式，下面是一
個例子，它會呼叫伺服器端的 PHP 程式 <GetServerTime.php> 顯示格林威治標
準時間 (GMT)，其執行結果如下圖。
1
2
1 點取此鈕 2 顯示格林威治標準時間 (GMT)
01:<html>
02: <head>
03: <meta http-equiv="content-type" content="text/html; charset=utf-8">
04: <script type="text/javascript" src="utility.js"></script>
05: <script type="text/javascript">
06: var XHR = null;
07: function startRequest()
08: {
09: XHR = createXMLHttpRequest(); 在此呼叫伺服器端的 PHP 程式
10: XHR.open("GET", "GetServerTime.php", true);
11: XHR.onreadystatechange = handleStateChange;
12: XHR.send(null);
13: }
14:
15: function handleStateChange()
16: {
17: if (XHR.readyState == 4)
18: {
19: if (XHR.status == 200)
20: document.getElementById("span1").innerHTML = XHR.responseText;
<\Ch23\program3.html>( 下頁續 1/2)
23-19
網頁程式設計
21: else
22: window.alert(" 檔案開啟錯誤 !");
23: }
24: }
25: </script>
26: </head>
27: <body>
28: <form id="form1">
29: <input id="button1" type="button" value=" 顯示時間 " onclick="startRequest()">
30: <br><br><span id="span1"></span>
31: </form>
32: </body>
33:</html>
<\Ch23\program3.html>( 接上頁 2/2)
這個網頁的副檔名為 .html，表示它純粹是一個在用戶端執行的網頁，而且它
和前面的 <\Ch23\program2.html> 幾乎相同，最大的差別在於第 10 行改以 GET
方式向伺服器要求 PHP 程式 <GetServerTime.php>：
10: XHR.open("GET", "GetServerTime.php", true);
至於 PHP 程式 <GetServerTime.php> 的內容則相當簡單，就是呼叫 gmdate() 函

式顯示格林威治標準時間 (GMT)。
<?php
echo gmdate("Y-m-d H:i:s");
?>
<\Ch23\GetServerTime.php>
注意
想要在網頁上導入 Ajax 技術，除了自行撰寫前述的 JavaScript 之外，還有
一些現成的套件可以使用，例如 xajax、SAJAX、JPSPAN (ScriptServer)、
AJASON、ﬂxAJAX、AjaxAC 等，您可以在 Sourceforge (http://sourceforge.net/)
進行下載。
23-20

Ajax

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Ajax

Uploaded by

Copyright:

Available Formats

Chapter

23-3 撰寫導入 Ajax 技術的動態網頁

23-1-1 瀏覽器端 Scripts

下圖是 Web 伺服器處理瀏覽器端 Scripts 的過程，當瀏覽器向 Web 伺服器要求

下面是一個包含瀏覽器端 Scripts 的網頁 ( 副檔名為 .html 或 .htm)，<script> 元

<\Ch23\hello.html> 1 顯示此對話方塊，請按 [ 確定 ] 2 顯示網頁內容

23-1-2 伺服器端 Scripts

下圖是 Web 伺服器處理伺服器端 Scripts 的過程，當瀏覽器向 Web 伺服器要

常見的伺服器端 Scripts 有下列幾種：

CGI (Common Gateway Interface)：CGI 是在伺服器端程式之間傳送訊息的

PHP (PHP:Hypertext Preprocessor)：PHP 程 式 是 在 Apache、Microsoft IIS

ASP (Active Server Pages)：ASP 程式是在 Microsoft IIS Web 伺服器執行的

下面是一個包含伺服器端 Scripts 的網頁 ( 副檔名為 .php)，<?php...?> 裡面的程

為了讓您瞭解導入 Ajax 概念的動態網頁和傳統的動態網頁有何不同，我們先

由前面的討論可知，Ajax 是用戶端的技術，它讓瀏覽器能夠與 Web 伺服器進

非同步溝通無須將整個網頁內容傳回 Web 伺服器，能夠節省網路頻寬。

由於只傳回部分資料，所以能夠減輕 Web 伺服器的負荷。

23-2-1 Ajax 的應用

拖曳操作：導入 Ajax 概念的網站能夠讓瀏覽者以拖曳的方式自訂個人化

線上遊戲與社群網站：導入 Ajax 概念的線上遊戲與社群網站可以讓使用

自動完成拼字清單：導入 Ajax 概念的搜尋引擎網站都有這項功能，只要

23-2-2 Ajax 的相關技術

XML (eXtensible Markup Language)：這是用來交換資料的格式。

DHTML (Dynamic HTML)：DHTML 綜合了 HTML、JavaScript 及 CSS，您

DOM (Document Object Model，文件物件模型 )：顧名思義，DOM 就是將

通常我們會使用 JavaScipt 透過 DOM 來動態新增、移除、修改 HTML 文

XMLHttpRequest：XMLHttpRequest 允許用戶端瀏覽器非同步地與 Web 伺

非 Internet Explorer：我們可以使用下列語法在 Firefox、Mozilla、Opera、

var XHR = new XMLHttpRequest();

由於我們無法事先得知瀏覽器是否支援上述的 JavaScript 語法，所以會加

var XHR = null;

Internet Explorer： 我 們 可 以 使 用 ActiveX 控 制 項 在 Internet Explorer 建 立

var XHR = new ActiveXObject("Microsoft.XMLHttp");

同樣的，我們無法事先得知瀏覽器是否支援上述的 JavaScript 語法，所以

var XHR = null;

不同版本的 Internet Explorer 提供了不同版本的 XMLHttpRequest，差別在

01:var XHR = null;

由於建立 XMLHttpRequest 物件的頻率頗高，建議將它寫成下列函式。

日後若網頁需要建立 XMLHttpRequest 物件，就將 utility.js 檔案 include 進來，

var XHR = createXMLHttpRequest();

二、傳送 Http Request

成功建立 XMLHttpRequest 物件後，我們必須做如下設定才能傳送非同步 Http

1. 首先，呼叫 XMLHttpRequest 物件的 open() 方法，來設定要向 Web 伺服器

open(string method , string URL , bool async )

例如下面的程式碼會向 Web 伺服器以 GET 方式非同步要求 poetry.txt 檔案：

var XHR = createXMLHttpRequest();

3. 最後，呼叫 XMLHttpRequest 物件的 send() 方法，來送出 Http Request，

var XHR = createXMLHttpRequest();

三、接收 Http Response 並更新網頁內容

XMLHttpRequest 物件的 readyState 屬性會記錄目前是處於哪個階段，傳回值

當 Web 伺服器傳回的資料為文字時，我們可以透過 XMLHttpRequest 物件的

abort()：停止 HTTP Reqeust。

getAllResponseHeaders()：取得所有 HTTP 標頭資訊。

getResponseHeader(string Name )：取得參數 Name 指定的標頭資訊。

為了讓您做比較，我們先採用傳統的 PHP 寫法，如下所示，由於這個網頁尚

這個網頁的執行結果如下圖，和前面的 <\Ch23\program1.php> 相同，但副檔名

04：將 utility.js 檔案 include 進來，方便建立 XMLHttpRequest 物件。

05 ~ 26：這是用戶端的 JavaScript 指令碼，用來進行非同步傳輸。

08 ~ 14： 宣 告 startRequest() 函 式， 這 個 函 式 會 在 瀏 覽 者 點 取 [ 顯 示 詩

16 ~ 25： 宣 告 handleStateChange() 函 式， 它 會 在 XMLHttpRequest 物 件 的

1 點取此鈕 2 顯示格林威治標準時間 (GMT)

<\Ch23\program3.html>( 下頁續 1/2)

<\Ch23\program3.html>( 接上頁 2/2)

CGI (Common Gateway Interface)：CGI 是在伺服器端程式之間傳送訊息的

PHP (PHP:Hypertext Preprocessor)：PHP 程式是在 Apache、Microsoft IIS

ASP (Active Server Pages)：ASP 程式是在 Microsoft IIS Web 伺服器執行的

非同步溝通無須將整個網頁內容傳回 Web 伺服器，能夠節省網路頻寬。

由於只傳回部分資料，所以能夠減輕 Web 伺服器的負荷。

拖曳操作：導入 Ajax 概念的網站能夠讓瀏覽者以拖曳的方式自訂個人化

線上遊戲與社群網站：導入 Ajax 概念的線上遊戲與社群網站可以讓使用

自動完成拼字清單：導入 Ajax 概念的搜尋引擎網站都有這項功能，只要

XML (eXtensible Markup Language)：這是用來交換資料的格式。

DHTML (Dynamic HTML)：DHTML 綜合了 HTML、JavaScript 及 CSS，您

DOM (Document Object Model，文件物件模型 )：顧名思義，DOM 就是將

XMLHttpRequest：XMLHttpRequest 允許用戶端瀏覽器非同步地與 Web 伺

非 Internet Explorer：我們可以使用下列語法在 Firefox、Mozilla、Opera、

Internet Explorer：我們可以使用 ActiveX 控制項在 Internet Explorer 建立

abort()：停止 HTTP Reqeust。

getAllResponseHeaders()：取得所有 HTTP 標頭資訊。

getResponseHeader(string Name )：取得參數 Name 指定的標頭資訊。

04：將 utility.js 檔案 include 進來，方便建立 XMLHttpRequest 物件。

05 ~ 26：這是用戶端的 JavaScript 指令碼，用來進行非同步傳輸。

08 ~ 14：宣告 startRequest() 函式，這個函式會在瀏覽者點取 [ 顯示詩

16 ~ 25：宣告 handleStateChange() 函式，它會在 XMLHttpRequest 物件的