.Net Dersleri

Web ortamında masaüstü deneyimi oluşturabilmek belki de Ajax için kullanılabilecek en basit tanımlama olabilir.

Ajax: HTML,DHTML, DOM (Document Object Model), JavaScript teknolojilerini kullanarak klasik web uygulamalarına bir alternatif oluşturmaktadır.
Peki klasik web nedir? Ajax, klasik web uygulamalarına karşın neler sağlamaktadır?

Normal şartlarda kullanıcı web tarayıcısı aracılığıyla server dan istekte bulunur, web uygulaması
bu isteğe bir cevap oluşturur ve çıktısını html formatında kullanıcının tarayıcısında gösterir.
Tabiki bu işlem sırasında sayfanın tekrar yüklenmesi beklenir.
Yani bir işlem gönderilir diğer taraftan cevap beklenir. Ajax client ile server arasında bir nevi motor
görevi sağlayarak, client ile server ın aynı anda çalışmasını sağlamaktadır.  

Eski teknoloji, yeni marifetler...

Ajax bir teknoloji değil HTML,DHTML, DOM (Document Object Model), JavaScript teknolojilerinin ortak kullanımıdır dedik.
Peki herbirinin bütündeki görevleri nelerdir?

HTML, kullanıcı arayüzünün oluşturulması,
DHTML, serverdan alınan cevaba göre güncellenecek alanın oluşturulması(div,span etiketleri yardımıyla)
DOM, eşzamanlı olmayan dataya erişimek,
Javascript, server ve client arasında iletişimi sağlayacak ve diğer tüm teknolojilerin bir bütün olmasını sağlamak

Aslında tüm bu işlerin kalbinde Microsoft un IE 5.0 içine dahil ettiği bir ActiveX objesi
(Microsoft un kullandığı bu nesne daha sonra Netscape ,Safari ,Opera,Firefox tarayıcılarında da kullanılmaya başlanmıştır.)
olan XMLHttpRequest nesnesi vardır.

Nesnenin kullanımı

IE için (Kurulu olan MSXML için 2 ayrı oluşturma yöntemi vardır)

var istek = new ActiveXObject("Microsoft.XMLHTTP");
var istek = new ActiveXObject("Msxml2.XMLHTTP");

Diğer  tarayıcılar için

var istek=new XMLHttpRequest();

Özellikleri

onreadystatechange ................her durum değişiminde ateşlenen olay için event handler
readyState...................durum
0:henüz işlem başlamadı
1:istek gönderiliyor
2:istek gönderildi
3:gönderilen istek gerçekleştiriliyor
4:işlem tamamlandı
responseText...............serverdan dönen verinin string fromatında olması
responseXML ...............dönen verinin DOM yapısında olması
status .......................HTTP durum kodu(200,404,500 vb.)
statusText  ...............http durum kodu ile oluşturulacak mesajın birleştirilmesi

Methodları

abort()  ........................................geçerli isteğin durdurulması
getAllResponseHeaders() ..............tüm başlıklar ad ve değer olarak string formatında döndürülür.
getResponseHeader(“baslikAdi”) ................sadece istenilen header ın ad ve değerini döndürür.Parametre  olarak header ın adını alır.
open(“istekTipi”,”url”,” asynch”,
[“kullaniciAdi”],[“sifre”]) ......................bir bağlantı açılır . istekTipi gönderilecek isteğin tipi GET veya POST, url bağlanılacak adres,
asynch iki değer alır true ya da false , eğer true alırsa işlem asynchronous, false alırsa işlem synchronous gerçekleştirilir.Opsiyonel bir parametredir ve varsayılan değeri true dur. kullaniciAdi ve sifre eğer işlemi gerçekleştirecek adres bir kullanıcı doğrulaması istiyorsa girilir, opsiyoneldir fakat varsayılan bir değere sahip değildir
send(“icerik”) .......................isteği iletir
setRequestHeader(“isim”,”deger”) ...............belirlenen header lara değerleri atanır

Ek olarak overrideMimeType(“icerikTipi”)  dan da bahsetmekte fayda vardır.
Server a istek gönderildikten sonra eğer dönecek veri DOM yapısıyla işlenip
okunacaksa ve de dönen değer text/xml formatında değilse Gecco tabanlı(Netscape,Firefox..)
tarayıcılar hata verecektir. overrideMimeType(“text/xml”) metodu kullanılarak server dan dönen veri tipi
text/xml olmasa bile söz konusu olan tarayıcılar veriyi yakalayacak ve işlemin gerçekleşmesini sağlayacaktır.
Bu durum IE tabanlı tarayıcılarda geçerli değildir ve böyle bir hatayla karşılaşılmamaktadır.

Bu kadar açıklamadan sonra ajax ile ilk uygulamamızı geliştirelim bakalım yukarda sayılan bu teknolojiler
nasıl bir bütün içinde ele alınıp ortaya ajax denen şey : ) çıkıyor.

Oluşturucağımız uygulama sayfamızın bir köşesinde kullanıcılara istedikleri rss yayını yapan siteden haberlere
bakabilecekleri küçük bir box. tabi en önemlisi bu işlemi yaparken sadece ilgili alanın değişmesi ve de sayfanını post etmemesini sağlamak.

Rss hakkında bilgiyi http://www.xml.com/pub/a/2002/12/18/dive-into-xml.html adresinden edinebilirsiniz.

Basitçe uygulamamızın çerçevesini çizersek;

-Kullanıcı gerekli alana rss hizmetini almak istediği adresi yazacak.(bu bir demo olduğu için kullanıcının iyi niyetli olduğu varsayılıyor.)
-İşlem tetiklendiğinde yani onay butonuna basıldığında, XMLHttpRequest nesnesi devreye girecek  
-Parametre olarak alınan adres bir nevi köprü görevi görecek olan ve tüm işlemin gerçekleştirileceği web form a iletilecek.
-Web form verilen adresi alıp cevap olarak xml formatında kendisini döndürecektir.Not
-Dönen veri DOM ile okunup html formatına çevrilerek belirlenen alana yazılacaktır.

Ve sonunda uygulama

Kullanıcı arayüzü

Amaç uygulamanın çalışabilirliğinin testi olduğundan bir textbox ve bir button işimizi görecektir.

<div id="baslik" style="VISIBILITY: hidden">
<div id="icerik" style="VISIBILITY: hidden">
<input onclick="iste()" type="button" value="Getir"> <INPUT id="rss" style="WIDTH: 456px; HEIGHT: 22px" type="text" size="70">

Ajax Framework umuz

<script language=”javascript”>
var icerik='';// dönen cevapla oluturulan html formatındaki veriyi tutacak değşiken
var istek;
var istek=istekOlustur(); // XMLHttpRequest nesnesin bir örneği oluşturuluyor
var link ='rss.aspx'; // köprü vazifesi görecek sayfanın adresi

// XMLHttpRequest nesnesi oluşturuluyor
function istekOlustur(){
var istek=null;
try { // tarayıcı IE ise ve yüklü olan MSXML ye göre nesneyi oluştur
istek=new ActiveXObject( "Msxml2.XMLHTTP");
} catch(microsoft) {
try {
   istek=new ActiveXObject("Microsoft.XMLHTTP");
} catch(digerMicrosoft){
istek=null; // eğer IE değil ise değişkene null ata
}
}
//tarayıcı IE dışında Firefox,Netscape,Opera ise nesneyi oluştur
if(!istek && typeof XMLHttpRequest !="undefined"){
istek=new XMLHttpRequest();
  istek.overrideMimeType("text/xml");//donen değer eğer text/xml formatında değilse taklit  ediliyor.
}
return istek;  //nesneyi döndür
}

//istek gonderiliyor
function iste(){
goster();  // görünür olmayacak şekilde ayarlanan div etiketleri görünür kılınıyor
var adres=document.Form1.rss.value; //kullanıcıdan alınacak rss adresi değişkene atanıyor.gönderilecek //url ye parametre verilerek köprü sayfada yakalanacak ve işlem gerçekleştirilecektir.
document.getElementById("baslik").innerHTML = "Başlık Yükleniyor... "; //istek olarak //gönderilen işlem //süreci boyunca iyi bir kullanıcı etkileşimi için işlemin devam ettiği kullanıcıya bildiriliyor.
document.getElementById("icerik").innerHTML = "İçerik Yükleniyor...”;
if(istek){ //nesne oluşturulmuşsa
istek.open("GET",link + "?adres=" + adres ,true); // bağlantı açılıyor
istek.onreadystatechange = rssYukle; //server a gönderilen işlemin dönüşünde tetiklenecek fonksiyon
istek.send(null); //istek gönderiliyor
}
}

//rss parse edecek fonksiyon
function rssYukle(){
if(istek.readyState == 4){ //işlem tamamlandıysa
if(istek.status == 200){ //hiçbir sorun yoksa xml parse işlemi başlıyor

// rss dökümanında verinin olup olmadığı kontrol ediliyor.

if(istek.responseText.indexOf('invalid')== -1){

//rss parse ediliyor
var dugum=istek.responseXML.documentElement;
//kanal bilgileri
var kanal=dugum.getElementsByTagName('channel').item(0);
var baslik=kanal.getElementsByTagName('title').item(0).firstChild.data;
var adres=kanal.getElementsByTagName('link').item(0).firstChild.data;

haberler="<a href='" + adres + "'>" + baslik + "" //kaynağın kimlik bilgileri

//haberleri listeliyoruz
var haber=kanal.getElementsByTagName('item');
for(var i=0;i <haber.length;i++){
var haberBaslik=haber .getElementsByTagName('title').item(0).firstChild.data;
var haberLink=haber .getElementsByTagName('link').item(0).firstChild.data;
try{
var tarih= "<font color=red>" + haber.getElementsByTagName('pubDate').item(0).firstChild.data + "";

} catch(tarihYok){
var tarih='';
}
icerik +="<li><a href='" + haberLink + "'>" + haberBaslik + "</li>"; //her haber tek tek okutularak html //formatına çevriliyor
}

//içerigi goster
document.getElementById('icerik').innerHTML=icerik; //serverdan gelen ve html ye çevrilen veri gerekli alana //dolduruluyor
document.getElementById('baslik').innerHTML=haberler;
}
} else {
alert('Durum: ' + istek.status);
}
}
}

function goster() {

document.getElementById('baslik').style.visibility='visible'; document.getElementById('icerik').style.visibility='visible';

}

</script>

Köprü vazifesi görecek olan yeni bir web form ekliyoruz(uygulamada rss.aspx olarak adlandırılmıştır.)
formun html kısmına geçerek tüm html tag larını siliyoruz.
yapacağımız tek şey parametre ile gelen adresi alıp bir dataset içine atmak ve daha sonrda onu
.getXml() methodu ile sayfaya yazdırmak

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
Dim adres As String = Trim(Request.QueryString("adres"))
Dim ds As DataSet
ds = New DataSet
ds.ReadXml(adres)
Response.Clear()
Response.ContentType = "text/xml"
Response.Write(ds.GetXml())
Response.End()
End Sub

Ajax mükemmel mi?

Ajax a birde değişik bir taraftan bakarsak;

-back,stop ve refresh butonlarınız ajax kullanılan sayfalarda çalışmayacaktır.
-oluşan sayfa hiçbirzaman doğru bir şekilde print edilmeyecektir
-uygulamalar offline çalışmayacaktır
-yapılan işlemler asla tarayıcınız ın history sine eklenmeyecektir.