PHP ve AJAX Canlı Arama

AJAX sunuculara daha kullanıcı dostu ve etkileşimli bir arama deneyimi sunabilir.

AJAX Live Search

Aşağıdaki AJAX örneğinde, gerçek zamanlı bir arama göstereceğiz.

Gerçek zamanlı arama, geleneksel arama ile karşılaştırıldığında birçok avantaja sahiptir:

  • Verileri yazarken, eşleşen sonuçlar gösterilir
  • Verileri yazarken sonuçları filtreler
  • Sonuçlar azsa, karakterleri silerek daha geniş bir arama aralığı elde edebilirsiniz

Aşağıdaki metin kutusunda CodeW3C.com sayfalarını arayın

Bu örnek dört unsurdan oluşur:

  • Basit bir HTML formu
  • JavaScript
  • PHP sayfası
  • XML belgesi

Bu örnekte, sonuçlar bir XML belgesi (links.xml) içinde arama yapılır. Bu örneği küçük ve basit tutmak için sadece 8 sonuç sunuyoruz.

HTML Formu

Bu HTML sayfasıdır. Bu sayfa, basit bir HTML formu, bu form için CSS stilleri ve JavaScript'e yönlendirme içermektedir:

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

Örnek Açıklama - HTML Formu

Gördüğünüz gibi, HTML sayfası, "txt1" adlı bir metin kutusuna sahip basit bir HTML formu içerir.

Form böyle çalışır:

  1. Kullanıcı metin kutusunda bir tuşa basıp tuşu bıraktığında bir olay tetiklenir
  2. Bir olay tetiklandığında, adı showResult() olan fonksiyon çalıştırılır
  3. Formun altında adı "livesearch" olan <div> öğesi bulunur. Bu, showResult() tarafından döndürülen verilerin yer tutucusu olarak kullanılır

JavaScript

JavaScript kodu, HTML belgesi ile bağlantılı "livesearch.js" dosyasında saklanır:

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("Tarayıcı HTTP istemini desteklemiyor");
 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;
}

Örnek Açıklama:

GetXmlHttpObject ile PHP ve AJAX İstekleri küçük bir örnek içerir.

showResult() fonksiyonu

Bu fonksiyon her bir karakter girdiğinde bir kez çalışır.

Metin alanında girdi yoksa (str.length == 0), fonksiyon geri dönen alanı boş olarak ayarlar ve etrafındaki herhangi bir çerçeveyi siler.

Ancak, metin alanında girdi varsa, fonksiyon şu şekilde çalışır:

  1. Sunucuya gönderilecek url'yi (dosya adı) tanımlayın
  2. Giriş kutusunun içeriğini içeren parametreyi (q) url'ye ekleyin
  3. Sunucunun önbellek dosyasını kullanmasını önlemek için bir rasgele sayı ekleyin
  4. GetXmlHttpObject fonksiyonunu çağırarak XMLHTTP nesnesi oluşturun ve bir değişiklik tetiklandığında bu fonksiyonun stateChanged adlı bir fonksiyonu çalıştırılmasını bildirin
  5. Verilen URL ile XMLHTTP nesnesini aç
  6. Sunucuya HTTP isteği gönder

stateChanged() fonksiyonu

XMLHTTP nesnesinin durumu değiştiğinde bu fonksiyon çalışır.

Durum 4'e (veya "complete") ulaşınca, yanıt metni txtHint yer tutucusunun içeriğini doldurur ve döndürme alanı etrafında bir çerçeve ayarlanır.

PHP sayfası

JavaScript kodu tarafından çağrılan sunucu sayfası, "livesearch.php" adlı PHP dosyasıdır.

"livesearch.php" dosyasındaki kod, "links.xml" adlı XML belgesini kontrol eder. Bu belge, codew3c.com üzerindeki bazı sayfaların başlıkları ve URL'lerini içerir.

Bu kodlar, XML dosyasında arama dizgisine uyan başlıkları arar ve HTML ile sonuçları 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>";
    }
   }
  }
 }
}
// Eşleşme bulunmadıysa çıktıyı "no suggestion" olarak ayarla
// veya doğru değerlere
if ($hint == "")
 {
 $response="no suggestion";
 }
else
 {
 $response=$hint;
 }
// Çıktıyı yazdır
echo $response;
?>

Örnek Açıklama:

JavaScript'ten herhangi bir metin (strlen($q) > 0) geldiğinde şu olacaktır:

  1. PHP'nin "links.xml" dosyasını oluşturmak için bir XML DOM nesnesi
  2. Bütün "title" öğeleri (nodetypes = 1) taranır, JavaScript tarafından iletilen verinin adını bulmak için
  3. Doğru title içeren bir link bulunup "$response" değişkenine ayarlanır. Birden fazla eşleşme bulunursa, tüm eşleşmeler değişkene eklenir
  4. Eşleşme bulunmadıysa, $response değişkeni "no suggestion" olarak ayarlanır
  5. $result "livesearch" yer tutucusuna gönderilen çıktıdır