AJAX nedir?
Normalde asp.net sayfalarımızda sayfa ilk yüklendiğinde sayfamız tamamen serverdan isteniyor ve server bize sayfaları hmtl,javascript karışımı bir şekilde gönderiyordu. Sitemize bir server kontrolü yerleştirdiğimizde ve bu server kontrolünün servera istekte bulunmasıyla sayfamızda bazı veriler servera gönderiliyor ve verilere göre sayfamız kullanıcının tarayıcısında yorumlanacak şekilde tekrar gönderiliyordu. Bu işleme Post-Back deniyordu. Post-Back işleminde bir butonun ya da herhangi server kontrolünün post back işlemini tetiklemesi sayfamızın tamamen yenilenmesine yol açıyordu. Özellikle form sayfalarında her kontrolün yeni verilere ihtiyaç duymasıyla sayfa post-back işlemlerinden dolayı yenileme işlemini çok sık yapıyor ve bu da can sıkıcı bir durum olarak görünüyordu. AJAX ile bu durum değişti çünkü klasik request-response yapısı yine çalışıyordu fakat dili oluşturanlar serverlardaki frameworklere ve tarayıcılara Asenkron cevaplama(Asynchronous Response) veAsenkron İstek yapma( Asynchronous Request) kabiliyetini eklediler. Böylece konuyu açacak olursak , sayfada kısmi istekler oluşabiliyor aynı zamanda alınan kısmi cevaplarla sayfamızın bir bölümü güncellenmiş oluyor. Burada AJAX arkaplanda iki teknolojiyi kullanıyor. Birincisi XMLHttpRequest nesnesi.Bu nesne tarayıcının server ile haberleşmesini sağlıyor. Bu nesne aslında IE5 sürümünden beri kullanılıyordu. (MSXML ActiveX Component). Tabiki asıl bileşen ve ikinci teknolojimiz JavaScript. Bu nesne de haberleşme esnasında mesajların paketlenmesini sağlıyor. Diğer yararlanılan teknolojiler ise DTHML, DOM ve JSON. AJAX dilden bağımsız bir teknoloji. Yani AJAXı JSP, PHP ya da ASP.NET ile kullanabiliyoruz. (20 yıllık hackerlar AJAXı Google tarafında geliştiriyorlar tabiki J ) Ama dillerin kendilerine göre Frameworkleri var AJAX üzerine. ASP.net 3.5 ile de Visual Studio IDE yi kullanacak olursak ASP.net sitelerimizin geliştirme sürecinde TOOLBOX içerisinde Ajax Extensions hazır halde geliyor. Tabiki serverda .net framework 3.5 bulunuyorsa sitemiz AJAX için hazır demektir. Ayrıca MS tarafından geliştirilen kodlarını görebildiğiniz ama gelişimine katkıda bulunamadığınız bir AJAX Toolkit, CodePlex üzerinden ücretsiz indirilebiliyor. Şimdi hikaye kısmını başarıyla tamamladıktan sonra Microsoft’un bizim için hazırlamış olduğu server kısmı için kontrolleri biraz inceleyelim.
AJAX Server Kontrolleri
ScriptManager: Her asp.net ajax özelliği aktif sayfada bulunması gereken bir kontrol. Script Manager client bilgisayarına göderilecek olan javascriptleri göndermekle görevlidir. Her sayfada n fazla bir adet ScriptManager olabilir.
ScriptManagerProxy: AltSayfada yada iç sayfada SciriptManagerin yaptığı işi yapar. Eğer master page içinde ScriptManager tanımlanmışsa master page üzerinden türetilmiş sayfalarda ScriptManagerProxy tanımlanmalıdır.
Timer: Timer kontrolü belirli zaman aralıklarında client-tabanlı olayları gerçekleştirmek için kullanılır. Update ya da refresh gibi işlemler örnektir. UpdatePanel içinde kullanılır ve OnTick ile her tick için yapılması gereken event tanımlanabilir. Interval özelliği için 1000 = 1 sn demektir.
UpdatePanel: Bu kontrol asp.net ajax için bir kontejnır pozisyonundadır. Kısmi postback işlemlerinde sayfanın tamamını postback etmeden güncelleme işlemini ScriptManager ile haberleşerek yürütür.
UpdateProgress: Bu kontrol ajax kısmi postback işlemleri yaparken son kullanıcıya görsel bir öğe gösterilmesine izin verir. Uzun süren işlemlerde kullanmak mantıklıdır. Bir yazı hareketli bir resim ya da daha farklı etkinlikler düzenlenebilir. Hayal gücünüze bırakılmıştır. İçerisinde tüm asp.net kontrollerini de kullanabiliyoruz.
Burada en basit olarak yapılabilecek bir ajax saat uygulamasının kodlarına yer veriyorum.
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="saat" runat="server" ></asp:Label>
<asp:Timer ID="Timer1" runat="server" Interval="1000" OnTick="timerTicked">
</asp:Timer>
</ContentTemplate>
</asp:UpdatePanel>
<script runat="server" >
protected void page_Load( object sender, EventArgs e )
{
saat.Text = System.DateTime.Now.ToString();
}
protected void timerTicked( object sender, EventArgs e )
{
saat.Text = System.DateTime.Now.ToString();
}
</script>
</div>
Burada kod ve .aspx sayfalarını ayırmak yerine aspx sayfasında script tagları arasına yazdım kodları. Bu aspx.cs dosyasında yazmakla aynı amaca hizmet ediyor. (NET2003 için varsayılan kodlama bu şekildeydi.) Benim bu yöntemi seçme sebebim ise makalede kodları bütün halinde gösterebilmek.
Burada dikkat edersek ScRiptManager kontrolüne sadece sayfamızda yer verdik.Ajax kullanacağımız kontrolleri updatepanel içerisindeki ContentTemplate içerisine yazdık. AJAX Timer ‘ın Interval özelliği sayesinde son kullanıcının bilgisayarında her saniyede bir serverdan saati sormasını tetikledik.
Örnek:2 Burada da butonla tetikleyerek saati istedik ama sayfada tamamıyle bir postback gerçekleşmediğine dikkat edin.
<div>
<!-- Script Manager her ajax sayfasında bulunmak zorunda. -->
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<!-- update panel konteynırımız -->
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<br />
<br />
<asp:Button ID="Button1" runat="server" Text="Saati Ajax ile getir" onclick="ajaxla" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
<script runat="server">
protected void ajaxla( object sender, EventArgs e )
{
Label1.Text = System.DateTime.Now.ToString();
}
</script>
Burada UpdatePanel içerisinde buton kontrolüne de yer verdik. UpdatePanel içerisinde Triggers kısmında dışarıda tanımladığımış olduğumuz butonları da ajax update panelimiz için tetikleyici olarak kullanabiliryoruz. Aşağıdaki örnekte bu şekilde bir kullanım söz konusu:
Bu örnekte senaryoyu biraz daha genişlettim ve veritabanından verileri ajax Update panel içerisinde çekmek istedim. UpdateProgress kontrolünün de nasıl kullanılacağına güzel bir örnek oluşturuyor. Butona basıldığında 10 saniye kadar bekleme olacaktır bu da gerçek hayatta karşılaşabileceğimiz bir senaryo. Verilerin serverdan yüklenmesi uzun sürüyor olabilir ayrıca sorgunun da çok komplez bir sorgu olduğunu varsayabiliriz. Bunu görebilmek için ben ipliği 10 saniye kadar beklettim.
<div>
<asp:scriptmanager ID="Scriptmanager1" runat="server"></asp:scriptmanager>
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
Güncelleme yapılıyor...
<asp:Image runat="server" ID="updatePic" ImageUrl="resim.jpg" />
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server">
</asp:GridView>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="click" />
</Triggers>
</asp:UpdatePanel>
<asp:Button ID="Button1" runat="server" OnClick="getir" Text="Button" />
<script runat="server">
protected void getir( object sender, EventArgs e )
{
System.Threading.Thread.Sleep( 10000 );
System.Data.SqlClient.SqlConnection con = new System.Data.SqlClient.SqlConnection(@"Data Source=ATCI-LAPTOP\SQLEXPRESS;Initial Catalog=siteDB;Integrated Security=True");
System.Data.SqlClient.SqlCommand cmd = new System.Data.SqlClient.SqlCommand();
cmd.Connection = con;
cmd.CommandType = System.Data.CommandType.Text;
cmd.CommandText = "Select otomobil.ID, otomobil.MarkaAdi, otomobil.PlakaNo from otomobil ";
System.Data.SqlClient.SqlDataAdapter adp = new System.Data.SqlClient.SqlDataAdapter( cmd );
System.Data.DataSet ds = new System.Data.DataSet();
con.Open();
adp.Fill( ds );
GridView1.DataSource = ds;
GridView1.DataBind();
}
</script>
</div>
Çoklu UpdatePanel Kullanımı
Diğer bir konu ise çoklu UpdatePanel kullanımı. AJAX tekniğini sayfalarımızda kullanmamızın sebeplerinden en önemlisi sayfada kısmi postback işlemlerine izin vemesiydi. Birden fazla UpdatePanel kullanımında dikkat edilmesi gereken noktalardan en önemlisi yine ScriptManage nesnesinin tekrar yazılmaması gerektiği. Bir sayfada bir tane ScriptManager olmalı. Diğer bir konuda butonların tetiklenmesi sırasında birkaç noktaya dikkat etmek gerekli.
<asp:UpdatePanel UpdateMode="Conditional" ID="UpdatePanel2" runat="server">
Burada gördüğümüz gibi aslında UpdatePanel in UpdateMode adında bir özelliği daha var. Bu özellik biraz tetiklenme şekli hakkında bilgi veriyor. Eğer herhangi bir butonun yada tetikleyicinin UpdatePaneli Triggers bölümünde yer almadan tetikleyebilmesini istiyorsak UpdateMode=”Always” modunda olmalı. Varsayılan olarak da Always modunda geliyor.
Aşağıdaki örneğe bakalım.
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel UpdateMode="Always" ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="Label1" runat="server"></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1"
EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<!-- update panel varsyılan olarak Update Mod olarak always dir
Eğer sadece kendi triggerleri ile tetiklenmesini istersek updateMod=Conditional olarak değiştirmeliyiz.
-->
<asp:UpdatePanel UpdateMode="Conditional" ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:Label ID="Label2" runat="server"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<br />
<br />
<asp:Button ID="Button1" runat="server"
Text="Click to initiate async request"
OnClick="Button1_Click" />
<script runat="server">
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = "Tetiklenme zamanı: " + DateTime.Now;
Label2.Text = "Tetiklenme zamanı: " + DateTime.Now;
}
</script>
</div>
Bu örnekte eğer UpdatePanel kontrollerinin her ikisi de UpdateMode=”Always” olarak ayarlanmış olsaydı Butona tıklandığında her iki label kontrolünde de zaman güncellenecekti. Fakat şu anki kodlarda UpdatePanel2 sadece kendi Triggers bölgesinde tanımlanmış olan tetikleyicilerle tetiklenecektir. Ki şu an bir tetikleyici tanımlanmadığı için örnekte hiçbir zaman tetiklenemeyecektir.
Sonuç
AJAX konusunda hızlı bir başlangıç yapmış olduk. Bu kısımım başarıyla anlaşılması web sayfalarımızda AJAX kullanmak için bir başlangıç olabilir. Makaledeki örnekleri uygularken tarayıcıda gördüğümüz sayfaların kaynak kodlarına da bakılması html ve JavaScript tarafında da neler döndüğünü görmek açısından yararlı olabilir. Çünkü ASP.NET bize arka tarafta birçok kolaylık sağlıyor ve JavaScript kısmını tamamen kendisi hallediyor diyebiliriz. Bir başka makalede görüşmek üzere.
makalenin pdf versiyonu
Yazılar