البحث الحي AJAX و PHP

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";
 إرجاع
 }
xmlHttp=GetXmlHttpObject()
إذا (xmlHttp==null)
 {
 alert ("التصفح لا يدعم طلبات HTTP")
 إرجاع
 }
var url="livesearch.php";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged; 
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
} 
دالة stateChanged() 
{ 
إذا (xmlHttp.readyState==4 أو xmlHttp.readyState=="complete")
 { 
 document.getElementById("livesearch").
 innerHTML=xmlHttp.responseText;
 document.getElementById("livesearch").
 style.border="1px solid #A5ACB2";
 } 
}
دالة 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");
  }
 }
إرجاع xmlHttp;
}

Example Explanation:

GetXmlHttpObject مع طلبات AJAX و PHP مثل الأمثلة المقدمة

دالة showResult()

تقوم الدالة بتنفيذ مرة واحدة لكل حرف يدخل في نافذة النص

إذا لم يكن هناك إدخال في مجال النص (str.length == 0)، يضبط الدالة حقل العودة على أنه فارغ ويزيل أي حواف حوله

لكن، إذا كان هناك إدخال في مجال النص، يقوم الدالة بتنفيذ ما يلي:

  1. تحديد url (اسم الملف) الذي سيُرسل إلى الخادم
  2. إضافة المعامل الذي يحتوي على محتوى مربع الإدخال (q) إلى url
  3. إضافة عدد عشوائي لمنع استخدام ملف التخزين المؤقت من قبل الخادم
  4. استدعاء دالة GetXmlHttpObject لإنشاء جسم XMLHTTP، وإعلام هذه الدالة بتنفيذ دالة تُدعى stateChanged
  5. استخدام url المقدمة لفتح object XMLHTTP
  6. إرسال طلب HTTP إلى الخادم

وظيفة stateChanged()

عندما يتغير حالة XMLHTTP object، يتم تنفيذ هذه الوظيفة.

عندما يصبح الحالة 4 (أو "complete")، سيتم ملء محتوى占位符 txtHint باستخدام نص الاستجابة، وسيتم تعيين حاشية حول الحقل العائدين.

صفحة PHP

الصفحة الخادمة التي يتم استدعاؤها بواسطة الكود JavaScript هي ملف PHP المسمى "livesearch.php".

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

هذه الأكواد ستقوم بالبحث عن العناوين التي تتطابق مع النص البحثي في ملف XML وتقوم بإرجاع النتائج كـ HTML:

<?php
$xmlDoc = new DOMDocument();
$xmlDoc->load("links.xml");
$x=$xmlDoc->getElementsByTagName('link');
//الحصول على معامل q من URL
$q=$_GET["q"];
//البحث عن جميع الروابط من ملف xml إذا طول q>0
إذا (strlen($q) > 0)
{
$hint="";
لـ($i=0; $i<($x->length); $i++)
 {
 $y=$x->item($i)->getElementsByTagName('title');
 $z=$x->item($i)->getElementsByTagName('url');
 إذا ($y->item(0)->nodeType==1)
  {
  //إيجاد رابط يتطابق مع النص البحثي
  إذا (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q))
   {
   إذا ($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;
?>

Example Explanation:

If any text is sent from JavaScript (strlen($q) > 0), the following will occur:

  1. A PHP XML DOM object to create a "links.xml" file
  2. Traverse all "title" elements (nodetypes = 1) to find the match for the name passed by JavaScript
  3. Find the link containing the correct title and set it to the "$response" variable. If more than one match is found, all matches will be added to the variable
  4. If no match is found, set the $response variable to "no suggestion"
  5. $result is the output sent to the "livesearch" placeholder