PHP学习4 — PHP与AJAX

Posted JasonLiu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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)

以上是关于PHP学习4 — PHP与AJAX的主要内容,如果未能解决你的问题,请参考以下文章

(进阶篇)jQuery+Ajax+PHP+Mysql实现分页显示数据

56个PHP开发常用代码

PHP必用代码片段

(进阶篇)PHP+jQuery+Ajax+Mysql实现发表心情功能

创建用户聊天系统 -(PHP、MySQL、AJAX?)

学习笔记PHP和AJAX交互