原文:
从网页前端输入提示范围内的字符，然后显示从后台返回的结果
1:
2:
3:
4:
5: function showHint(str)
6: { 7: var xmlhttp;
8: if (str.length==0)
9: { 10: document.getElementById("txtHint").innerHTML=""; 11: return;
12: }
13: if (window.XMLHttpRequest)
14: { // code for IE7+, Firefox, Chrome, Opera, Safari 15: xmlhttp=new XMLHttpRequest();
16: }
17: else
18: { // code for IE6, IE5 19: xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 20: }
21: xmlhttp.onreadystatechange=function()
22: { 23: if (xmlhttp.readyState==4 && xmlhttp.status==200)
24: { 25: document.getElementById("txtHint").innerHTML=xmlhttp.responseText; 26: }
27: }
28: xmlhttp.open("GET","ajax.php?q="+str,true); 29: xmlhttp.send();
30: }
31:
32:
33:
34:
35:请在下面的输入框中键入字母（A - Z）：
36:
37: 姓氏：
38:
39:建议：
40:
41:
42:
如果输入框为空 (str.length==0)，则该函数清空 txtHint 占位符的内容，并退出函数。
如果输入框不为空，showHint() 函数执行以下任务：
- 创建 XMLHttpRequest 对象
- 当服务器响应就绪时执行函数
- 把请求发送到服务器上的文件
- 请注意我们向 URL 添加了一个参数 q （带有输入框的内容）
php：
1:
2: // 用名字来填充数组
3: $a[]="Anna";
4: $a[]="Brittany";
5: $a[]="Cinderella";
6: $a[]="Diana";
7: $a[]="Eva";
8: $a[]="Fiona";
9: $a[]="Gunda";
10: $a[]="Hege";
11: $a[]="Inga";
12: $a[]="Johanna";
13: $a[]="Kitty";
14: $a[]="Linda";
15: $a[]="Nina";
16: $a[]="Ophelia";
17: $a[]="Petunia";
18: $a[]="Amanda";
19: $a[]="Raquel";
20: $a[]="Cindy";
21: $a[]="Doris";
22: $a[]="Eve";
23: $a[]="Evita";
24: $a[]="Sunniva";
25: $a[]="Tove";
26: $a[]="Unni";
27: $a[]="Violet";
28: $a[]="Liza";
29: $a[]="Elizabeth";
30: $a[]="Ellen";
31: $a[]="Wenche";
32: $a[]="Vicky";
33:
34: //获得来自 URL 的 q 参数
35: $q=$_GET["q"];
36:
37: //如果 q 大于 0，则查找数组中的所有提示
38: if (strlen($q) > 0)
39: { 40: $hint="";
41: for($i=0; $i
42: { 43: if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
44: { 45: if ($hint=="")
46: { 47: $hint=$a[$i];
48: }
49: else
50: { 51: $hint=$hint." , ".$a[$i];
52: }
53: }
54: }
55: }
56:
57: // 如果未找到提示，则把输出设置为 "no suggestion"
58: // 否则设置为正确的值
59: if ($hint == "")
60: { 61: $response="no suggestion";
62: }
63: else
64: { 65: $response=$hint;
66: }
67:
68: //输出响应
69: echo $response;
70: ?>
效果
