مثال - جستجوی دیداری در AJAX

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Php-menu.png
موارد آموزشی
فرم‌ها در PHP
PHP پیشرفته
شیء گرایی در PHP
پایگاه داده MySQL
XML در PHP
AJAX در PHP
۱مقدمه‌ای بر AJAX
۲AJAX و PHP
۳AJAX و پایگاه داده
۴AJAX و XML
۵جستجوی دیداری AJAX
۶نظرسنجی با AJAX
مثال‌های PHP
مرجع PHP


از AJAX می‌توان برای ساخت جستجوهای کاربر پسندتر و تعاملی تر استفاده کرد.[۱]

جستجوی زنده در AJAX

مثال زیریک جستجوی دیداری را، که شما نتایج را در حالی که تایپ می‌کنید دریافت می‌کنید، به شما توضیح می‌دهد.

جستجوی دیداری دارای مزایای زیادی در مقابل جستجوی سنتی دارد:

  • نتایج در همان زمان تایپ به شما نشان داده می‌شوند
  • نتایج همزمان با تایپ شما محدودتر می‌شوند
  • اگر نتیجه بسیار محدود شد، برخی از کاراکترها را پاک می‌کند تا نتیجه گسترده‌تر مشاهده شود

صفحه‌ای از وب‌سایت wikicod را در فیلد ورودی زیر جستجو کنید:

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


نتایج در مثال بالا درون یک فایل XML که حاوی (links.xml) است پیدا می‌شوند. برای کوچک کردن و ساده کردن این مثال، تنها شش نتیجه در دسترس هستند.

توضیح مثال - صفحه HTML

زمانی که کاربر یک کاراکتر را درون فیلد ورودی بالا تایپ می‌کند، تابع "showResult()" اجرا می‌شود. رویداد "onkeyup" موجب اجرای این تابع می‌شود:

 1 <html>
 2 <head>
 3 <script>
 4 function showResult(str) {
 5   if (str.length==0) {
 6     document.getElementById("livesearch").innerHTML="";
 7     document.getElementById("livesearch").style.border="0px";
 8     return;
 9   }
10   if (window.XMLHttpRequest) {
11     // code for IE7+, Firefox, Chrome, Opera, Safari
12     xmlhttp=new XMLHttpRequest();
13   } else {  // code for IE6, IE5
14     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
15   }
16   xmlhttp.onreadystatechange=function() {
17     if (this.readyState==4 && this.status==200) {
18       document.getElementById("livesearch").innerHTML=this.responseText;
19       document.getElementById("livesearch").style.border="1px solid #A5ACB2";
20     }
21   }
22   xmlhttp.open("GET","livesearch.php?q="+str,true);
23   xmlhttp.send();
24 }
25 </script>
26 </head>
27 <body>
28 
29 <form>
30 <input type="text" size="30" onkeyup="showResult(this.value)">
31 <div id="livesearch"></div>
32 </form>
33 
34 </body>
35 </html>

توضیح کد:

در صورتی که فیلد ورودی خالی باشد (str.length==0)، تابع محتوای راهنمای livesearch را پاک می‌کند و از تابع خارج می‌شود.

در صورتی که فیلد ورودی خالی نباشد، تابع showResult() مراحل زیر را اجرا می‌کند:

  • ساخت یک شیء XMLHttpRequest
  • ساخت تابعی که می‌بایست در هنگام آماده بودن پاسخ سرور اجرا شود
  • ارسال درخواست به یک فایل روی سرور
  • توجه داشته باشید که یک پارامتر (q) (با محتوای فیلد ورودی) به URL اضافه شده‌است

فایل PHP

صفحه‌ای که توسط کد جاوا اسکریپت بالا فراخوانی می‌شود یک فایل php به نام "livesearch.php" است.

کد درون فایل "livesearch.php" یک فایل XML را برای عناوین متناظر با متن مورد نظر، جستجو می‌کند و نتیجه را برمی‌گرداند:

 1 <?php
 2 $xmlDoc=new DOMDocument();
 3 $xmlDoc->load("links.xml");
 4 
 5 $x=$xmlDoc->getElementsByTagName('link');
 6 
 7 //get the q parameter from URL
 8 $q=$_GET["q"];
 9 
10 //lookup all links from the xml file if length of q>0
11 if (strlen($q)>0) {
12   $hint="";
13   for($i=0; $i<($x->length); $i++) {
14     $y=$x->item($i)->getElementsByTagName('title');
15     $z=$x->item($i)->getElementsByTagName('url');
16     if ($y->item(0)->nodeType==1) {
17       //find a link matching the search text
18       if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q)) {
19         if ($hint=="") {
20           $hint="<a href='" .
21           $z->item(0)->childNodes->item(0)->nodeValue .
22           "' target='_blank'>" .
23           $y->item(0)->childNodes->item(0)->nodeValue . "</a>";
24         } else {
25           $hint=$hint . "<br /><a href='" .
26           $z->item(0)->childNodes->item(0)->nodeValue .
27           "' target='_blank'>" .
28           $y->item(0)->childNodes->item(0)->nodeValue . "</a>";
29         }
30       }
31     }
32   }
33 }
34 
35 // Set output to "no suggestion" if no hint was found
36 // or to the correct values
37 if ($hint=="") {
38   $response="no suggestion";
39 } else {
40   $response=$hint;
41 }
42 
43 //output the response
44 echo $response;
45 ?>

اگر متنی که از سوی جاوا اسکریپت ارسال می‌شود خالی نباشد (strlen($q) > 0)، مراحل زیر اتفاق می‌افتد:

  • یک فایل XML درون یک شی جدید XML DOM بارگذاری می‌شود
  • بین تمامی عناصر <title> پیمایش می‌کند تا مقدار متناظر با متنی که از سوی جاوااسکریپت ارسال شده‌است را بیابد
  • url و عنوان صحیح را درون متغیر "$response" قرار می‌دهد. اگر بیش از یک مورد پیدا شود، تمامی نتایج به متغیر اضافه می‌شود
  • اگر هیچ نتیجه ای یافت نشود، مقدار "no suggestion" درون متغیر "$response" ریخته می‌شود


منابع آموزشی