You are on page 1of 20

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">
<!--
alert("Hello World!"); JavaScript 程式碼區塊
//-->
</script>
</head>
<body>
<h1> 歡迎光臨 !</h1>
</body>
</html>

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

23-3
網頁程式設計
動態網頁技術與 Ajax

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
網頁程式設計
動態網頁技術與 Ajax

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
網頁程式設計
動態網頁技術與 Ajax

23-2-1 Ajax 的應用


目前已經有愈來愈多網站導入 Ajax 概念,常見的應用如下:

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


網頁,也就是將網頁上的區塊拖曳到喜歡的位置,重新配置網頁的版面。

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


者擁有更即時的反應,減少操作延遲或畫面重新整理的情況。

諸如臉書、撲浪
等社群網站均有
導入 Ajax 概念

23-8
23
™™改善使用者介面與使用者經驗:導入 Ajax 概念的網站能夠營造更友善的
使用者介面與使用者經驗,例如使用者可以在 Google Maps 網站 (http://
maps.google.com) 平順拖曳整張地圖,而不會有延遲,也不會因為點取地
圖的操作按鈕,導致網頁重新整理,而必須浪費時間等待。

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


在搜尋欄位中輸入部分關鍵字,就會出現自動完成拼字清單,若裡面有您
想要輸入的關鍵字,可以從中選取,否則就繼續輸入。

23-9
網頁程式設計
動態網頁技術與 Ajax

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
網頁程式設計
動態網頁技術與 Ajax

™™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
網頁程式設計
動態網頁技術與 Ajax

二、傳送 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 檔案:

var XHR = createXMLHttpRequest();


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
綜合前面的討論,可以整理成如下:

var XHR = createXMLHttpRequest();


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
網頁程式設計
動態網頁技術與 Ajax

現在,我們就來看個實際應用,這個例子的執行結果如下圖,當瀏覽者點取
[ 顯示詩句 ] 按鈕時,就會讀取伺服器端的 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
網頁程式設計
動態網頁技術與 Ajax

這個網頁的執行結果如下圖,和前面的 <\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
網頁程式設計
動態網頁技術與 Ajax

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、flxAJAX、AjaxAC 等,您可以在 Sourceforge (http://sourceforge.net/)
進行下載。

23-20