SeyFull@H

Ağ sayfalarınızın Gmail gibi hızlı olmasını istiyorsanız Asenkron JAvaScript ve Xml kullanmanız gerekiyor. Nedir AJAX, sunucuda çalışan bir kodun çıktılarının postback (sayfanın yeni verilerle yeniden yüklenmesi) olmadan istemciye ulaştırılmasıdır. AJAX aslında yeni bir olay değil sadece var olan bir kaç teknolojinin bir araya gelmesi ile oluşturulmuş bir yöntemdir diyebiliriz. Michael Schwarz’ın yazdığı AJA
Ajax Nedir? AJAX web yazılımı geliştirmesine yeni bir boyut katan bir gelişmedir. Bunun için hemen hemen herkesin ilgisini çekmektedir. AJAX kullanılarak birçok uygulama yapılmıştır. Bunların başında google tarafından geliştirilen gmail gelmektedir. Uygulamanın getirdiği kullanışlılık birçok geliştiriciyi AJAX kullanmaya itmiştir.

Fakat temelde genel olarak bir hata yapılmaktadır. PHP programcıları hemen hazır kütüphaneleri kullanmaya yönelmişlerdir. Hali hazırda varolan kütüphanelerin birçoğunun daha ilk aşamalarda olması, kararlı sürümlerinin olmaması ve hatalar barındırması nedeniyle birçok programcı bu kütüphanleri uygularken sıkıntı çekmiş ve başarılı olamamıştır. Bu durum genel olarak AJAX konusunda bir güvensizliğe sebep olmuştur. Daha hazır olmadığı kanısına varılmasına sebep olmuştur.

AJAX sunucuda çalışacak betiğin sayfa yenilenmeden javascriptle tetiklenmesinden ibarettir.Yani aslında yeni olan araçlar değil araçların kullanma şeklidir. Bu tetiklemeyi tarayıcı tarafında Javascript ile yapabiliyoruz.

Bu aşamada çok basit bir örnek vermek istiyorum. Şöyle bir uygulamamız olduğunu düşünelim. Bir sayfada bir haber detayını verdiğimizi düşünelim. Sayfanın solunda haber ile ilgili resimlerin küçük halleri (thumbnail) sağında ise haber metni olsun. Kabaca aşağıdaki resimle temsil edelim uygulamamızı.



Burada gösterilen büyük resmin ('Resim') altındaki küçük resimlere tıkladığımızda büyük resmin yerine üzerine tıklanan resmin getirildiğini düşünelim. Bunu küçük resimlerin onclick olayına bir javascript fonksiyonu yazarak halledebiliriz.
<script>
function resimDegistir(resim) {
document.buyukresim.src= resim;
}
</script>
<img src="buyukresim.jpg" name="buyukresim">
<a href="#" onclick="javascirpt:resimDegistir('buyukresim1.jpg ');"><img src="kucukresim1.jpg" border="1"></a>
<a href="#" onclick="javascirpt:resimDegistir('buyukresim2.jpg ');"><img src="kucukresim2.jpg" border="1"></a>
<a href="#" onclick="javascirpt:resimDegistir('buyukresim3.jpg ');"><img src="kucukresim3.jpg" border="1"></a>


Resimlerin küçük hallerinine tıklanınca büyük halleri büyük resim alanında görüntülenecektir. Bu uygulama birçoğumuz tarafından yapılmış ve internette çok kolay bulabileceğimiz bir uygulamadır. Özünde bu uygulamada bir AJAX uygulamsıdır. resimDegistir fonksiyonu ile sunucudan resim dosyası istenmektedir.

Yazının başından beri belirtilen (yukarıdaki örneğin ışında :-) ) AJAX tanımını tekrarlamak istiyorum. AJAX sunucudaki PHP dosyalarının ( Bu dosyalar herhangi bir sunucu tabanlı yazılımlar olabilir Java, ASP ...) tarayıcı yenilenmeden (Javascript le) çağırılması ve oluşan çıktının (HTML, XML yada düz metin olabilir) tarayıcıda gösterilmesinde ibarettir.

Bu durumda AJAX ın üç temel bileşini olduğu söylenebilir. Tarayıcıda tetikleme işlemlerinin sağlayan ve dönen veriyi gösteren Javascript, sunucudaki tetiklenen betik ve sunucudan tarayıcıya döneni veri formatı.


Tarayıcıdaki javascript:

Sayfayı yenilemeden sunucudan istek göndermeyi ve sonuç almayı sağlayan javascript sınıfı XMLHttpRequest sınıfıdır. Bu sıkça kullanılan tarayıcıların (IExplorer, Firefox, Opera) hepsi tarafından desteklenmektedir.

Oluşturduğunuz XMLHttpRequest nesnesi sunucuya GET ve POST yöntemiyle istek göndermenizi sağlar. Bunu send() fonksiyonu ile yaparız.

<script>
var http;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
// IE ise activex ile çağır
http = new ActiveXObject("Microsoft.XMLHTTP");
}else{
http = new XMLHttpRequest();
}
http.open('get', 'dosya.php');
http.send(null);
</script>


Yukarıdaki kod basitce sunucudaki dosya.php dosyasını çağırır. Burada kullanılan open() işlevi sunucudaki dosya ile hangi methodla alış veriş yapacağımızı belirtmemizi sağlar. send() işlevi ise sunucuya göndereceğimiz ek değişkenleri belirtmemizi sağlar. Eğer hiç değişken göndermeyeceksek bile bu işlevi 'null' argümanı ile çağırmalıyız.

Buraya kadar ki kodlar sunucudaki dosyaya istek göndermekle ilgili idi. Şimdi dosyanın çalışması sonucu oluşan çıktıyı tarayıcı tarafında nasıl göstereceğimize geçelim. XMLHttpRequest ile sunucu ile veri alışverişinin durmunu takip edebiliyoruz. Nesenenin readyState özelliği ile ve onreadystatechange tetiğiyle (trigger) alışverişin durumunu takip edip başarılı olup olmadığını anlayabiliyoruz. Alışverişin durumunu belirten readyState özelliğine 5 ayrı atanır.

• 0 = Alışveriş başlamadı
• 1 = Sunucuya istek gönderiliyor
• 2 = Sunucuya istek gönderildi
• 3 = Alışveriş devam ediyor
• 4 = Alışveriş sonlandı

Bu değerlere göre alışverişin durumu takip edip işlemlerimizi yapabiliriz. gmail kullananlar bilirler mail gönderirken veya herhangi bir işlem yaparken işlemin devam ettiğine dair gmail sayfanın tepesine uyarılar yazar. readyState değiştiğini onreadystatechange tetiği ile takip edebilir ve bu değişime göre fonksiyonları atayabiliriz. Bu durumda yukarıdaki kodumuza söyle bir ekleme yapabiliriz.

<script>
var http;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
// IE ise activex ile çağır
http = new ActiveXObject("Microsoft.XMLHTTP");
}else{
http = new XMLHttpRequest();
}
http.open('get', 'dosya.php');
http.onreadystatechange = degisiklikOldu;
http.send(null);
funciton degisiklikOldu {
if(http.readyState == 4){
// alış veriş bitti
} else {
// işlem devam ediyor
}
}
}
</script>


onreadystatechange tetiği readyState değerinin her değiştitiğinde degisiklikOldu() işlevini çağırır. degisiklikOldu() içinde de eğer alışveriş tamamlanmış ise ilgili işlemler yapılır.

Şimdi ise sunucudaki dosyanın gönderdiği verinin nasıl gösterileceğine bakalım. Veri alışverişi bittiğinde oluşturduğumuz XMLHttpRequest nesnesinin responseText öğesinin değeri sunucudan gelen veri bulunur. Bu veriyi sayfanın istediğimiz yerinde kullanabiliriz.

Yukarıda yazdığımız kodu biraz daha değiştirerek şu hale getirelim.

<html>
<body>
<script>
var http;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
// IE ise activex ile çağır
http = new ActiveXObject("Microsoft.XMLHTTP");
}else{
http = new XMLHttpRequest();
}
function ajaxKullan() {
http.open('get', 'dosya.php');
http.onreadystatechange = degisiklikOldu;
http.send(null);
}
funciton degisiklikOldu {
if(http.readyState == 4){
document.getElementById('gosterDiv').innerHTML = http.responseText;
} else {
// işlem devam ediyor
}
}
}
</script>
<a href="javascript:ajaxKullan()">Ajax Kullan</a>
<div id="gosterDiv"></div>
</body>
</html>



Bu dosyadaki 'Ajax Kullan' linkine tıklanında 'dosya.php' oluşturduğu çıktı sayfa yenilenmeden tarayıcımızda görünür.

'dosya.php' dosyasına GET yöntemiyle değişken gönderebiliriz.

http.open('get', 'dosya.php?degisken1=1&degisken2=2');

Bu değişkenlere dosya.php de $_GET dizisini kullanarak ulaşabiliriz.

Yada POST yöntemini kullanmak istiyorsak aşağıdaki gibi değer gönderebiliriz.

http.open("post", "dosya.php");
http.send("degisken1=1&degisken2=2");

Bu değişkenlere dosya.php de $_POST dizisini kullanarak ulaşabiliriz.

Bu yazıda basitçe AJAX uygulamasının temel işlemleri anlatılmaya çalışılmıştır. Bu temel işlevleri kullanarak kendi uygulamalarınızı yapabilirsiniz. AJAX uygulamasına yeni başlayacaklara hazır kütüphane kullanmadan önce kendi işlevlerini oluşturmaya çalışmlarını tavsiye ederim.
X.NET modülü ile bu yöntemi ASP.NET sayfalarına da uygulayabiliriz. Temelde XMLHttpRequest nesnesini kullanarak yazılmış bir yöntemdir.
Daha fazla bilgiyi aşağıdaki adreslerden alabilirsiniz:
http://en.wikipedia.org/wiki/AJAX
http://www.adaptivepath.com/publications/essays/archives/000385.php

Nasıl çalışır:
.NET içinde AJAX metodu olarak işaretlenmiş fonksiyonlar için birer JavaScript oluşturulur. Bu script istemci tarafından sunucu tarafındaki fonksiyonu çağırmak için proxy görevi görür. Sunucu tarafında Ajax handler’ı reflection yolu ile çağırılan metoda benzeyen bir metod arar, bulur, çalıştırır ve sonuçları istemciye döndürür. Bu arada gerekli olan alt yapıyıda kendisi otomatik olarak düzenler.
Diyelimki aşağıdaki gibi bir fonksiyonunuz var:

[Ajax.JavascriptMethod]
public string SayHello(string ad)
{
return “Hello “ + ad;
}

AJAX.NET sınıfı otomatik olarak ismi SayHello olan bir JavaScript fonksiyonu oluşturur. Bu fonksiyon çağırıldığında, istek sunucuya gönderilir ve geriye dönüş değeride istemciye döner.

Kurulum
AJAX.NET’in son sürümünü bu adresten indirebilirsiniz. Tüm yapmanız gereken projenizde References kısmına bu dll’i yüklemektir.
Daha sonra web.config dosyasında bazı değişiklikler yapacağız. Aşağıdaki handler’ı <httpHandlers> kısmına eklemeniz gerekiyor. Handler aslında var olmayan bir sayfaya istek yapıldığında ASP.NET uygulamasının nasıl karşılık vereceğini belirtir.

<add verb="POST,GET" path="ajaxwrapper/*.ashx" type="Ajax.PageHandlerFactory, Ajax" />

Web.config dosyasındaki bu değişiklikten sonra herhangi bir ASP.NET sayfasının Page_Load fonksiyonuna aşağıdaki kodu eklemeniz gerekiyor.

private void Page_Load(object sender, EventArgs e){
Ajax.Utility.RegisterTypeForAjax(this.GetType());
//...
}

JavaScripti sayfaya kaydettikten sonra aspx sayfasını ağ gezgini ile çağırdığınızda aşağıdaki gibi bir kod meydana gelecektir.

<script language="javascript" src="ajaxwrapper/common.ashx"></script>
<script language="javascript" src="ajaxwrapper/NAMESPACE.PAGECLASS,ASSEMBLYNAME.ashx"></script>

NAMESPACE.PAGECLASS sayfanın sınıfı olacak ve Inherits parametresinin değerini alacaktır.
ASSEMBLYNAME ise sayfanın bağlı olduğu assembly ismini alacaktır. Büyük ihtimalle projenizin ismi olacaktır.

Sunucu-tarafında çalışan fonksiyonların AJAX metodu olarak işaretlenmesi gerekiyor. Yukarıda da anlattığım gibi Ajax.JavaScriptMethod() etiketi ile fonksiyonların asenkron olarak çağırılmasını sağlayabilirsiniz. Bu yöntem ile integer, string, double, boolean, DateTime, DataSet ve DataTable geriye döndürebilirsiniz.

Bu yöntem ağ uygulamalarına Windows Forms uygulamaları gibi esneklik sağlıyor ve ağ uygulamalarının daha hızlı cevap vermesini sağlıyor. Günümüzde herkesin hızlı internet servislerinden yararlanmadığını düşünürsek AJAX gibi bir metodun yararları daha da fazla beliriyor.
Bu arada Microsoft’ta boş durmuyor. ASP.NET 2.0 ile AJAX benzeri bir teknolojiyi Atlas adı ile Framework 2.0 içine entegre etmeye çalışıyorlar. Böylece bu metoddan yararlanarak ağ uygulamaları geliştirebileceğiz. Bu proje ile yeni form kontrolleri de gelecek.
Atlas bir adım ileri giderek Ağ Hizmetlerine ve Indigo servislerine asenkron olarak bağlanabilecek. İstemci tarafındaki nesneleri sunucu tarafındaki nesnelere bağlayabilme özelliği sayesinde güvenlik, kulanıcı tanımlama, arayüz kişiselleştirme gibi işlemler daha kolay mümkün olabilecek. Kimbilir belki kullanıcı tokenlarını dahi internet üzerinde taşıyıp uzak sistemlere login olmak bile mümkün olabilecek. İstemci tarafında lokal olarak “cache” tanımlayıp verileri burada tutmak mümkün olabilecek. Ne yazık ki Atlas, VS2005 Beta2 içinde yok. Ancak Eylüldeki PDC ’05’de duyurulacak ve sanırım beta olarak dağıtılacak. Genede Kasımda çıkması planlanan VS2005 paketinde Atlas olmayacak.

Scott Guthrie’nin blogundan Atlas hakkında ayrıntılı bilgi alabilirsiniz.