Web ortamında masaüstü deneyimi oluşturabilmek belki de Ajax için kullanılabilecek en basit tanımlama olabilir. Ajax: HTML, DHTML, DOM , 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 , 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ı 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 olan XMLHttpRequest nesnesi vardır. Nesnenin kullanımı IE için (Kurulu olan MSXML için 2 ayrı oluşturma yöntemi vardır) Kod: var istek = new ActiveXObject ; var istek = new ActiveXObject("Msxml2. XMLHTTP"); Diğer tarayıcılar için Kod: 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 ... sadece istenilen header ın ad ve değerini döndürür. Parametre olarak header ın adını alır. open ... 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 ... isteği iletir setRequestHeader ... belirlenen header lara değerleri atanır Ek olarak overrideMimeType 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ı tarayıcılar hata verecektir. overrideMimeType 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. -İş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. Kod: <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"> Mr.

Ajax Framework umuz Kod: <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 catch { try catch } //tarayıcı IE dışında Firefox, Netscape, Opera ise nesneyi oluştur if 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 . 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 . innerHTML = "İçerik Yükleniyor..."; if } // // //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 -1){ //rss parse ediliyor var dugum=istek. responseXML. documentElement; //kanal bilgileri var kanal=dugum. getElementsByTagName . item(0); var baslik=kanal. getElementsByTagName . item(0). firstChild. data; var adres=kanal. getElementsByTagName . item(0). firstChild. data; haberler="<a href='" + adres + "'>" + baslik + "" //kaynağın kimlik bilgileri //haberleri listeliyoruz var haber=kanal. getElementsByTagName ; for(var i=0;i<haber. length;i++){ var haberBaslik=haber. getElementsByTagName . item(0). firstChild. data; var haberLink=haber. getElementsByTagName . item(0). firstChild. data; try catch icerik +="<li><a href='" + haberLink + "'>" + haberBaslik + "</li>"; //her haber tek tek okutularak html //formatına çevriliyor } //içerigi goster document. getElementById . innerHTML=icerik; //serverdan gelen ve html ye çevrilen veri gerekli alana //dolduruluyor document. getElementById . innerHTML=haberler; } } else } } // // function goster // </script> Köprü vazifesi görecek olan yeni bir web form ekliyoruz 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 Kod: Private Sub Page_Load Handles MyBase. Load Dim adres As String = Trim(Request. QueryString Dim ds As DataSet ds = New DataSet ds. ReadXml 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. Mr.666 1337