在這里我們將會用一個姓名提示框案例來簡單說明；
當用戶在輸入框中鍵入字符時，網頁與 web 服務器進行通信，服務器返回提示信息，傳給網頁；
先看一下界面：
在html頁面中：
思路：就是當用戶在上面的輸入框中鍵入a-z字符時，就會執行匹配姓名函數 "showHint()" 此時姓名匹配函數被"onkeyup" 事件觸發調用AJAX，向服務器發送請求和接收數據。
具體的代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h3>在輸入框中嘗試輸入字母 a-z的任意字符:</h3>
<form action="">
輸入姓名: <input type="text" id="txt1" onkeyup="showHint(this.value)" />
</form>
<p>提示信息: <span id="tip"></span></p>
<script>
function showHint(str)
// 姓名匹配函數
{
var xmlhttp;
// 創建客戶端請求對象的變量
if (str.length==0)
// 如果此時沒有輸入字符
{
document.getElementById("tip").innerHTML="";
// 如果輸入框為空 (str.length==0)，則該函數清空 tip 占位符的內容，並退出函數
return;
// 結束函數操作
}
// 如果輸入框不為空，showHint() 函數執行以下任務：
/*創建 XMLHttpRequest 對象
當服務器響應就緒時執行函數
把請求發送到服務器上的文件
請注意我們向 URL 添加了一個參數 q （帶有輸入框的內容）
*/
if (window.XMLHttpRequest)
// 兼容瀏覽器，分情況創建客戶端請求對象
{
// IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行代碼
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 瀏覽器執行代碼
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
// ajax的執行狀態函數
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
// 如果服務器響應完成時
{
document.getElementById("tip").innerHTML=xmlhttp.responseText;
// 將服務器響應發送到前端的數據填入到提示信息下；
}
}
xmlhttp.open("GET","運行php文件后賦值地址欄？號前的地址?q="+str,true);
// 客戶端打開服務器的方式是get 路徑 路徑上所攜帶輸入框中輸入的信息 運行模式是異步的方式；
xmlhttp.send();
// 客戶端向服務器發送信息
}
</script>
</body>
</html>
在php也就是服務器上，執行的操作
<?php
/**
* Created by PhpStorm.
* User: Administrator
* Date: 2018/10/26 0026
* Time: 下午 20:18
*/
// 書寫提示姓名數組
$a=array("Anna","Brittany","Cinderella","Diana","Eva",
"Fiona","Gunda","Hege","Inga","Johanna","Kitty",
"Linda","Nina","Ophelia","Petunia","Amanda","Raquel","Cindy",
"Doris","Eve","Evita","Sunniva","Tove","Unni","Violet","Liza",
"Elizabeth","Ellen","Wenche","Vicky");
//從URL里面獲取q參數，也就是用戶輸入提示框的信息；
$q=$_GET["q"];
$hint="";// hint是返回給前端/頁面的數據
//如果輸入框中有信息輸入，那么就從姓名數組中查找是否有匹配項
if (strlen($q) > 0)
{
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
//如果在姓名數組中沒找到對應項，將提示輸出設置為“沒有建議”
if ($hint == "")
{
// 如果提示信息為空
$response="no reguest";
// 響應前端 發送給前端沒有建議
}
else
{
$response=$hint;
// 否則 響應前端 將當前的提示數組賦值給前端，
}
//輸出響應
echo $response;