AJAX می تواند برای ایجاد جستجوی کاربر پسند و تعاملی استفاده شود.
جستجوی زنده با ایجکس
مثال زیر یک جستجوی زنده را نشان می دهد، یعنی اینکه همزمان با تایپ عبارت در جعبه متن، نتایج جستجو را دریافت می کنید.
جستجوی زنده دارای مزایای بسیاری در مقایسه با جستجوی سنتی است:
- نتایج همزمان با تایپ نشان داده می شوند
- می توانید هر وقت نتایج قابل قبولی بدست آمد تایپ را خاتمه دهید
- اگر نتایج خیلی ضعیف شود، قسمت هایی را حذف می کنید تا نتایج بیشتری را ببینید
مثال زیر را می توانید برای اجرای جستجوی زنده با ایجکس استفاده کنید:
طراحی قسمت HTML
برای طراحی فرم جستجو و کد جاوااسکریپت برای اجرای ایجکس از کد زیر استفاده کنید:
<html>
<head>
<script>
function showResult(str) {
if (str.length==0) {
document.getElementById("livesearch").innerHTML="";
document.getElementById("livesearch").style.border="0px";
return;
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (this.readyState==4 && this.status==200) {
document.getElementById("livesearch").innerHTML=this.responseText;
document.getElementById("livesearch").style.border="1px solid #A5ACB2";
}
}
xmlhttp.open("GET","livesearch.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
<input type="text" size="30" onkeyup="showResult(this.value)">
<div id="livesearch"></div>
</form>
</body>
</html>
توضیحات منبع فوق:
اگر فیلد ورودی خالی است (str.length == 0)، تابع محتوای placeholder را پاک می کند و از تابع خارج می شود.
اگر فیلد ورودی خالی نیست، تابع showResult() موارد زیر را اجرا می کند:
- یک شیء XMLHttpRequest ایجاد می کند.
- تابعی ایجاد می کند که پس از آماده شده پاسخ سرور اجرا شود.
- درخواست را ایجاد کرده و به سرور ارسال می کند.
کدنویسی فایل پی اچ پی
صفحه گی اچ پی در سرور که توسط کد جاوااسکریپت قبلی درخواست می شود یک فایل پی اچ پی با نام “livesearch.php” است.
کد منبع در “livesearch.php” یک فایل XML برای عناوین مطابق با رشته جستجو را جستجو می کند و نتیجه را برمی گرداند:
<?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 was found
// or to the correct values
if ($hint=="") {
$response="no suggestion";
} else {
$response=$hint;
}
//output the response
echo $response;
?>
اگر متنی از طرف جاوااسکریپت فرستاده شده بود (طول متن از صفر بیشتر بود) کارهای زیر انجام می شود:
- بارگذاری یک فایل XML به یک شیء DOM
- اجرای یک حلقه تکرار و بررسی همه عناصر <title> برای پیداکرده متن فرستاده شده از طرف جاوااسکریپت
- تنظیم یک url مناسب و title در متغیر Rresponse . اگر بیشتر از یک نتیجه پیدا شده بود، هم نتایج به متغیر اضافه می شوند.
- اگر متن مورد جستجو پیدا نشد، متغیر $response با عبارت “no suggestion” مقداردهی می شود.