Ajax Programlamaya Giriş
Bu bölümde öncelikle JavaScript kullanarak ajax nesnesinin yaratılması üzerinde duracak daha sonra da bu nesne ile PHP uygulamaları üzerinden bilgi alışverişi yapacağız. Dönen cevapların HTML bileşenlerinde gösterilmesinde ise JavaScript ve DOM modelinden faydalanacağız.
Ajax Nesnesinin Yaratılması
Ajax’in temel çalışma prensibi, sunucuda bulunan PHP program parçalarına JavaScript’in XMLHTTPRequest nesnesini kullanarak parametre gönderip çalıştırmaktır. Bu olayın hemen ardından parametrelere göre çalışan program parçası kendisini çağıran ajax nesnesine değer gönderir.
JavaScript’te kullanılan ajax nesnesinin yaratılması tarayıcılar arasında farklılık gösterir. Örneğin, Internet Explorer 5.5 ve üzeri sürümlerinde Microsoft.XMLHTTP ActiveX nesnesi, firefox ve opera gibi diğer tarayıcılarda ise XMLHTTPRequest nesnesi kullanılır.
Tarayıcılar için uygun nesnenin yaratılması açısından JavaScript ile bazı kontroller yapılması gerekir, örneklerle inceleyelim.
function ajaxnesneyarat()
{
var httpNesne = null;
var tarayici = navigator.appName;
if (tarayici == “Microsoft Internet Explorer”)
{
httpNesne = new AxtiveXObject(“Microsoft.XMLHTTP”);
}
else
{
httpNesne = new XMLHTTPRequrest();
}
return httpNesne;
}
Burada navigator nesnesinin appName özelliğini kullanarak kullanıcının tarayıcı bilgisini alıyor ve işlemleri devam ettiriyoruz.
Ajax Nesnesi ile Sunucunun Haberleşmesi
Ajax nesnesi yaratıldıktan sonra artık PHP program parçalarına GET ve POST metotları kullanılarak parametre gönderilebilir. Bu parametre gönderme işleminde ise ajax nesnesinin metot ve özelliklerinden faydalanılır. Temelde ajax nesnesinin open() ve send() olmak üzere iki tane metodu vardır.
open() metodu 3 parametre alabilir. Bunlardan ilki, form metodunu, ikincisi işlem yapılacak php dosyasını, üçüncüsü ise haberleşmenin asenkron ya da senkron şeklinde olacağını belirler.
send() metodu ise tek parametreye sahiptir. Bu parametre, GET metodu ile kullanıldığında null, POST metodu ile kullanıldığında ise anahtar-değer ikililerini alır.
Ajax uygulamalarındaki en önemli nesne olayı ise onreadystatechange ‘dir. Bu olay, sunucuyla veri alışverişi yapıldığında meydana gelir ve bir JavaScript fonksiyonunu tetikler. Tetiklenen fonksiyonda, öncelikle nesnenin readyState özelliğinin “4” değerini alıp almadığı kontrol edilir.
|
readyState Değeri
|
Anlamı
|
|
0
|
Veri alışverişi henüz başlamadı.
|
|
1
|
Veri gönderiliyor.
|
|
2
|
Veri gönderildi.
|
|
3
|
Veri alışverişi devam ediyor.
|
|
4
|
Veri alışverişi tamamlandı.
|
Kontrol edilen readyState değerinden sonra ajax nesnesinin status özelliğine bakılır. Bu özellik “200” değerini aldığında işlem sorunsuz olarak gerçekleşmiş demektir. Aksi halde sorunlar oluşmuş olabilir. Örneğin php dosyası bulunamazsa bu değer 404 olacaktır.
Tüm aşamaları sorunsuz olarak tamamladıktan sonra verileri işlemek için responseText özelliğini kullanabiliriz. Sunucudan dönen cevaplar XML şeklinde de olabilir. Bu durumda responseXML özelliği kullanılır.
Ajax Nesnesi ile GET Metodu Kullanımı
Örnek üzerinde ilerleyelim.
<html>
<head>
<script>
var ajaxNesne;
function ajaxnesneyarat()
{
var httpNesne = null;
var tarayici = navigator.appName;
if (tarayici == “Microsoft Internet Explorer”)
{
httpNesne = new AxtiveXObject(“Microsoft.XMLHTTP”);
}
else
{
httpNesne = new XMLHTTPRequrest();
}
return httpNesne;
}
function ajaxtest()
{
ajaxNesne = ajaxnesneyarat();
if (ajaxNesne != null)
{
dosyaAdi = ‘ornek.php?adi=Zeki&soyadi=AYAN’;
ajaxNesne.onreadystatechange = ajaxsonucisle;
ajaxNesne.open(‘GET’, dosyaAdi, true);
ajaxNesne.send(null);
}
else
{
alert(‘Ajax nesnesi yaratılamıyor.’);
}
}
function ajaxsonucisle()
{
İf (ajaxNesne.status == 4)
{
İf (ajaxNesne.readyState == 200)
{
var mesaj = ajaxNesne.responseText;
document.getElementById(‘msg’) .innerHTML = mesaj;
}
else
{
document.getElementById(‘msg’).innerHTML = ‘Hata!’;
}
}
else
{
document.getElementById(‘msg’).innerHTML = ‘İşleme devam ediliyor…’;
}
}
</script>
</head>
<body>
<form name=”form1”>
<input type=”buton” id=”btn1” value=”Ajax Test” onclick=”ajaxtest()”>
<p id=”msg”></p>
</form>
</body>
</html>
PHP Kodu:
<?php
İf (isset($_GET[‘adi’]) && isset($_GET[‘soyadi’]))
{
echo $_GET[‘adi’] . ‘ ‘ . $_GET[‘soyadi’];
}
else
echo ‘Hata!’;
?>
Ajax Nesnesi ile POST Metodu Kullanımı
Yukarıdaki örneğin 2 kısmında yapacağımız küçük değişiklikler ile Ajax’te POST metodunu kullanabiliriz.
ajaxNesne.open(‘POST’, ‘ornek.php’, true);
header= “application/x-www-encoded”;
ajaxNesne.setRequestHeader(“Content-Type”, header);
ajaxNesne.send(‘adi=Zeki&soyadi=AYAN’);
PHP Kodu:
PHP kodunda ise sadece $_GET olan kısımları $_POST ile değiştirmeniz yeterli olacaktır.
<?php
İf (isset($_POST[‘adi’]) && isset($_POST [‘soyadi’]))
{
echo $_ POST [‘adi’] . ‘ ‘ . $_ POST [‘soyadi’];
}
else
echo ‘Hata!’;
?>
