PHP ແລະ AJAX Live Search

AJAX ສາມາດຈະຕອບສະໜອງການຊອກຫາທີ່ມີຄວາມສະບາຍຫຼາຍ ແລະມີຄວາມສຳພັນຫຼາຍກວ່າ.

AJAX Live Search

在下面的 AJAX 例子中，我们将演示一个实时的搜索。

实时的搜索与传统搜索相比，具有很多优势：

  • 当键入数据时，就会显示出匹配的结果
  • 当继续键入数据时，对结果进行过滤
  • 如果结果太少，删除字符就可以获得更宽的范围

在下面的文本框中搜索 CodeW3C.com 的页面

本例包括四个元素：

  • 简单的 HTML 表单
  • JavaScript
  • PHP 页面
  • XML 文档

在本例中，结果在一个 XML 文档 (links.xml) 中进行查找。为了让这个例子小而简单，我们只提供 8 个结果。

HTML 表单

这是 HTML 页面。它包含一个简单的 HTML 表单，针对此表单的 CSS 样式，以及指向 JavaScript 的链接：

<html>
<head>
<script src="livesearch.js"></script> 
<style type="text/css"> 
#livesearch
  { 
  margin:0px;
  width:194px; 
  }
#txt1
  { 
  margin:0px;
  } 
</style>
</head>
<body>
<form>
<input type="text" id="txt1" size="30"
onkeyup="showResult(this.value)">
<div id="livesearch"></div>
</form>
</body>
</html>

例子解释 - HTML 表单

正如你看到的，HTML 页面包含一个简单的 HTML 表单，其中的文本框名为 "txt1"。

表单是这样工作的：

  1. 当用户在文本框中按键并松开按键时，会触发一个事件
  2. 当事件触发时，会执行名为 showResult() 的函数
  3. 表单下面是名为 "livesearch" 的 <div> 元素。它用作 showResult() 所返回数据的占位符

JavaScript

JavaScript 代码存储在与 HTML 文档连接的 "livesearch.js" 中：

var xmlHttp
function showResult(str)
{
if (str.length==0)
 { 
 document.getElementById("livesearch").
 innerHTML="";
 document.getElementById("livesearch").
 style.border="0px";
 return
 }
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request")
 return
 }
var url="livesearch.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("livesearch").
 innerHTML=xmlHttp.responseText;
 document.getElementById("livesearch").
 style.border="1px solid #A5ACB2";
 } 
}
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;
}

ການອະທິບາຍຄວາມຄິດ:

GetXmlHttpObject ແລະ PHP ແລະ AJAX ການຮຽກຮ້ອງ ທີ່ມີຄວາມຄິດທີ່ດຽວກັນ

ວິທີການ showResult()

ວິທີການຈະດຳເນີນຕະຫລອດເວລາທີ່ມີຄຳເຂົ້າໃນສະຖານນີຄຳເຂົ້າ

ຖ້າບໍ່ມີຄຳເຂົ້າໃນສະຖານນີຄຳເຂົ້າ (str.length == 0) ວິທີການຈະກັນຄຳນຳຄືນແລະກຳຈັດບານບໍ່ມີບານອ້ອມຂ້າງ

ແຕ່ວ່າມີຄຳເຂົ້າໃນສະຖານນີຄຳເຂົ້າ (str.length == 0) ວິທີການຈະດຳເນີນ

  1. ການກໍານົດ url (ຊື່ເອກະສານ) ທີ່ຈະສົ່ງໄປຫາສະຖານນີ
  2. ການເພີ່ມປະກັນຄຳນຳຂອງຄຳເຂົ້າລະບຸ (q) ໃຫ້ໃນ url
  3. ການເພີ່ມຈຳນວນສິບບາງທີ່ບໍ່ສາມາດປະກອບມັນຫລັງຈາກການນຳໃຊ້ບັນຊີບັນຊີ
  4. ການໂຫລດຕັ້ງ GetXmlHttpObject ວິທີການເພີ່ມ XMLHTTP ວິທີການເພີ່ມລະບຸວ່າຈະດຳເນີນຕົວວິທີນັບບາງຊື່ວ່າ stateChanged
  5. 使用给定的 url 来打开 XMLHTTP 对象
  6. 向服务器发送 HTTP 请求

stateChanged() 函数

每当 XMLHTTP 对象的状态发生变化时，该函数就会执行。

当状态变为 4 (或 "complete") 时，就会使用响应文本来填充 txtHint 占位符的内容，并在返回字段周围设置一个边框。

PHP 页面

由 JavaScript 代码调用的服务器页面是名为 "livesearch.php" 的 PHP 文件。

"livesearch.php" 中的代码检查那个 XML 文档 "links.xml"。该文档 codew3c.com 上的一些页面的标题和 URL。

ການກຳລັງຄວາມສົມຮອງ XML ບັນຊີສະໜາມແລະການກັບຄືນ HTML ຄຳສັບສຳລັບຄຳຫາຄົ້ນຫາ

<?php
$xmlDoc = new DOMDocument();
$xmlDoc->load("links.xml");
$x=$xmlDoc->getElementsByTagName('link');
//get the q parameter from URL
$q=$_GET["q"];
//lookup all links from the xml file if length of q>0
if (strlen($q) > 0)
{
$hint="";
for($i=0; $i<($x->length); $i++)
 {
 $y=$x->item($i)->getElementsByTagName('title');
 $z=$x->item($i)->getElementsByTagName('url');
 if ($y->item(0)->nodeType==1)
  {
  //find a link matching the search text
  if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q))
   {
   if ($hint=="")
    {
    $hint="<a href='" . 
    $z->item(0)->childNodes->item(0)->nodeValue . 
    "' target='_blank'>" . 
    $y->item(0)->childNodes->item(0)->nodeValue . "</a>";
    }
   else
    {
    $hint=$hint . "<br /><a href='" . 
    $z->item(0)->childNodes->item(0)->nodeValue . 
    "' target='_blank'>" . 
    $y->item(0)->childNodes->item(0)->nodeValue . "</a>";
    }
   }
  }
 }
}
// 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. PHP XML DOM object ສໍາລັບການສ້າງ ບັນຊີ "links.xml"
  2. ຢ່າງສະໜາມສານ all "title" elements (nodetypes = 1), ເພື່ອຊອກຫາການຊົກສະຫນາມ name ທີ່ຖືກສົ່ງຕົວໃຫ້ໂດຍ JavaScript
  3. ພົບ link ທີ່ມີ title ເທົ່າທີ່ຖືກຕ້ອງ, ແລະຈຸດການໃຫ້ $response. ຖ້າພົບກັບການການຊົກສະຫນາມຫລາຍຫນັງ, ການຊົກສະຫນາມທັງໝົດຈະຕິດອອກໃນສິ່ງ
  4. ຖ້າບໍ່ພົບກັບການການຊົກສະຫນາມ, ຈະຈຸດການ $response ທີ່ "no suggestion"
  5. $result ແມ່ນອອກລົງສູ່ "livesearch" ບ່ອນຄາບ