Temel amacı sayfanın bütününü etkilemeden arka planda sunucuyla(web server) küçük miktarlarda veri alışverişi yaparak sayfaları daha hızlı bir şekilde güncellemektir. Ajax sayesinde sayfanın tamamının “post-back” olmasından kurtulmuş oluruz ve böylece sayfanın performansını arttırmış oluruz (etkileşim-hız-kullanılabilirlik). Ajax kullanımına hepimizin tanıdık olduğu bir örnek verecek olursak; www.google.com arama motorunu açtığımızda aranacak kelimeyi girmeye başladığımız anda google bize benzer aranan kelimeleri bir öneri halinde getirir ve bunu sayfayı “post-back” yapmadan yapar. Biz daha kelimeyi yazar yazmaz, tarayıcımız sunucuya javascript aracılığıyla “http request” gönderir ve daha önce aranmış benzer kelimeleri bize geri getirir. Bu örnekle Ajax’sın amacının anlaşıldığını düşünüyorum.
Asynchronous(Eşzamansız) ve synchronous(Eşzamanlı) konseptlerini açıklamakla işe devam edelim. Eşzamansız demek; yazdığımız kod bloğundan daha sonuç almadan yeni kod bloğuna geçmektir. Örneğin bir sayının faktöriyelini bulan bir fonksiyona bir sayı gönderdik, bu fonksiyon daha bize sonuç göndermeden biz başka işlemler yapmaya devam edersek buna eşzamansız(Asynchronous) denir. Fakat Fonksiyondan sonucun gelmesini bekler, ve sonuç geldikten sonra diğer işlemleri yapmaya devam edersek buna eşzamanlı(synchronous) işlem denir.
Ajax uygulamaları yazmımızı sağlayan temel nesnemiz “XMLHttpRequest” tir. Bu nesne sayesinde sunucuya bir request(istek) gönderebiliriz. Hemen tüm tarayıcılar bu nesneyi tanımaktadır. Fakat internet Explorer 7 den daha önceki Microsoft tarayıcılar bu nesneyi kullanmamaktadır. O tarayıcılarda da bu nesne yerine geçen “ActiveXObject” nesnesi kullanılmaktadır. Hiçbir tarayıcada sorun yaşamak istemiyorum diyorsanız ikisini ortaklaşa kullanmak durumundayız. Tarayıcıya göre bir htpprequest nesnesi yaratmak istiyorsak, aşağada ki yöntemi kullanabiliriz.
function readyAJAX() {
try {
return new XMLHttpRequest();
} catch(e) {
try {
return new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
return new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
return "Tarayıcı çok eski”;
}
}
}
}
Request nesnemizi yaratacak fonksiyonu yazdıktan sonra diğer işlemlere geçelim. İlk olarak synchronous(senkron-eşzamanlı) response örneği ile başlayalaım daha sonra asynchronous örnekle devam edeceğiz. Senkron çalışmak, asenkron çalışmaya nazaran kontrolü daha basittir.
Var requestObj= readyAJAX();
requestObj.open("GET", "http://www.test.com/ikiSayiyiTopla?num1=10&num2=20", false);
requestObj.send();
if (requestObj.status == 200) {
alert(requestObj.responseXML);
} else {
alert(requestObj.statusText);
}
Öncelikle request nesnemizi fonksiyonumuz yardımıyla yarattık. Daha sonra open ve send methodlarıyla xml formatındaki datamızı okuduk(bununla ilgili bir örneği ‘javascript ile xml okuma adlı paylaşımımda bulabilirsiniz’). Open fonksiyonu içinde yazan sayfa bize url ile gönderdiğimiz iki sayıyı toplayıp sonucunu gönderecektir(bu sadece test amaçlıdır, bu webservisi sizin yazmanız gerekecektir). Open methodunun son parametresinin “false” olması bunun bir senkron işlem olduğunun göstergesidir. Methottan bir değer dönmeden alt satırlara geçilmez. Kullanıcı sunucudan “response” aldığında, “status” methoduna bakacaktır. Eğer “status code” 200 ise işlem başarıyla gerçekleşmiştir ve response text ekrana yazdırılacaktır. Eğer “status code” 200 den farklı ise “statu” ekrana yazdırılacaktır.
Bu uygulamanın aynısını asynchronous yazacak olursak;
devam edeceğiz. Senkron çalışmak, asenkron çalışmaya nazaran kontrolü daha basittir.
Var requestObj= readyAJAX();
requestObj.open("GET", "http://www.test.com/ikiSayiyiTopla?num1=10&num2=20", true);
requestObj.send();
requestObj.onreadystatechange = function() {
if (requestObj.readyState == 4) {
if (requestObj.status == 200) {
alert(requestObj.responseText);
} else {
alert(requestObj.statusText);
}
}
}
Buradaki readyState=4 “ün anlamı response’un tamamiyle alındığını gösterir. Asekronkron işlemlerde readyState’in 4 ‘e ulaşıp ulaşmadığını “onreadystatechange” olayıyla kontrol ederiz.
Sonuç : Javascript ile senkron ve asenkron yollarla bir webservise veri gönderip, bu veriyi işletip bir başka veri elde ettik. Bu işlemi yaparken sayfamızı “post-back” ettirmeye ihtiyaç duymadık.
Hiç yorum yok:
Yorum Gönder