PHP 和 AJAX

2013 年 8 月 4 日3820

PHP 和 AJAX 请求

XMLHttpRequest

AJAX XML

AJAX 请求

在下面的 AJAX 例子中，我们将演示当用户向 web 表单中输入数据时，网页如何与在线的 web 服务器进行通信。

在下面的文本框中输入名字：

Suggestions：

这个例子包括三张页面：

HTML 表单

这是 HTML 表单。它包含一个简单的 HTML 表单和指向 JavaScript 的链接：

<html>




<head>




<script src="clienthint.js"></script> 




</head>









<body>









<form> 




First Name:




<input type="text" id="txt1"




onkeyup="showHint(this.value)">




</form>









<p>Suggestions: <span id="txtHint"></span></p>









</body>




</html>

例子解释 - HTML 表单

正如您看到的，上面的 HTML 页面含有一个简单的 HTML 表单，其中带有一个名为 "txt1" 的输入字段。

该表单是这样工作的：

JavaScript

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

var xmlHttp









function showHint(str)




{




if (str.length==0)




  { 




  document.getElementById("txtHint").innerHTML=""




  return




  }




xmlHttp=GetXmlHttpObject()




if (xmlHttp==null)




  {




  alert ("Browser does not support HTTP Request")




  return




  } 




var url="gethint.php"




url=url+"?q="+str




url=url+"&sid="+Math.random()




xmlHttp.onreadystatechange=stateChanged 




xmlHttp.open("GET",url,true)




xmlHttp.send(null)




} 









function stateChanged() 




{ 




if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")




 { 




 document.getElementById("txtHint").innerHTML=xmlHttp.responseText 




 } 




}









function GetXmlHttpObject()




{




var xmlHttp=null;




try




 {




 // Firefox, Opera 8.0+, Safari




 xmlHttp=new XMLHttpRequest();




 }




catch (e)




 {




 // Internet Explorer




 try




  {




  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");




  }




 catch (e)




  {




  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");




  }




 }




return xmlHttp;




}

例子解释：

showHint() 函数

每当在输入域中输入一个字符，该函数就会被执行一次。

如果文本框中有内容 (str.length > 0)，该函数这样执行：

如果输入域为空，则函数简单地清空 txtHint 占位符的内容。

stateChanged() 函数

每当 XMLHTTP 对象的状态发生改变，则执行该函数。

在状态变成 4 （或 "complete"）时，用响应文本填充 txtHint 占位符 txtHint 的内容。

GetXmlHttpObject() 函数

AJAX 应用程序只能运行在完整支持 XML 的 web 浏览器中。

上面的代码调用了名为 GetXmlHttpObject() 的函数。

该函数的作用是解决为不同浏览器创建不同 XMLHTTP 对象的问题。

这一点在上一节中已经解释过了。

PHP 页面

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

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

<?php




// Fill up array with names




$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";









//get the q parameter from URL




$q=$_GET["q"];









//lookup all hints from array if length of 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];




      }




    }




  }




}









//Set output to "no suggestion" if no hint were found




//or to the correct values




if ($hint == "")




{




$response="no suggestion";




}




else




{




$response=$hint;




}









//output the response




echo $response;




?>

如果存在从 JavaScript 送来的文本 (strlen($q) > 0)，则：