PHP学习4 — PHP与AJAX

1.　创建XMLHttpRequest 对象

1 var XMLHttp=null
2 if (window.XMLHttpRequest) {
3   XMLHttp=new XMLHttpRequest()  //适用除Internet Expoler以外的浏览器
4 }
5 else if (window.ActiveXObject){
6   XMLHttp=new ActiveXObject("Microsoft.XMLHTTP")  ////适用Internet Expoler
7 }

2.　PHP使用AJAX实例

（1）写HTML表单。它包含一个简单的 HTML 表单和指向 JavaScript 的链接

 1 <html>
 2 <head>
 3 <script src="clienthint.js"></script> 
 4 </head>
 5 
 6 <body>
 7 
 8 <form> 
 9 First Name:
10 <input type="text" id="txt1"
11 onkeyup="showHint(this.value)">  //当用户在输入域中按下并松开按键时，会触发一个事件
12 //当该事件被触发时，执行名为 showHint() 的函数
13 </form>
14 
15 <p>Suggestions: <span id="txtHint"></span></p>
16 //表单的下面是一个名为 "txtHint" 的 <span>。它用作 showHint() 函数所返回数据的占位符。
17 </body>
18 </html>

（2） JavaScript 代码存储在 "clienthint.js" 文件中，它被链接到 HTML 文档

 1 var xmlHttp
 2 function showHint(str) //每当在输入域中输入一个字符，该函数就会被执行一次。
 3 {
 4 if (str.length==0)
 5   { 
 6   document.getElementById("txtHint").innerHTML=""
 7   return
 8   }
 9 xmlHttp=GetXmlHttpObject()
10 if (xmlHttp==null)
11   {
12   alert ("Browser does not support HTTP Request")
13   return
14   } 
15 var url="gethint.php"  //定义要发送到服务器的 URL（文件名）
16 url=url+"?q="+str  //把带有输入域内容的参数 (q) 添加到这个 URL
17 url=url+"&sid="+Math.random()  //添加一个随机数，以防服务器使用缓存文件
18 xmlHttp.onreadystatechange=stateChanged   //调用 GetXmlHttpObject 函数来创建 XMLHTTP 对象，并在事件被触发时告知该对象执行名为 stateChanged 的函数
19 xmlHttp.open("GET",url,true)  //用给定的 URL 来打开打开这个 XMLHTTP 对象
20 xmlHttp.send(null)  //向服务器发送 HTTP 请求
21 } 
22 
23 function stateChanged()   //每当 XMLHTTP 对象的状态发生改变，则执行该函数。
24 { 
25 if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
26 //在状态变成 4 （或 "complete"）时，用响应文本填充 txtHint 占位符 txtHint 的内容。
27  { 
28  document.getElementById("txtHint").innerHTML=xmlHttp.responseText 
29  } 
30 }
31 
32 function GetXmlHttpObject()  //解决为不同浏览器创建不同 XMLHTTP 对象的问题。
33 {
34 var xmlHttp=null;
35 try
36  {
37  // Firefox, Opera 8.0+, Safari
38  xmlHttp=new XMLHttpRequest();
39  }
40 catch (e)
41  {
42  // Internet Explorer
43  try
44   {
45   xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
46   }
47  catch (e)
48   {
49   xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
50   }
51  }
52 return xmlHttp;
53 }

（3）被 JavaScript 代码调用的服务器页面是一个名为 "gethint.php" 的简单服务器页面。

"gethint.php" 中的代码会检查名字数组，然后向客户端返回对应的名字：

 1 <?php
 2 // Fill up array with names
 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 //get the q parameter from URL
35 $q=$_GET["q"];
36 
37 //lookup all hints from array if length of q>0
38 if (strlen($q) > 0)
39 {
40 $hint="";
41 for($i=0; $i<count($a); $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 //Set output to "no suggestion" if no hint were found
58 //or to the correct values
59 if ($hint == "")
60 {
61 $response="no suggestion";
62 }
63 else
64 {
65 $response=$hint;
66 }
67 
68 //output the response
69 echo $response;
70 ?>

（*整理自W3School）