AJAX 與 PHP
AJAX 被用于創(chuàng)建交互性更強的應(yīng)用程序。
AJAX PHP 實例
下面的實例將演示當用戶在輸入框中鍵入字符時，網(wǎng)頁如何與 Web 服務(wù)器進行通信：
實例
嘗試在輸入框中輸入一個名字，如：Anna:
姓名:
返回值:
實例解釋 - HTML 頁面
當用戶在上面的輸入框中鍵入字符時，會執(zhí)行 "showHint()" 函數(shù)。該函數(shù)由 "onkeyup" 事件觸發(fā)：
<html>
<head>
<script>
function showHint(str)
{
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執(zhí)行的代碼
xmlhttp=new XMLHttpRequest();
}
else
{
//IE6, IE5 瀏覽器執(zhí)行的代碼
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","gethint.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<p><b>在輸入框中輸入一個姓名:</b></p>
<form>
姓名: <input type="text" onkeyup="showHint(this.value)">
</form>
<p>返回值: <span id="txtHint"></span></p>
</body>
</html>源代碼解釋：
如果輸入框是空的（str.length==0），該函數(shù)會清空 txtHint 占位符的內(nèi)容，并退出該函數(shù)。
如果輸入框不是空的，那么 showHint() 會執(zhí)行以下步驟：
1) 創(chuàng)建 XMLHttpRequest 對象
2) 創(chuàng)建在服務(wù)器響應(yīng)就緒時執(zhí)行的函數(shù)
3) 向服務(wù)器上的文件發(fā)送請求
4) 請注意添加到 URL 末端的參數(shù)（q）（包含輸入框的內(nèi)容）
注意： 上面實例中用到了很多關(guān)于JavaScript知識，學習本章節(jié)請先參考: JavaScript 教程
PHP 文件
上面這段通過 JavaScript 調(diào)用的服務(wù)器頁面是名為 "gethint.php" 的 PHP 文件。
"gethint.php" 中的源代碼會檢查姓名數(shù)組，然后向瀏覽器返回對應(yīng)的姓名：
<?php
// 將姓名填充到數(shù)組中
$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";
//從請求URL地址中獲取 q 參數(shù)
$q=$_GET["q"];
//查找是否由匹配值， 如果 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];
}
}
}
}
// 如果沒有匹配值設(shè)置輸出為 "no suggestion"
if ($hint == "")
{
$response="no suggestion";
}
else
{
$response=$hint;
}
//輸出返回值
echo $response;
?>解釋：如果 JavaScript 發(fā)送了任何文本（即 strlen($q) > 0），則會發(fā)生：
1. 查找匹配 JavaScript 發(fā)送的字符的姓名
2. 如果未找到匹配，則將響應(yīng)字符串設(shè)置為 "no suggestion"
3. 如果找到一個或多個匹配姓名，則用所有姓名設(shè)置響應(yīng)字符串
4. 把響應(yīng)發(fā)送到 "txtHint" 占位符
總結(jié)：返回Html格式
HTML 由一些普通文本組成。如果服務(wù)器通過 XMLHttpRequest 發(fā)送 HTML， 文本將存儲在 responseText 屬性中。
不必從 responseText 屬性中讀取數(shù)據(jù)。它已經(jīng)是希望的格式，可以直接將它插入到頁面中。
插入 HTML 代碼最簡單的方法是更新這個元素的 innerHTML 屬性。
優(yōu)點:
從服務(wù)器端發(fā)送的 HTML 代碼在瀏覽器端不需要用 JavaScript 進行解析。
HTML 的可讀性好。
HTML 代碼塊與 innerHTML 屬性搭配，效率高。
缺點:
若需要通過 AJAX 更新一篇文檔的多個部分，HTML 不合適
innerHTML 并非 DOM 標準。
PHP Ajax 跨域問題解決方案
如果你的異步請求需要跨域可以查看： PHP Ajax 跨域問題解決方案。
