PHP Voorbeeld - AJAX Live Search
AJAX kan gebruik word om meer gebruikersvriendelike en interaktiewe soektogte te skep.
AJAX Live Search
Die volgende voorbeeld sal 'n regstreekse soektog demonstreer, waar jy soekresultate kry terwyl jy tik.
Regstreekse soektog het baie voordele in vergelyking met tradisionele soektogte:
- Resultate word gewys terwyl jy tik
- Resultate vernou soos jy aanhou tik
- As resultate te nou raak, verwyder karakters om 'n breër resultaat te sien
Soek vir 'n W3Schools-bladsy in die invoerveld hieronder:
Die resultate in die voorbeeld hierbo word gevind in 'n XML-lêer ( links.xml ). Om hierdie voorbeeld klein en eenvoudig te maak, is slegs ses resultate beskikbaar.
Voorbeeld verduidelik - Die HTML-bladsy
Wanneer 'n gebruiker 'n karakter in die invoerveld hierbo tik, word die funksie "showResult()" uitgevoer. Die funksie word geaktiveer deur die "onkeyup" gebeurtenis:
<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>
Bronkode verduideliking:
As die invoerveld leeg is (str.length==0), maak die funksie die inhoud van die lewendige soekplekhouer skoon en verlaat die funksie.
As die invoerveld nie leeg is nie, voer die showResult() funksie die volgende uit:
- Skep 'n XMLHttpRequest-objek
- Skep die funksie wat uitgevoer moet word wanneer die bedienerantwoord gereed is
- Stuur die versoek na 'n lêer op die bediener
- Let daarop dat 'n parameter (q) by die URL gevoeg word (met die inhoud van die invoerveld)
Die PHP-lêer
Die bladsy op die bediener wat deur die JavaScript hierbo genoem word, is 'n PHP-lêer genaamd "livesearch.php".
Die bronkode in "livesearch.php" soek 'n XML-lêer vir titels wat by die soekstring pas en gee die resultaat:
<?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;
?>
As daar enige teks vanaf die JavaScript gestuur is (strlen($q) > 0), gebeur die volgende:
- Laai 'n XML-lêer in 'n nuwe XML DOM-voorwerp
- Loop deur alle <title>-elemente om passings te vind uit die teks wat vanaf die JavaScript gestuur is
- Stel die korrekte url en titel in die "$response" veranderlike. As meer as een passing gevind word, word alle passings by die veranderlike gevoeg
- As geen passings gevind word nie, is die $respons veranderlike gestel op "geen voorstel"