Google Suggest ve Google Maps gibi bu yeni web uygulamarındaki yaklaşımın iki örneğin kullandığı uygulamaya Ajax adı verilir. Asenkron olarak JavaScript + XML'i kullanır. Bu web ortamında yapılabileceklerin temel değişikliklerini temsil eder.
Ajax'ı Tanımlayalım
Ajax bir teknoloji değildir. Bir kaç teknolojiyi içinde barındırır. Her birinin yeniliklerini ve gelişmelerini birlikte kullanıp yeni ve güçlü bir yol yaratır. Ajax şunları barındırır.
•XHTML ve CSS'i kullanarak standart web temelini sunar.
•Dinamik gösterim ve Document Object Modeli (DOM) u kullanarak dinamik etkileşim.
•XMLHttpRequest'i kullanarak asenkron (eş zamanlı olmayan) veriyi tekrar alır.
•ve JavaScript her şeyi bind edebilir.
Klasik web uygulamaları şu şekilde çalışır: Kullanıcıların çoğu uygulamanın ara yüzünde bir olayın olmasını sağlayarak web sunucusuna bir HTTPRequest gönderir. Sunucu bazı işlemler yapar (data alır, çeşitli sistemlerle etkileşime girer...) ve istemcinin sayfasına HTML döndürür.
Klasik Web uygulaması modelinde, sunucu kendine ait işlemler yaparken kullanıcının yaptığı tek şey beklemek oluyor. Uygulamayı kullanırken attığı her adımda bekliyor. Aslında eğer web'i web uygulamaları için en başından inşa etseydik , kullanıcıları bekletmezdik. Öncelikle bir ara yüz yüklenir daha sonra kullanıcı uygulama ile etkileşime girer ve ihtiyacı olan şeyleri sunucudan alır. Peki neden kullanıcı uygulamanın sunucuya gitmesini seyretmek zorunda?
Ajak'ın Farklı Yönleri
Bir Ajax uygulaması kullanıcı ve sunucu arasında bir Ajax Motoru kullanarak Web üzerinde sunucu-istemci arasında sürekli gidip gelmesini ortadan kaldırır. Bir web sayfasını açtığınızda bir oturum açarsanız bu sırada bir web sayfası yüklenir. İşte bu yüklenen web sayfası JavaScript ile yazılmış ve gizli bir frame içine yerleştirilmiş Ajax Motorunu yükler.Ajax motoru sunucu ile iletişimi bağımsızdır. Böylece kullanıcı asla boş browser penceresine ve kum saati ikonuna bakmaz. Sunucunun gerekli işlemleri yapmasını bekler.
Bu yeni web yaklaşımında her bir kullanıcının yarattığı olay normal olarak HTTP isteği yaratır ve bu isteği Ajax motoru olarak adlandırılan JavaScript'den alır. Kullanıcının yarattığı herhangi bir isteğin cevabı için -basit veri geçerliliği, hafızadaki veriyi düzenlemek- sunucuya gitmesi gerekmez. Eğer Ajax motoru herhangi bir cevap için sunucuya ihtiyaç duyarsa- herhangi bir verinin işlenmesi, ek kullanıcı ara yüz kodlarının yüklenmesi, yeni verinin alınması gibi- Ajax motoru tüm bu istekleri asenkron biçimde, genellikle XML kullanarak, kullanıcının uygulama ile etkileşiminde herhangi bir gecikme olmaksızın yerine getirir.
Kimler Kullanıyor
Google Ajax yaklaşımının gelişmesi için büyük yatırımlar yaptı. Google'ın geçen yıl tanıttığı önemli ürünlerin hepsi, Orkut,Gmail, Google Groups, Google Suggest ve Google Maps, ajax yaklaşımı kullanılarak geliştirilmiştir. Diğerler örnekler ise; Fickr Ajax tabanlıdır ve Amazon'un A9.com arama motoru da aynı teknik kullanılarak yazılmıştır.
Yukarıda bahsettiğimiz örnekler Ajax'ın sadece teknik bir terim olmadığını aynı zamanda gerçek hayata (real-world) uygun uygulamalar için de pratik olduğunu gösterir. Ajax uygulamalarını buyüklüğü değişen her tür uygulamada; Google Suggest gibi basit bir uygulamdan Google Maps gibi karışık bir uygulamaya kadar kullanabilirsiniz.
Basit bir Ajax örneği yapalım. bu örnekte ajax kullanmak için sayfa ve web.config ayarlarının nasıl olması gerektiğini ve nasıl çalıştığını basit bir şekilde bulabilirsiniz.
HttpHandler kurulumu
HttpHandler'ın nasıl çalıştığı hakkında detaylı bilgi vermeden ASP.NET isteklerini nasıl karşıladığını örnekle anlatalım. Örneğin; *.aspx sayfaları için tüm istekler (request) System.Web.UI.PageHandlerFactory sınıfı tarafından kontrol edilip yönetilir. Benzer şekilde bizde web.config sayfasında yapacağımız ekleme ile ajax/*.ashx'a yapılan istekler Ajax.PageHandlerFactory sınıfı ile kontrol edilecektir.
| <httpHandlers> <add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory, Ajax" /> </httpHandlers> |
Yukarıdaki kod parçası Ajax.PageHandlerFactory sınıfı tarafından ele alınan (ajax/*.ashx) ile belirtilmiş path'i,varsayılan handler factory yerine,herhangi bir request ile illişkilendirir. Bunun için herhangi bir ajax dizini yaratmanıza gerek yoktur. Bu, Diğer HttpHandler sınıfları .ashx eklentilerini kendi alt dizinleri ile kullanılabilsin diye söylencesel(mythical) basit bir dizindir.
Sayfa Ayarları
Artık kod yazmaya hazırız.Bunun için yeni bir sayfa yaratın veya varolan bir sayfayı codebehind'da açın. Aşağıdaki kodu codebehind'a ekleyin.
public class Sample : System.Web.UI.Page { private void Page_Load(object sender, System.EventArgs e) { Ajax.Utility.RegisterTypeForAjax(typeof(Sample)); } |
İstemci taraflı çağrıda eş zamanlı olmayacak bir şekilde sunucu taraflı bir fonksiyon oluşturalım. Code behind'da aşağıdaki fonksiyonu yazalım.
[Ajax.AjaxMethod()] public string HelloServerSide(string Name, string Surname) { return "Merhaba! "+ Name + " " +Surname; } |
Bu fonksiyon Ajax.AjaxMethod özelliğine sahiptir. Bu özellik, istemci tarafından bu tür metotların çağrılabilmesi için JavaScript vekaletleri yaratmak için kullanılır.
En son adımda, istemci tarafında JavaScript kullanılarak sunucu tarafında kullanacağımız metodu yazacağız.
| <body> <form id="Form1" method="post" runat="server"> <script language="javascript"> function HelloClientSide(result) { if(result.error != null) { alert(result.error); return; } document.getElementById("hello").innerHTML = result.value; } </script> Adı:<asp:TextBox id="txtname" runat="server"></asp:TextBox> Soyadı:<asp:TextBox id="txtsurname" runat="server"></asp:TextBox> <input type="button" id="submit" value="ClientSubmit" onclick="Sample.HelloServerSide(txtname.value,txtsurname.value,HelloClientSide)"> <asp:Button id="Button1" runat="server" Text="ServerSubmit"></asp:Button> </form> Client Side Result: <span id="hello" style="COLOR: #993300; FONT-FAMILY: Tahoma"></span><br> Server Side Result: <asp:Label id="lblserverside" runat="server" style="COLOR: #993300; FONT-FAMILY: Tahoma"></asp:Label> </body> |
Yukarıda yazdığım kodun design tarafında görüntüsü şu şekildededir.
Burada iki tane TextBox kontrolü ve 2 tane'de Button vardır. Bu butonlardan ClientSubmit butonu sunucu taraflı çalışmayacak, diğeri ise sunucu tarafında çalışacak şekilde tasarlanmıştır. OnClick() olayı gerçekleştirildiği zaman sunucu tarafında Sample.HelloServerSide metodu çağrılacaktır ve HelloClientSide JavaScript fonksiyonuna "result" değişkenini döndürecektir. TextBox'lara değerler girip ClientSubmit() butonuna tıkladığı zaman sadece çalışması gereken metot çalışacak ve geriye Merhaba! yazısı ile birlikte TextBox kontrollerine yazdığınız değerler dönecektir. Yani tüm sayfadaki herşey sunucuya gidip gelmez, sadece gerekli kontroller ve metotlar çalışır. Böylece sunucu gereksiz yere çalışmaz. Sizde ServerSide ve ClientSide butonunu tıklayarak işlemlerin nasıl gerçekleştiğini daha iyi anlayabilirsiniz. Aşağıda bu uygulama ile ilgili örnek kod verilmiştir. Uygulama içindeki bin dizininde yer alan Ajax.dll'i de bulunmaktadır. Eğer Ajax'ı web uygulamasında kullanacaksanız bu dll'i projenize eklemeyi unutmayın.
