PHP Örneği - AJAX Canlı Arama
AJAX, daha kullanıcı dostu ve etkileşimli aramalar oluşturmak için kullanılabilir.
AJAX Canlı Arama
Aşağıdaki örnek, siz yazarken arama sonuçlarını aldığınız canlı bir aramayı gösterecektir.
Canlı arama, geleneksel aramaya kıyasla birçok avantaja sahiptir:
- Sonuçlar siz yazarken gösterilir
- Yazmaya devam ettikçe sonuçlar daralır
- Sonuçlar çok dar olursa, daha geniş bir sonuç görmek için karakterleri kaldırın
Aşağıdaki giriş alanında bir W3Schools sayfası arayın:
Yukarıdaki örnekteki sonuçlar bir XML dosyasında ( links.xml ) bulunur. Bu örneği küçük ve basit hale getirmek için yalnızca altı sonuç mevcuttur.
Örnek Açıklama - HTML Sayfası
Bir kullanıcı yukarıdaki giriş alanına bir karakter yazdığında, "showResult()" işlevi yürütülür. İşlev, "onkeyup" olayı tarafından tetiklenir:
<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>
Kaynak kodu açıklaması:
Giriş alanı boşsa (str.length==0), işlev, canlı arama yer tutucusunun içeriğini temizler ve işlevden çıkar.
Giriş alanı boş değilse, showResult() işlevi aşağıdakileri yürütür:
- Bir XMLHttpRequest nesnesi oluşturun
- Sunucu yanıtı hazır olduğunda yürütülecek işlevi oluşturun
- İsteği sunucudaki bir dosyaya gönderin
- URL'ye bir parametrenin (q) eklendiğine dikkat edin (giriş alanının içeriğiyle birlikte)
PHP Dosyası
Yukarıdaki JavaScript tarafından çağrılan sunucudaki sayfa, "livesearch.php" adlı bir PHP dosyasıdır.
"livesearch.php" içindeki kaynak kod, arama dizesiyle eşleşen başlıklar için bir XML dosyası arar ve sonucu döndürür:
<?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;
?>
JavaScript'ten gönderilen herhangi bir metin varsa (strlen($q) > 0) aşağıdakiler olur:
- Yeni bir XML DOM nesnesine bir XML dosyası yükleyin
- JavaScript'ten gönderilen metindeki eşleşmeleri bulmak için tüm <title> öğeleri arasında dolaşın
- "$response" değişkeninde doğru URL'yi ve başlığı ayarlar. Birden fazla eşleşme bulunursa, tüm eşleşmeler değişkene eklenir.
- Hiçbir eşleşme bulunamazsa, $yanıt değişkeni "öneri yok" olarak ayarlanır