AJAX daha kullanıcı dostu ve interaktif aramaları oluşturmak için kullanılabilir.
AJAX Canlı Arama
için yazarken arama sonuçlarını nereden Aşağıdaki örnek, canlı arama gösterecektir.
Canlı arama geleneksel arama kıyasla birçok avantajı vardır:
- Yazarken Sonuçları gösterilmektedir
- Yazmaya devam ettikçe Sonuçları daraltmak
- Sonuçlar çok dar hale, daha geniş bir sonucunu görmek için karakterleri kaldırmak
Aşağıdaki giriş alanına bir w3ii sayfanın arama:
Örnekteki sonuçlar yukarıdaki XML dosyası bulunur ( links.xml ) . Bu örnek, küçük ve basit hale getirmek için, sadece altı sonuç mevcuttur.
Örnek Açıklaması - HTML sayfası
Bir kullanıcı yukarıdaki giriş alanında bir karakter, fonksiyon zaman " showResult() " yürütülür. Fonksiyon tarafından tetiklenir "onkeyup" olay:
<html>
<head>
<script>
function showResult(str)
{
if (str.length==0) {
document.getElementById("livesearch").innerHTML="";
document.getElementById("livesearch").style.border="0px";
return;
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("livesearch").innerHTML=xmlhttp.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 kod açıklama:
Giriş alanı boş ise (str.length==0) , fonksiyon LiveSearch tutucu içeriğini siler ve işlevi çıkar.
Giriş alanı boş değilse, showResult() fonksiyonu aşağıdaki yürütür:
- XMLHttpRequest nesnesi oluştur
- sunucu yanıtı hazır olduğunda yürütülecek işlevi oluşturma
- sunucuda bir dosyaya istek dışı gönder
- Bir parametre dikkat edin (q) (giriş alanının içeriği) URL ilave edilir
PHP Dosya
JavaScript tarafından çağrılan sunucu üzerinde sayfa adında bir PHP dosyasıdır "livesearch.php" .
Kaynak kodu "livesearch.php" arama dizesini 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;
?>
Varsa JavaScript gönderilen herhangi bir metin ( strlen($q) > 0), aşağıdaki işlemler gerçekleştirilir:
- Yeni bir XML DOM nesnesine bir XML dosyası yükle
- Tüm <title> elemanlar aracılığıyla Döngü JavaScript gönderilen metinden eşleşmeleri bulmak için
- Doğru url ve başlık ayarlar "$response" değişkeni. Birden fazla eşleşme bulunursa, tüm maçları değişkeni eklenir
- Herhangi bir eşleşme bulunursa, $ yanıt değişkeni olarak ayarlanır "no suggestion"