AJAX 請求
在下面的 AJAX 例子中，我們將演示當用戶向 web 表單中輸入數據時，網頁如何與在線的 web 服務器進行通信。
在下面的文本框中輸入一個名字（測試說明：該實例功能未實現）
First Name:
Suggestions:
這個例子包括三張頁面：
a simple HTML form
a JavaScript
a PHP page
HTML 表單
這是 HTML 表單。它包含一個簡單的 HTML 表單和指向 JavaScript 的鏈接：
<html>
<head>
<script src="clienthint.js"></script>
</head>
<body>
<form>
First Name:
<input type="text" id="txt1"
onkeyup="showHint(this.value)">
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>
例子解釋 - HTML 表單
正如您看到的，上面的 HTML 頁面含有一個簡單的 HTML 表單，其中帶有一個名為 "txt1" 的輸入字段。
該表單是這樣工作的：
當用戶在輸入域中按下並松開按鍵時，會觸發一個事件
當該事件被觸發時，執行名為 showHint() 的函數
表單的下面是一個名為 "txtHint" 的 <span>。它用作 showHint() 函數所返回數據的占位符。
JavaScript
JavaScript 代碼存儲在 "clienthint.js" 文件中，它被鏈接到 HTML 文檔：
var xmlHttp
function showHint(str)
{
if (str.length==0)
{
document.getElementById("txtHint").innerHTML=""
return
}
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="gethint.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText
}
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
例子解釋：
showHint() 函數
每當在輸入域中輸入一個字符，該函數就會被執行一次。
如果文本框中有內容 (str.length > 0)，該函數這樣執行：
定義要發送到服務器的 URL（文件名）
把帶有輸入域內容的參數 (q) 添加到這個 URL
添加一個隨機數，以防服務器使用緩存文件
調用 GetXmlHttpObject 函數來創建 XMLHTTP 對象，並在事件被觸發時告知該對象執行名為 stateChanged 的函數
用給定的 URL 來打開打開這個 XMLHTTP 對象
向服務器發送 HTTP 請求
如果輸入域為空，則函數簡單地清空 txtHint 占位符的內容。
stateChanged() 函數
每當 XMLHTTP 對象的狀態發生改變，則執行該函數。
在狀態變成 4 （或 "complete"）時，用響應文本填充 txtHint 占位符 txtHint 的內容。
GetXmlHttpObject() 函數
AJAX 應用程序只能運行在完整支持 XML 的 web 浏覽器中。
上面的代碼調用了名為 GetXmlHttpObject() 的函數。
該函數的作用是解決為不同浏覽器創建不同 XMLHTTP 對象的問題。
這一點在上一節中已經解釋過了。
PHP 頁面
被 JavaScript 代碼調用的服務器頁面是一個名為 "gethint.php" 的簡單服務器頁面。
"gethint.php" 中的代碼會檢查名字數組，然後向客戶端返回對應的名字：
<?php
// Fill up array with names
$a[]="Anna";
$a[]="Brittany";
$a[]="Cinderella";
$a[]="Diana";
$a[]="Eva";
$a[]="Fiona";
$a[]="Gunda";
$a[]="Hege";
$a[]="Inga";
$a[]="Johanna";
$a[]="Kitty";
$a[]="Linda";
$a[]="Nina";
$a[]="Ophelia";
$a[]="Petunia";
$a[]="Amanda";
$a[]="Raquel";
$a[]="Cindy";
$a[]="Doris";
$a[]="Eve";
$a[]="Evita";
$a[]="Sunniva";
$a[]="Tove";
$a[]="Unni";
$a[]="Violet";
$a[]="Liza";
$a[]="Elizabeth";
$a[]="Ellen";
$a[]="Wenche";
$a[]="Vicky";
//get the q parameter from URL
$q=$_GET["q"];
//lookup all hints from array if length of q>0
if (strlen($q) > 0)
{
$hint="";
for($i=0; $i<count($a); $i++)
{
if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
{
if ($hint=="")
{
$hint=$a[$i];
}
else
{
$hint=$hint." , ".$a[$i];
}
}
}
}
//Set output to "no suggestion" if no hint were found
//or to the correct values
if ($hint == "")
{
$response="no suggestion";
}
else
{
$response=$hint;
}
//output the response
echo $response;
?>
如果存在從 JavaScript 送來的文本 (strlen($q) > 0)，則：
找到與 JavaScript 所傳送的字符相匹配的名字
如果找到多個名字，把所有名字包含在 response 字符串中
如果沒有找到匹配的名字，把 response 設置為 "no suggestion"
如果找到一個或多個名字，把 response 設置為這些名字
把 response 發送到 "txtHint" 占位符
