ويمكن استخدام AJAX لخلق المزيد من عمليات التفتيش سهلة الاستخدام والتفاعلية.
AJAX البحث لايف
والمثال التالي يبرهن على وجود البحث المباشر، حيث يمكنك الحصول على نتائج البحث أثناء الكتابة.
البحث الحية له فوائد عديدة بالمقارنة مع البحث التقليدية:
- وأظهرت النتائج أثناء الكتابة
- تضييق النتائج كما كنت مواصلة الكتابة
- إذا أصبحت النتائج ضيقة جدا، وإزالة الأحرف لرؤية نتيجة أوسع
بحث عن صفحة w3ii في حقل الإدخال أدناه:
النتائج في المثال تم العثور على أعلاه في ملف XML ( links.xml ) . لجعل هذا المثال صغيرة وبسيطة، تتوفر نتائج ستة فقط.
وأوضح مثال - وHTML الصفحة
عندما يكتب المستخدم حرف في حقل الإدخال أعلاه، فإن وظيفة " showResult() " يتم تنفيذه. يتم تشغيل وظيفة من قبل "onkeyup" الحدث:
<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 (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("livesearch").innerHTML=xmlhttp.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) وظيفة مسح محتويات العنصر النائب livesearch ومخارج وظيفة.
إذا كان حقل الإدخال ليس فارغا، و showResult() وظيفة ينفذ ما يلي:
- إنشاء كائن مدعوم
- إنشاء وظيفة ليتم تنفيذها عندما استجابة الملقم جاهزة
- إرسال طلب الخروج إلى ملف على الخادم
- لاحظ أن معلمة (q) يضاف إلى URL (مع محتوى حقل الإدخال)
وPHP الملف
صفحة على الخادم الذي دعا إليه جافا سكريبت أعلاه هو ملف PHP ودعا "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;
?>
إذا كان هناك أي نص المرسلة من جافا سكريبت ( strlen($q) > 0)، يحدث ما يلي:
- تحميل ملف XML إلى كائن DOM XML جديد
- حلقة عبر كافة عناصر <title> العثور على المباريات من النص المرسلة من جافا سكريبت
- يضع رابط الصحيح والعنوان في "$response" متغير. إذا تم العثور على أكثر من مباراة واحدة، تتم إضافة جميع المباريات لمتغير
- إذا لم يتم العثور على المباريات، يتم تعيين متغير استجابة $ ل "no suggestion"