AJax技术

PHP 和 AJAX 请求

字号+ 作者:H5之家 来源:H5之家 2017-12-06 17:00 我要评论( )

AJAX 请求HTML 表单这是 HTML 表单。它包含一个简单的 HTML 表单和指向 JavaScript 的链接:

PHP 和 AJAX 请求

administrator 提交于 周日, 12/03/2017 - 22:20

AJAX 请求

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),则:

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • AJAX XML 实例

    AJAX XML 实例

    2017-12-07 10:01

  • 获取网页 HTML 中 Title内容的代码

    获取网页 HTML 中 Title内容的代码

    2017-12-06 13:00

  • Web前端面试题:什么是 AJAX ?

    Web前端面试题:什么是 AJAX ?

    2017-11-25 14:40

  • Ajax技术与传统Web应用的比较

    Ajax技术与传统Web应用的比较

    2017-11-20 18:10

网友点评