جستجوی زنده با AJAX و PHP

AJAX می‌تواند تجربه جستجو دوستانه‌تر و تعاملی‌تری برای کاربران ارائه دهد.

AJAX Live Search

AJAX Live Search

در این مثال AJAX، ما یک جستجوی زنده را نمایش می‌دهیم.

  • مزایای جستجوی زنده در مقایسه با جستجوی سنتی بسیار زیاد است:
  • نتایج نشان داده می‌شوند وقتی که داده‌ها وارد می‌شوند
  • نتایج را در حالی که داده‌ها را ادامه می‌دهید، فیلتر می‌کند

اگر نتایج کم باشد، حذف کاراکترها می‌تواند محدوده وسیع‌تری را به دست آورد

در فیلد متن زیر برای جستجوی صفحات CodeW3C.com جستجو کنید

  • این مثال شامل چهار عنصر است:
  • JavaScript
  • صفحه PHP
  • فرم ساده HTML

مستند XMLدر این مثال، نتایج در یک مستند XML (links.xml

) را جستجو می‌کند. برای اینکه این مثال کوچک و ساده باشد، فقط 8 نتیجه ارائه می‌شود.

فرم HTML

این صفحه HTML است. این شامل یک فرم ساده HTML، استایل CSS برای این فرم و لینک به JavaScript است:
<html>
<head> 
<script src="livesearch.js"></script> 
<style type="text/css">
  { 
  #txt1
  #livesearch 
  }
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. عنصر <div> به نام "livesearch" زیر فرم است. این به عنوان جایگزین برای داده‌هایی که showResult() بازمی‌گرداند استفاده می‌شود

JavaScript

JavaScript کد در فایل "livesearch.js" که با مستند HTML متصل است ذخیره می‌شود:

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
 {
 // فایرفاکس، اپرا 8.0+، سافاری
 xmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 // اینترنت اکسپلورر
 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 داده شده، شیء XMLHttpRequest باز می‌شود
  6. درخواست HTTP به سرور ارسال می‌شود

توابع stateChanged()

هر بار که وضعیت XMLHttpRequest تغییر کند، این تابع اجرا می‌شود.

وقتی که وضعیت به 4 (یا "complete") تغییر کند، متن پاسخ به عنوان محتوای جایگزین txtHint استفاده می‌شود و یک حاشیه اطراف آن تنظیم می‌شود.

صفحه PHP

صفحه‌ای که توسط کد JavaScript فراخوانی می‌شود، صفحه‌ای به نام "livesearch.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;
?>

Example Explanation:

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

  1. PHP creates an XML DOM object for the "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