Ajax sayfayı yenilemeden yerel dosyadan veya uzak sunucudan veri çekmemize olanak tanır. Javascript kütüphanesi olan ajax interaktif sayfalar oluşturmamızda yardımcı olur. XMLHttpRequest nesnesi oluşturularak bir php dosyaya POST veya GET ile veri gönderebilir cevabı alabiliriz. Cevap genelde işlenmesi kolay olduğu için bütün programlama dilleri arasında, yapılandırılmış veri değişimini kolaylaştıran bir metin biçimi olan JSON formatında alınır.Yani cevap Object veya Array olarak alınır.
Jquery kütüphanesinin kendi ajax sınıfı da var fakat ben ondan bahsetyemeceğim. Javascriptin XMLHttpRequest sınıfını kullanarak bir örnekte anlatmaya çalışacağım. Aşağıdaki örnekte, girilen ismin ilk harflerini kullanarak isim önerisinde bulunan bir javascript kodu var. Bir php dosyasına bir metin gönderiliyor. php nin cevabı jsondan arraye aktarılıyor ve arraydeki tüm elemanlar listeleniyor.
<html>
<head>
<script>
function ipucuGoster(par) {
if (par.length == 0) { //parametre boşsa
document.getElementById("onerilist").innerHTML = ""; //öneri listesini boş bırak
return;
} else { //değilse
var xmlhttp = new XMLHttpRequest(); //yeni ajax oluştur
xmlhttp.onreadystatechange = function() { //ajax durum değiştiğinde şu fonksiyonu yerine getir
if (this.readyState == 4 && this.status == 200) { //ajaxın cevabı 200 OK ise
var alinanveri=JSON.parse(this.responseText); // cevabı json formatından arraya çevir
for(i=0;d<alinanveri.length;i++){ //çevrilen array boyunca dön
var dugum = document.createElement("LI"); // li tagı oluştur
var textdugum = document.createTextNode(alinanveri[i].isim); //alınan veriden metin dugumu oluştur
dugum.appendChild(textdugum); // li tagına metin dugumunu ekle
document.getElementById("onerilist").appendChild(dugum); //li tagını oneri listesine ekle
}
}
};
xmlhttp.open("GET", "getipucu.php?ara=" + par, true); //Get kullanarak php dosyasına veri gönderimini hazırla
xmlhttp.send(); //veriyi gönder
}
}
</script>
</head>
<body>
İsim Giriniz: <input type="text" onkeyup="ipucuGoster(this.value)">
Öneriler:
<ul id="onerilist"></ul>
</body>
</html>
Peki iletişim kurduğumuz getipucu.php php dosyasının içeriği nasıl olabilir. Aşağıda öntanımlı dizide, yukarda getle gönderdiğimiz değeri arama yapıyoruz ve uyan sonuçları json formatında cevap olarak veriyoruz.
<?php
// İsim Dizisi
$l[] = "Ayşe";
$l[] = "Burcu";
$l[] = "Cemal";
$l[] = "Mehmet";
$l[] = "Elif";
$l[] = "Fatih";
$l[] = "Gamze";
$l[] = "Lale";
$l[] = "Oğuz";
$l[] = "Ömer";
$aranan = $_REQUEST["ara"]; //Javascript ile gönderdiğimiz veriyi alıyoruz
$ipucu = array();
if ($aranan !== "") {
$aranan = strtolower($aranan);
$len=strlen($aranan); //aranan uzunluğunu al
foreach($l as $onerilecekisim) { //önceden tanımlı isim listesi elemanlarını dön
if (stristr($aranan, substr($onerilecekisim, 0, $len))) { //aranan önerilecek ismin ilk harfleriyle aynıysa
$ipucu[]=array("isim"=>$onerilecekisim); //jsye geri döndürülecek diziye ekle
}
}
}
echo json_encode($ipucu); //diziyi json formatında yaz
?>