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.
|
1 |
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.
|
1 |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
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.
|
1 2 3 4 5 |
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.
|
1 2 3 4 5 |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<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.
|
1 |
< ?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?
