PHP और AJAX लाइव सर्च
- पिछला पृष्ठ AJAX responseXML
- अगला पृष्ठ AJAX RSS रीडर
AJAX परियोजना उपयोगकर्ताओं को अधिक अनुकूल और आपसी आदान-प्रदान के अनुभव प्रदान करती है।
AJAX Live Search
नीचे AJAX उदाहरण में हम एक समयान्तर खोज दिखाएंगे。
समयान्तर खोज (AJAX Live Search) की तुलना में कई लाभ हैं:
- जब अक्षर लिखे जाते है तो मेल खोजा जाता है
- जब डाटा लिखा जाता है तो परिणामों को फ़िल्टर किया जाता है
- यदि परिणाम बहुत कम हैं तो अक्षर हटाकर अधिक विस्तृत कोष बना सकते हैं
नीचे विन्यास में CodeW3C.com के पृष्ठों को खोजें
इस उदाहरण में चार तत्व हैं:
- सरल HTML फॉर्म
- JavaScript
- PHP पृष्ठ
- XML दस्तावेज़
इस उदाहरण में，परिणाम एक XML दस्तावेज़ में है (links.xml) में खोज की जाती है। इस उदाहरण को छोटा और सरल बनाने के लिए हम केवल 8 परिणाम प्रदान करते हैं।
HTML 表单
这是 HTML 页面。它包含一个简单的 HTML 表单，针对此表单的 CSS 样式，以及指向 JavaScript 的链接：
<html>
<head>
<script src="livesearch.js"></script>
<style type="text/css">
#livesearch
{
margin:0px;
width:194px;
}
#txt1
{
margin:0px;
}
</style>
</head>
<body>
<form>
<input type="text" id="txt1" size="30"
onkeyup="showResult(this.value)">
<div id="livesearch"></div>
</form>
</body>
</html>
例子解释 - HTML 表单
正如你看到的，HTML 页面包含一个简单的 HTML 表单，其中的文本框名为 "txt1"。
表单是这样工作的：
- 当用户在文本框中按键并松开按键时，会触发一个事件
- 当事件触发时，会执行名为 showResult() 的函数
- 表单下面是名为 "livesearch" 的 <div> 元素。它用作 showResult() 所返回数据的占位符
JavaScript
JavaScript 代码存储在与 HTML 文档连接的 "livesearch.js" 中：
var xmlHttp
function showResult(str)
{
if (str.length==0)
{
document.getElementById("livesearch").
innerHTML="";
document.getElementById("livesearch").
style.border="0px";
return
}
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="livesearch.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("livesearch").
innerHTML=xmlHttp.responseText;
document.getElementById("livesearch").
style.border="1px solid #A5ACB2";
}
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
उदाहरण व्याख्या:
GetXmlHttpObject और PHP और AJAX अनुरोध में के उदाहरण समान है
showResult() फ़ंक्शन
इस फ़ंक्शन यदि टेक्स्ट बॉक्स में एक अक्षर भी इनपुट किया जाता है तो एक बार चलता है
यदि टेक्स्ट फ़ील्ड में कोई इनपुट नहीं है (str.length == 0), तो फ़ंक्शन वापसी फ़ील्ड को खाली रखता है और चारों ओर किसी भी बॉर्डर को हटा देता है
हालांकि, यदि टेक्स्ट फ़ील्ड में इनपुट है, तो फ़ंक्शन निम्नलिखित कार्य करता है:
- सर्वर को भेजने वाली url (फ़ाइल नाम) को परिभाषित करें
- इनपुट बॉक्स के साथ विन्यास (q) को url में जोड़ें
- एक रेंडम संख्या जोड़ें, ताकि सर्वर को कैश फ़ाइल का उपयोग न करने दिया जाए
- GetXmlHttpObject फ़ंक्शन को आमंत्रित करने से XMLHTTP ऑब्जेक्ट बनाएं और एक परिवर्तन को ट्रिगर करने पर इस फ़ंक्शन को stateChanged नाम की फ़ंक्शन को अधिसूचित करें
- दिए गए URL का उपयोग करके XMLHTTP ऑब्जेक्ट खोलने के लिए
- सर्वर को HTTP अनुरोध भेजना
stateChanged() फ़ंक्शन
हर बार जब XMLHTTP ऑब्जेक्ट की स्थिति बदलती है तो इस फ़ंक्शन को चलाया जाता है。
जब स्थिति 4 (या "complete") हो जाती है तो इसके अनुसार रिस्पांस टेक्स्ट को टेक्स्टहिंट बदला जाता है और वापसी फील्ड के चारों ओर किनारा लगाया जाता है。
PHP पृष्ठ
जेसकर्स से बुलाया जाने वाला सर्वर पृष्ठ "livesearch.php" नामक PHP फ़ाइल है।
"livesearch.php" में कोड "links.xml" नामक XML डॉक्यूमेंट को जांचता है। यह डॉक्यूमेंट codew3c.com के कुछ पृष्ठों के शीर्षक और URL के लिए है।
ये कोड XML फ़ाइल में मिलने वाले खोज स्ट्रिंग से मेल खाते हुए शीर्षकों को खोजने के लिए है और इसे HTML में वापस करता है:
<?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 .
"' लिंक के लिए _blank टारगेट>" .
$y->item(0)->childNodes->item(0)->nodeValue . "</a>";
}
else
{
$hint=$hint . "<br /><a href='" .
$z->item(0)->childNodes->item(0)->nodeValue .
"' लिंक के लिए _blank टारगेट>" .
$y->item(0)->childNodes->item(0)->nodeValue . "</a>";
}
}
}
}
}
// अगर कोई सुझाव नहीं मिला, तो उत्पुट को "no suggestion" सेट करें
// या सही मानों को सेट करें
if ($hint == "")
{
$response="no suggestion";
}
else
{
$response=$hint;
}
// उत्तर उत्पुट को दिखाएं
echo $response;
?>
उदाहरण व्याख्या:
अगर JavaScript से कोई टेक्स्ट भेजा गया (strlen($q) > 0), तो होगा:
- PHP द्वारा "links.xml" फ़ाइल का एक एक्सएमएल डॉम ऑब्जैक्ट बनाने के लिए
- सभी "title" एलीमेंट (nodetypes = 1) पर घूमा जाएगा, ताकि JavaScript द्वारा भेजे गए डाटा के name को खोजा जा सके
- सही शीर्षक वाले link को खोजा जाएगा और "$response" वेरियेबल में सेट किया जाएगा।अगर एक से अधिक मेल मिला, सभी मेल वेरियेबल में जोड़े जाएंगे
- अगर मेल नहीं मिला, तो $response वेरियेबल को "no suggestion" सेट किया जाएगा
- $result लाइवसर्च प्लेसहोल्डर के लिए आउटपुट भेजा जाता है
- पिछला पृष्ठ AJAX responseXML
- अगला पृष्ठ AJAX RSS रीडर
