yakuter » 30 Saniyede Ajax Öğrenin

POPÜLER ARAMALAR: reklam, pazarlama, iş,
kod, wordpress, eklenti, web, teknoloji,
programlama, tasarım, ajax, linux, Pardus, blog

20 Aralık 2006

30 Saniyede Ajax Öğrenin

Etiketler: Ajax, Javascript, programlama, XML
Kategori Kategorilenmemiş |

Bu yazımda size Ajax'ın temeli veya başka bir deyişle çekirdeği olan XMLHTTPREQUEST nesnesinin kullanımını anlatacağım. Aslında Ajax, Ajax olmadan önce de bu nesne mevcuttu fakat meşhur değildi. Bu nesnenin kullanımını öprendikten sonra sitelerinizde, sunucu ile iletişimi form yenilenmeden yapabileceksiniz. Üstelik bunu yaparken ihtiyacınız olmayan fonksiyonları barındıran prototype gibi hazır javascript sınıflarını kullanmanıza gerek kalmayacak.

Önce basit bir şekilde XMLHTTPREQUEST nesnesinin çağırılışını görelim.

Duz Metin

nesne = new XMLHttpRequest();

Gördüğünüz gibi temelde oldukça basit ve açık. Tabi internet explorer yine bize gıcıklık yapıyor ve bu kullanımı tanımayabiliyor. Bu yüzden internet explorer için nesnemizi şöyle çağırabiliyoruz.

Duz Metin

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

Şimdi bu iki çağırma şeklinden faydalanarak tüm tarayıcılarda çalışabilecek fonksiyonumuzu yazalım. Bunun için tarayıcıyı kontrol eden ve internet explorer ise onda ikinci yöntemi, internet explorer değilse (mozilla veya safari gibi tarayıcılar ise) birinci yöntemi kullanan bir fonksiyon kullanalım.

Duz Metin

var http = nesneyarat();

Bu kod ile sayfamız açıldığı anda nesnemiz çağırılmış olacak ve http değişkeni nesnemiz olacak. Bu nesneyi çağırmanın bir çok farklı yolu mevcut. En basitinden buna bir hata yakalama kodları da eklenebilirdi veya eski tip nesne çağırılabilirdi ama bu işi yeni öğrenenler için o kadar zorlamak ve kodu karmaşıklaştırmak istemiyorum.

Sıra geldi işlem yapacak olan fonksiyonumuza. İşlem derken formdan gelen değerleri yani kullanıcının girdiği değerleri alıp sunucuya gönderip cevap isteyen fonksiyondan bahsediyorum. Sakın anlatıma bakıp gözünüzü korkutmayın. Aşağıdaki fonksiyon bize yetecektir.

Duz Metin

function islemlink(deger) {
http.open('get', 'test.php?degisken=' + deger);
http.onreadystatechange = cevapFonksiyonu;
http.send(null);
}

Yukarıdaki fonksiyonda open ile Get metodu kullanarak test.php dosyasına bilgiyi gönderiyoruz. Buradaki satırların başında http olmasının sebebi benim nesneyi en başta http değişkenine atamış olmam. onreadystatechange ise XMLHTTPREQUEST nesnesinin bir metodu olup çağırdığımız nesnenin durumunun değişmesi durumunda (örneğin cevap gelirse değişmiş olur), cevapFonksiyonu 'nu çağırıyor.

cevapFonksiyonu'muz da sunucudan cevap geldiğinde yapmak istediğimiz işlemi belirlediğimiz fonksiyondur. Onu da şöyle oluşturalım.

Duz Metin

function cevapFonksiyonu() {
if(http.readyState == 4){
document.getElementById('yer').innerHTML = http.responseText;
}
}

Burada nesnemizin readyState özelliğinin alabileceği değerler ve karşılıkları şu şekildedir.

0 = başlatılamadı
1 = yükleniyor
2 = yüklendi
3 = etkileşimli
4 = tamamlandı

Demek ki 4 olduğunda işlemimiz başarılı bir şekilde gerçekleştirilmiştir. Sonuç olarak da sayfamızda yer id'sine sahip yerde sunucudan gelen cevap (responseText) görüntülenecektir.

Bu anlattıklarımı toparlayarak tek bir dosya haline getirecek olursak deneme.htm dosyamız şu şekilde olacaktır.

Duz Metin

<html>
<head>
<title>Yakuter'de XMLHTTPREQUEST</title>
<script type="text/javascript">
function nesneyarat() {
var nesne;
var tarayici = navigator.appName;
if(tarayici == "Microsoft Internet Explorer"){
nesne = new ActiveXObject("Microsoft.XMLHTTP");
}else{
nesne = new XMLHttpRequest();
}
return nesne;
}

var http = nesneyarat();

function islemlink(deger) {
http.open('get', 'test.php?degisken=' + deger);
http.onreadystatechange = cevapFonksiyonu;
http.send(null);
}

function cevapFonksiyonu() {
if(http.readyState == 4){
document.getElementById('yer').innerHTML = http.responseText;
}
}
</script>

</head>

<body>

<a href="javascript:islemlink('Merhaba Dunya')">Tıkla</a><br /><br /><br />

</body>
</html>

Sunucuda iletişime geçmek istediğimiz dosya test.php olsun ve içini şöyle hazırlayalım.

Duz Metin

<?php echo $_GET['degisken']; ?>

Sonuç olarak ekranda Merhaba Dunya görüyorsanız başarmışsınız demektir...

Kolay gelsin...

Bu makaleyi yazarken özellikle Rasmus' 30 second AJAX Tutorial başlıklı yazısından faydalandım.

Konu hakkında daha fazla bilgi edinmek için şu makaleleri okuyabilirsiniz.

XMLHttpRequest Vikipedi
Ajax Nasıl?
Ajax
XMLHttpRequest Nedir? Ne iş yapar?

“30 Saniyede Ajax Öğrenin” için 9 Yorum

1 hamdi
17 Haziran 2007, 23:43

çok sağol.aradığım bilgi buradaymış. ajax öğrenmeye çalışıyorumda diyebilirim.
2 hakan
30 Haziran 2007, 01:13

Sağolasın kısa ve öz bir makale yayınlamışsın yanlız. Bu türkçe karakterler konusunada biraz değinseniz işin içinden çıkamadım ben. iyi çalışmalar
3 webiket.net
21 Kasım 2007, 00:40

30 Saniyede Ajax Öğrenin…

Bu yazımda size Ajax’ın temeli veya başka bir deyişle çekirdeği olan XMLHTTPREQUEST nesnesinin kullanımını anlatacağım. Aslında Ajax, Ajax olmadan önce de bu nesne mevcuttu fakat meşhur değildi….
4 Burak
21 Kasım 2007, 12:47

bunu ben daha once kullandim fakat bugun bir yerde daha kullanmak istedim.

bir formum var icinde yalnizca bir buton var, tiklayinca asagidaki bir div icinde baska bir dosyadaki form cikiyor, ama nedense form ciktiktan sonra sayfa sanki redirect olmus gibi baska bir yere gidiyor ve yonlendigi sacma sapan link su sekilde;

../step3.jsp?menu1=step1.jsp&menu1=step2.jsp&submit.x=37&submit.y=11

yardimci olabilir misiniz?
5 Nusret Kurar
05 Aralık 2007, 14:33

XMLHTTPREQUEST’i çok güzel anlatan bir kitap Açık Akademi yayınlarından çıktı. http://www.acikakademi.com/catalog/ajax/
İngilizcesini okumuştum gayet açıklayıcı idi. İlgilenen arkadaşlara tavsiye ederim
6 mkl lks
11 Ocak 2008, 11:14

http://depositfiles.com/files/3033011 bunu yuklemeniz gerekmektedir.
7 Güzel Sözler
31 Ocak 2008, 16:57

çok saol bu bilgiler işime yarar
8 resimler
17 Şubat 2008, 10:59

Gördügüm kadarı ile Ajax a hakimsiniz tebrik ederim.
9 plastik
01 Mart 2008, 09:57

Teşekkürler. Çok faydali bir sayfa.