PHP และ AJAX การค้นหาทันที

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 และบอกให้ฟังก์ชันดังกล่าวทำงานเมื่อมีการเปลี่ยนแปลง
  5. 使用给定的 url 来打开 XMLHTTP 对象
  6. ส่งคำขอ HTTP ไปยังเซิร์ฟเวอร์

ฟังก์ชัน stateChanged()

ตอนที่สถานะของ XMLHTTP แปลงแปลงใหม่ ฟังก์ชันนี้จะทำงาน

เมื่อสถานะเป็น 4 (หรือ "complete") จะใช้ข้อความตอบกลับเพื่อตั้งค่าเนื้อหาของ txtHint และตั้งขอบรอบในสำหรับของตอบกลับ

หน้า PHP

หน้าเซิร์ฟเวอร์ที่เรียกโดย JavaScript คือไฟล์ PHP ที่มีชื่อ "livesearch.php"

"livesearch.php" จะตรวจสอบแบบ XML ที่ชื่อ "links.xml" ซึ่งมีข้อความและ URL ของหน้าที่ codew3c.com บางหน้า

รหัสในนี้จะค้นหาข้อความที่ตรงกับข้อความค้นหาในแบบ 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 สำหรับไฟล์ "links.xml"
  2. เดินทางผ่านทุกตัวองค์ประกอบ "title" (nodetypes = 1) เพื่อหาความตรงกันกับข้อมูลที่ JavaScript ส่งมา
  3. หา link ที่มี title ที่ถูกต้อง และตั้งเป็นตัวแปร "$response" ถ้าพบมากกว่าหนึ่งความตรงกัน ทุกความตรงกันจะถูกเพิ่มเข้าตัวแปร
  4. ถ้าไม่พบความตรงกัน ตัวแปร $response จะถูกตั้งเป็น "no suggestion"
  5. $result คือออกอากาศที่ส่งไปยังตัวแทน "livesearch"