PHP उदाहरण - AJAX लाइव खोज
AJAX का उपयोग अधिक उपयोगकर्ता के अनुकूल और इंटरैक्टिव खोज बनाने के लिए किया जा सकता है।
AJAX लाइव खोज
निम्नलिखित उदाहरण एक लाइव खोज प्रदर्शित करेगा, जहां टाइप करते समय आपको खोज परिणाम मिलते हैं।
पारंपरिक खोज की तुलना में लाइव खोज के कई लाभ हैं:
- जैसे ही आप टाइप करते हैं परिणाम दिखाए जाते हैं
- जैसे-जैसे आप लिखना जारी रखते हैं, परिणाम संकीर्ण होते जाते हैं
- यदि परिणाम बहुत संकीर्ण हो जाते हैं, तो व्यापक परिणाम देखने के लिए वर्ण हटा दें
नीचे दिए गए इनपुट क्षेत्र में W3Schools पृष्ठ खोजें:
ऊपर दिए गए उदाहरण में परिणाम एक XML फ़ाइल ( links.xml ) में पाए जाते हैं। इस उदाहरण को छोटा और सरल बनाने के लिए, केवल छह परिणाम उपलब्ध हैं।
उदाहरण समझाया - HTML पृष्ठ
जब कोई उपयोगकर्ता उपरोक्त इनपुट फ़ील्ड में एक वर्ण टाइप करता है, तो फ़ंक्शन "showResult ()" निष्पादित होता है। फ़ंक्शन "ऑनकीप" ईवेंट द्वारा ट्रिगर किया गया है:
<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), तो फ़ंक्शन लाइवसर्च प्लेसहोल्डर की सामग्री को साफ़ करता है और फ़ंक्शन से बाहर निकलता है।
यदि इनपुट फ़ील्ड खाली नहीं है, तो showResult () फ़ंक्शन निम्नलिखित को निष्पादित करता है:
- XMLHttpRequest ऑब्जेक्ट बनाएं
- सर्वर प्रतिक्रिया तैयार होने पर निष्पादित होने के लिए फ़ंक्शन बनाएं
- सर्वर पर एक फ़ाइल के लिए अनुरोध भेजें
- ध्यान दें कि URL में एक पैरामीटर (q) जोड़ा जाता है (इनपुट फ़ील्ड की सामग्री के साथ)
पीएचपी फ़ाइल
सर्वर पर उपरोक्त जावास्क्रिप्ट द्वारा बुलाया गया पृष्ठ एक 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 फ़ाइल को नए XML DOM ऑब्जेक्ट में लोड करें
- जावास्क्रिप्ट से भेजे गए पाठ से मिलान खोजने के लिए सभी <शीर्षक> तत्वों के माध्यम से लूप करें
- "$response" वेरिएबल में सही url और शीर्षक सेट करता है। यदि एक से अधिक मिलान मिलते हैं, तो सभी मिलान चर में जोड़ दिए जाते हैं
- यदि कोई मिलान नहीं मिलता है, तो $response चर "कोई सुझाव नहीं" पर सेट है