Yazılım,

Ajax la Php dosyasından Json Veri Çekme İşleme

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
?>
JavaScript Php
Süpriz hediyeler için yorum yapın soru sorun!