Wordpress

Wordpress Yakuter

Tatilde sona mı yaklışıyoruz ne :( Twitter

546 takipçi

30 Saniyede Ajax Öğrenin

KategoriAjax

20 Aralık 2006

1.592 Okunma

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.

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.

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.

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();

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.

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.

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.

<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 />

<div id="yer"></div>

</body>
</html>

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

< ?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?

Benzer Yazılar

Erhan Yakut

www.yakuter.com

Genç yaşlarda programlama ile tanıştı ve Delphi ile başladığı programlama macerasına şuanda PHP, SQL, Javascript, AJAX, CSS, XHTML teknolojileri ile devam etmektedir. Elektrik - Elektronik bölümü mezunu olan "yakuter" 2006 yılından itibaren yakuter.com'un yazarlığını yapmaya başlamıştır.

Sponsor Olmak İstiyorum!

Bu Yazıya Ait Yorumlar

hamdi
17 Haziran 2007

çok sağol.aradığım bilgi buradaymış. ajax öğrenmeye çalışıyorumda diyebilirim.

hakan
30 Haziran 2007

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

webiket.net
21 Kasım 2007

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….

Burak
21 Kasım 2007

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?

Nusret Kurar
05 Aralık 2007

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

mkl lks
11 Ocak 2008

http://depositfiles.com/files/3033011 bunu yuklemeniz gerekmektedir.

Güzel Sözler
31 Ocak 2008

çok saol bu bilgiler işime yarar

resimler
17 Şubat 2008

Gördügüm kadarı ile Ajax a hakimsiniz tebrik ederim.

plastik
01 Mart 2008

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

alem
09 Nisan 2009

teşekkürler.

Sinan KUTAS
30 Ocak 2010

Sinan KUTAS
Güzel anlatmışsın emeğine sağlık.Ama herkes php tabanlı kullanıyor ajax ı ve benim jsp tabanlı örneklere ihiyacım war bildiğiniz bir source olursa yazarsanız sevinirim…