Reklama 400x60
Kuriame PHP ir AJAX paiešką.
Įžanga:
Šiame straipsnyje mes susikursime paprastą paiešką, naudodami PHP ir AJAX. Rezultate gausime paiešką , kuri ims duomenis iš serverio, pagal vartotojo užklausą. Kadangi straipsnis gautūsi labai ilgas, bei dauguma jo nesuprastų, parašysiu tik pavyzdinius kodus. Straipsnis ne naujokams. Pavyzdiniai kodai yra išimti iš interneto platybių ir paredaguoti pagal straipsnio vertėją (t.y. mXt). Kas turi košės galvoje, tas straipsnio esmę supras. Sėkmės ;]
HTML Forma:
<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>
Kad ši forma veiktų, mums reikia failo livesearch.js. Štai:
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;
}
Viską grūdam į serverį.
PHP kodas:
<?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 were found
// or to the correct values
if ($hint == "")
{
$response="no suggestion";
}
else
{
$response=$hint;
}
//output the response
echo $response;
?>
Kad šis kodas veiktų, turime sukurti links.xml failą, kuriame būtų surašyti paieškos kriterijai.
<pages><link>
<title>Pirma nuoroda</title>
<url>nuoroda</url>
</link>
<link>
<title>antra nuoroda</title>
<url>
antra nuoroda
</url>
</link>
// ir taip toliau
</pages>
Štai ir viskas. Turite savo svetainėje Livesearch paiešką. Tikiuosi, kad ši pamoka (labai ilgai sėdėjusi pas mane įrašyta į CD) jums duos naudos.
Vertimas: @mXt
| Straipsnio informacija
AutoriusmXt
Parašymo data2008 gegužės 23 18:05:54
Komentarų3
Skaityta2173 Spausdinti |
Komentarai
Rašyti komentarą
Prisijunkite, norėdami parašyti komentarą.
Reitingai
Balsuoti gali tik nariai.
Prašome prisijungti arba prisiregistruoti.
Nėra reitingų.