Kuriame PHP ir AJAX paiešką.
Parašė mXt 2008 gegužės 23 18:05:54
[color=red][b]Įžanga:[/b][/color]

Š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 ;]

[color=red][b]HTML Forma:[/b][/color]

[code]<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>[/code]

Kad ši forma veiktų, mums reikia failo [i]livesearch.js[/i]. Štai:

[code]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;
}[/code]

Viską grūdam į serverį.

[color=red][b]PHP kodas:[/b][/color]

[code]<?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;
?>[/code]

Kad šis kodas veiktų, turime sukurti [i]links.xml[/i] failą, kuriame būtų surašyti paieškos kriterijai.

[code] <pages><link>
<title>[b]Pirma nuoroda[/b]</title>
<url>[b]nuoroda[/b]</url>
</link>

<link>
<title>[b]antra nuoroda[/b]</title>

<url>
[b]antra nuoroda[/b]
</url>
</link>

// ir taip toliau
</pages>
[/code]

Š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.

[color=green][b]Vertimas: @mXt[/b][/color]