مثال PHP - بحث AJAX المباشر
يمكن استخدام AJAX لإنشاء عمليات بحث أكثر سهولة في الاستخدام وتفاعلية.
بحث أجاكس لايف
سيوضح المثال التالي بحثًا مباشرًا ، حيث تحصل على نتائج البحث أثناء الكتابة.
البحث المباشر له فوائد عديدة مقارنة بالبحث التقليدي:
- تظهر النتائج أثناء الكتابة
- النتائج ضيقة مع استمرار الكتابة
- إذا أصبحت النتائج ضيقة جدًا ، فقم بإزالة الأحرف لرؤية نتيجة أوسع
ابحث عن صفحة W3Schools في حقل الإدخال أدناه:
تم العثور على النتائج في المثال أعلاه في ملف 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;
}
var xmlhttp=new XMLHttpRequest();
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) ، تقوم الوظيفة بمسح محتوى العنصر النائب lifearch وإنهاء الوظيفة.
إذا لم يكن حقل الإدخال فارغًا ، تقوم الوظيفة showResult () بتنفيذ ما يلي:
- قم بإنشاء كائن XMLHttpRequest
- قم بإنشاء الوظيفة التي سيتم تنفيذها عندما تكون استجابة الخادم جاهزة
- أرسل الطلب إلى ملف موجود على الخادم
- لاحظ أنه تمت إضافة المعلمة (q) إلى عنوان URL (مع محتوى حقل الإدخال)
ملف PHP
الصفحة الموجودة على الخادم التي تم استدعاؤها بواسطة JavaScript أعلاه هي ملف PHP يسمى "lifearch.php".
يبحث الكود المصدري في "lifearch.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;
?>
إذا تم إرسال أي نص من JavaScript (strlen ($ q)> 0) ، فسيحدث ما يلي:
- قم بتحميل ملف XML في كائن XML DOM جديد
- قم بإجراء تكرار عبر جميع عناصر <title> للعثور على مطابقات من النص المرسل من JavaScript
- يضبط عنوان url والعنوان الصحيحين في المتغير "$ response". إذا تم العثور على أكثر من تطابق ، تتم إضافة جميع التطابقات إلى المتغير
- إذا لم يتم العثور على مطابقات ، يتم تعيين متغير الاستجابة $ على "لا يوجد اقتراح"