AJAX'ın Ana Objesi XMLHttpRequest

Merhaba Arkadaşlar,

Bu makalemizde AJAX'ın ana objesi XMLHttpRequest hakkında biraz blgi vericem.

Öncelikle XMLHTTP hakkında biraz bilgi verelim, 2001 yılında ActiveX object olarak IE de kaşımıza çıkan XMLHTTP sayesinde JavaScript ile server tarafından XML y ada farklı formatlarda veri gönderip - almamızı sağladı. Bunu takiben Modzilla kendi XMLHttpRequest objelerini oluşturdular. Artık bütün browserlar bazı farklarlada olsa kendilerine bunu entegre ettiler. Aynı zamanda ALAX'ın alt yapısınıda kullandığı için sunucu ile iletişim sorunsuz çalışmakta. Aldığımız cevaba uygun olarak JavaScript yapılan bir değişiklik varsa, bunu yine JavaScript ile yapılandırarak, sayfa postback edilmeden sadece ihtiyacımız olan verileri internet üzerinden server'a gidip - geldiği bi uygulama yapmak mümkün.

XMLHttpRequest ile server tarafından veri isteklerinde bulunabiliriz, bu istek JavaScript ile yapılacağı için web sayfamızın yenilenmesi gerekmeksizin, isteğimizi gönderip gelen cevabı işliyebiliyoruz.

XMLHttpRequest objeleri ile ilgili browser'lar arasında bir standart oluşturulmamış. Mozilla, IE hatt IE ler arasındaki sürüm farkında bir farklılıklar sözkonusu, onuniçin XMLHttpRequest'imizi tanımlarken bu ihtimalleri gözönünde bulundurarak gerekli tanımlamaları yapmamız gerekiyor.

Şimdi bir örnek yapalım ve birazda o örnek üzerinden konumuza devam edelim.

VS 2008 ile bir Web Projesi açalım ve bir HTML sayfa ekleyelim,

<title>XMLHttpRequest</title>

var _XmlHttpRq = null;

try { _XmlHttpRq = new ActiveXObject("Msxml2._XmlHttpRq"); }

catch(err) { try{ _XmlHttpRq = new ActiveXObject("Microsoft.XMLHTTP"); } catch(err2){} }

</script>

Yukarıdaki kodu adım adım inceleyelim, ilk olarak _XmlHttpRq adında bir değişken tanımlayıp bu değişkeni Msxml2.XMLHTTP metodu ile ActiveX objesi tanımlamaya çalışıyoruz, bu tanımlama esnasında herhangi bir sorun çıkarsa bu sefer catch bloğu içerisinde yakalayım Microsoft.XMLHTTP metodu ile bir ActiveX objesi tanımlamaya çalışıyoruz.

Burada diyebilirsiniz neden iki farklı metod kullanarak bir ActiveX objesi tanımlamaya çalışıyoruz ? bunun nedeni yazımızın başında dabahsettiğimiz IE ler arasında bile bir standart olmamasından kaynaklanıyor. Şu anda IE 5 öncesi tarayıcı kullananvrmıdır bilmiyorum ama bunuda bilgi olarak vermek gerektiğini düşündüm. Eğer IE 5 öncesi kişilerle benim işim yok diyorsanız ya da Update yapmayan kişilerle işim yok derseniz o zaman bunu atlayabilirsiniz. IE haricinde Browserlar ne olacak diye sorarsanız onun için aşşağıdaki kodu kullanablirsiniz.;

_XmlHttpRq = new XMLHttpRequest();

Yukarıdaki kodun tamamını aşşağıdaki şekilde verbiliriz.

function XMLHttpRequest2(); {

var _XmlHttpRq = null;

try { _XmlHttpRq = new ActiveXObject("MSXML2._XmlHttpRq"); }

catch (Error) {try { _XmlHttpRq = new ActiveXObject("Microsoft.XMLHTTP"); }

catch (err2) {if (typeof XMLHttpRequest != "undefined") _XmlHttpRq = new XMLHttpRequest(); }} return _XmlHttpRq; }

alert(typeof _XmlHttpRqObj2()) </script>

Kodumuzu biraz daha düzgün bir şekilde yazmak itersek Array'lerin yardımı istiyebiliriz.

function _XmlHttpRqObj2() {var _XmlHttpRq = null;

var versiyon = new Array; "Microsoft.XMLHTTP" ;

versiyon[0] = "MSXML2.XMLHttp.3.0" ;

versiyon[1] = "MSXML2.XMLHttp.4.0";

versiyon[2] = "MSXML2.XMLHttp.5.0";

versiyon[3] = "MSXML2.XMLHttp.4.0";

versiyon[4] = "MSXML2.XMLHttp";

for (var i = 0; i < versiyon.length; i++) {try {_XmlHttpRq = new ActiveXObject(versiyon[i]);return _XmlHttpRq;}catch (err) {}}} </script>

Yukarıdaki kodu incelicek olursak, öncelikle versiyon adında bir Array "dizi değişken" tanımladığımızı farkedersiniz, bu dizi içerisine bildiğimiz kütüphane isimlerini değişkenimize aktarıyoruz ve daha sonra bir For döngüsü kullanarak dizimizin içerisinde gezerek bir XLMHttpRequest objesi yaratmaya çalışıyoruz.

Yarattığımız XMLHttpRequest objemiz ne şekilde ve hangi sürümde yaratırsakyaratalım çalışacağı browser'larda aynı şekilde çalışacaktır. yarattığımız objeye ait olan Open() metodu ile çalışmaya başlayan kodumuz parametre olarak Request'imizin GET ve POST metotları ile verinin talep edildiği adres alınır. Ancak bununla işmizin biticeğini düşünenler varsa yanılırlar, çünkü bir de dinleyici dediğimiz bir metot kullanmamız gerekiyor. bu dinleyici metodumuz ne işe yarayacak diye sorarsanız hemen onuda açıklayım, XMLHttpRequest objemizin durumu hakkında bize bilgiyi vericek olan bu metodumuz olacaktır. bu ne işe yarayacaktır ? Veri alımımız tamamlandığında bizde yapmamız gereken işlemlere devam edeceğiz. Aksi durumda veri alımı asenkron olduğundan verinin alınıp alınmadığı konusunda hiç bir fikrimiz olmaz.

Projemizin içerisinde Solution Explorer'ımıza bir text dosya ekleyelim içerisinde Mesaj yazalım. ben bunun adını dosya.tx yaptım, siz de istediğiniz bir yazı yazabilirsiniz. ve aşşağıdaki dinleyici fonksiyonumuzu yazalım,

function

if (dinleObj.readyState == 4 && dinleObj.status == 200) {

alert(dinleObj.responseText);}}

var dinleObj = _XmlHttpRqObj();

dinleObj.open("GET", "dosya.txt"); Listener() {

dinleObj.onreadystatechange = Listener;

dinleObj.send(null);

İlk yazdığımız JavaScrip kodu XMLHttpRequest objesini döndüren bir fonksiyon, en son yazdığımız ise XMLHttpRequest işleminde bir değişiklik olduğu zaman bize mesaj verecek olan fonksiyonumuz. Listener fonksiyomunuz çalıştığında XMLHttpRequest objesinin readState özelliği kontrol ediliyor, bu özellik 4 durumunda, bunun anlamı "TALEP TAMAMLANDI" anlamına gelmektedir ve dosyamız bulunup kontrol edildikten sonra, bir değer döndürülücekse bunun değeri 200 demektir ve dosyadaki MESAJ yazımız bize alert ile gösterilecektir. Bu işlemide XMLHttpRequest objesinin response-text özelliği ile gelen veriyi işleyerek gösterilecetir.

Bu fonksiyonumuzda tamamlandıktan sonra sıra bu kodların hepsinin birleştirilip çalıştıracağımız kodu yazmaya, _XmlHttpRqObj isimli fonksiyonuzdan bir XMLHttpRequest objesini alıp, objenin open işlevine parametre olarak GET talep tipimizi ve talep edilen verinin PATH'ini dosya.txt verdikten sonra objemizin readState özelliğindeki değişiklikleri dinlemek için readystatechanged işlevine hazırlamış olduğumuz Listener fonksiyonuna atıyoruz ve en son olarakta send işlevi ile talep işlevini başlatıyoruz.

NOT: bu kodun IIS içerisinde çalıştırılması gerekmektedir. Normal olarak çalışırsa dosya.txt dosyamızı bulamıcaktır.

Bu kodları aşşağıdaki link'den indirebilirsiniz.

XMLHttpRequest.rar (2,62 kb)

İyi Çalışmalar, Kolaygelsin.

AJAX'ın Ana Objesi XMLHttpRequest

Blog Posts' Cloud