AJAX Nedir?

AJAX web yazılımı geliştirmesine yeni bir boyut katan bir gelişmedir. Bunun
için hemen hemen herkesin ilgisini çekmektedir. AJAX kullanılarak birçok
uygulama yapılmıştır. Bunların başında google tarafından geliştirilen gmail
gelmektedir. Uygulamanın getirdiği kullanışlılık birçok geliştiriciyi AJAX
kullanmaya itmiştir.

.... Fakat temelde genel olarak bir hata yapılmaktadır. PHP programcıları hemen
hazır kütüphaneleri kullanmaya yönelmişlerdir. Hali hazırda varolan
kütüphanelerin birçoğunun daha ilk aşamalarda olması, kararlı sürümlerinin
olmaması ve hatalar barındırması nedeniyle birçok programcı bu kütüphanleri
uygularken sıkıntı çekmiş ve başarılı olamamıştır. Bu durum genel olarak AJAX
konusunda bir güvensizliğe sebep olmuştur. Daha hazır olmadığı kanısına
varılmasına sebep olmuştur.

AJAX sunucuda çalışacak betiğin sayfa yenilenmeden javascriptle tetiklenmesinden
ibarettir.Yani aslında yeni olan araçlar değil araçların kullanma şeklidir. Bu
tetiklemeyi tarayıcı tarafında Javascript ile yapabiliyoruz.

Bu aşamada çok basit bir örnek vermek istiyorum. Şöyle bir uygulamamız olduğunu
düşünelim. Bir sayfada bir haber detayını verdiğimizi düşünelim. Sayfanın
solunda haber ile ilgili resimlerin küçük halleri (thumbnail) sağında ise haber
metni olsun. Kabaca aşağıdaki resimle temsil edelim uygulamamızı.


Burada gösterilen büyük resmin ('Resim') altındaki küçük resimlere
tıkladığımızda büyük resmin yerine üzerine tıklanan resmin getirildiğini
düşünelim. Bunu küçük resimlerin onclick olayına bir javascript fonksiyonu
yazarak halledebiliriz.

<script>

function resimDegistir(resim) {

document.buyukresim.src= resim;

}

</script>

<img src="buyukresim.jpg" name="buyukresim">

<a href="http://www.viptasarim.net/#" onclick="javascirpt:resimDegistir('buyukresim1.jpg');"><img 
src="kucukresim1.jpg" border="1"></a>

<a href="http://www.viptasarim.net/#" onclick="javascirpt:resimDegistir('buyukresim2.jpg');"><img 
src="kucukresim2.jpg" border="1"></a>

<a href="http://www.viptasarim.net/#" onclick="javascirpt:resimDegistir('buyukresim3.jpg');"><img 
src="kucukresim3.jpg" border="1"></a>

Resimlerin küçük hallerinine tıklanınca büyük halleri büyük resim alanında
görüntülenecektir. Bu uygulama birçoğumuz tarafından yapılmış ve internette çok
kolay bulabileceğimiz bir uygulamadır. Özünde bu uygulamada bir AJAX
uygulamsıdır. resimDegistir fonksiyonu ile sunucudan resim dosyası
istenmektedir.



Yazının başından beri belirtilen (yukarıdaki örneğin ışında :-) ) AJAX tanımını
tekrarlamak istiyorum. AJAX sunucudaki PHP dosyalarının ( Bu dosyalar herhangi
bir sunucu tabanlı yazılımlar olabilir Java, ASP ...) tarayıcı yenilenmeden (Javascript
le) çağırılması ve oluşan çıktının (HTML, XML yada düz metin olabilir)
tarayıcıda gösterilmesinde ibarettir.



Bu durumda AJAX ın üç temel bileşini olduğu söylenebilir. Tarayıcıda tetikleme
işlemlerinin sağlayan ve dönen veriyi gösteren Javascript, sunucudaki tetiklenen
betik ve sunucudan tarayıcıya döneni veri formatı.



Tarayıcıdaki Javascript:



Sayfayı yenilemeden sunucudan istek göndermeyi ve sonuç almayı sağlayan
javascript sınıfı XMLHttpRequest sınıfıdır. Bu sıkça kullanılan tarayıcıların (IExplorer,
Firefox, Opera) hepsi tarafından desteklenmektedir.



Oluşturduğunuz XMLHttpRequest nesnesi sunucuya GET ve POST yöntemiyle istek
göndermenizi sağlar. Bunu send() fonksiyonu ile yaparız.

<script>

var http;

var browser = navigator.appName;

if(browser == "Microsoft Internet Explorer"){

// IE ise activex ile çağır

http = new ActiveXObject("Microsoft.XMLHTTP");

}else{

http = new XMLHttpRequest();

}

http.open('get', 'dosya.php');

http.send(null);

</script>

Yukarıdaki kod basitce sunucudaki dosya.php dosyasını çağırır. Burada kullanılan
open() işlevi sunucudaki dosya ile hangi methodla alış veriş yapacağımızı
belirtmemizi sağlar. send() işlevi ise sunucuya göndereceğimiz ek değişkenleri
belirtmemizi sağlar. Eğer hiç değişken göndermeyeceksek bile bu işlevi 'null'
argümanı ile çağırmalıyız.



Buraya kadar ki kodlar sunucudaki dosyaya istek göndermekle ilgili idi. Şimdi
dosyanın çalışması sonucu oluşan çıktıyı tarayıcı tarafında nasıl
göstereceğimize geçelim. XMLHttpRequest ile sunucu ile veri alışverişinin
durmunu takip edebiliyoruz. Nesenenin readyState özelliği ile ve
onreadystatechange tetiğiyle (trigger) alışverişin durumunu takip edip başarılı
olup olmadığını anlayabiliyoruz. Alışverişin durumunu belirten readyState
özelliğine 5 ayrı atanır.

• 0 = Alışveriş başlamadı

• 1 = Sunucuya istek gönderiliyor

• 2 = Sunucuya istek gönderildi

• 3 = Alışveriş devam ediyor

• 4 = Alışveriş sonlandı

Bu değerlere göre alışverişin durumu takip edip işlemlerimizi yapabiliriz. gmail
kullananlar bilirler mail gönderirken veya herhangi bir işlem yaparken işlemin
devam ettiğine dair gmail sayfanın tepesine uyarılar yazar. readyState
değiştiğini onreadystatechange tetiği ile takip edebilir ve bu değişime göre
fonksiyonları atayabiliriz. Bu durumda yukarıdaki kodumuza söyle bir ekleme
yapabiliriz.

<script>

var http;

var browser = navigator.appName;

if(browser == "Microsoft Internet Explorer"){

// IE ise activex ile çağır

http = new ActiveXObject("Microsoft.XMLHTTP");

}else{

http = new XMLHttpRequest();

}

http.open('get', 'dosya.php');

http.onreadystatechange = degisiklikOldu;

http.send(null);

funciton degisiklikOldu {

if(http.readyState == 4){

// alış veriş bitti

} else {

// işlem devam ediyor

}

}

}

</script>

onreadystatechange tetiği readyState değerinin her değiştitiğinde
degisiklikOldu() işlevini çağırır. degisiklikOldu() içinde de eğer alışveriş
tamamlanmış ise ilgili işlemler yapılır.



Şimdi ise sunucudaki dosyanın gönderdiği verinin nasıl gösterileceğine bakalım.
Veri alışverişi bittiğinde oluşturduğumuz XMLHttpRequest nesnesinin responseText
öğesinin değeri sunucudan gelen veri bulunur. Bu veriyi sayfanın istediğimiz
yerinde kullanabiliriz.



Yukarıda yazdığımız kodu biraz daha değiştirerek şu hale getirelim.

<html>

<body>

<script>

var http;

var browser = navigator.appName;

if(browser == "Microsoft Internet Explorer"){

// IE ise activex ile çağır

http = new ActiveXObject("Microsoft.XMLHTTP");

}else{

http = new XMLHttpRequest();

}

function ajaxKullan() {

http.open('get', 'dosya.php');

http.onreadystatechange = degisiklikOldu;

http.send(null);

}

funciton degisiklikOldu {

if(http.readyState == 4){

document.getElementById('gosterDiv').innerHTML = http.responseText;

} else {

// işlem devam ediyor

}

}

}

</script>

<a href="javascript:ajaxKullan()">Ajax Kullan</a>

<div id="gosterDiv"></div>

</body>

</html>

Bu dosyadaki 'Ajax Kullan' linkine tıklanında 'dosya.php' oluşturduğu çıktı
sayfa yenilenmeden tarayıcımızda görünür.



'dosya.php' dosyasına GET yöntemiyle değişken gönderebiliriz.



http.open('get', 'dosya.php?degisken1=1&degisken2=2');



Bu değişkenlere dosya.php de $_GET dizisini kullanarak ulaşabiliriz.



Yada POST yöntemini kullanmak istiyorsak aşağıdaki gibi değer gönderebiliriz.




http.open("post", "dosya.php");

http.send("degisken1=1&degisken2=2");



Bu değişkenlere dosya.php de $_POST dizisini kullanarak ulaşabiliriz.



Bu yazıda basitçe AJAX uygulamasının temel işlemleri anlatılmaya çalışılmıştır.
Bu temel işlevleri kullanarak kendi uygulamalarınızı yapabilirsiniz.

KAYNAK: E-Book