Günümüzde server tarafında yükü kullanıcı (client) tarafına aktarmak, Web yazılımı alanındaki en temel hedeflerden biri. XMLHttpRequest objesinin tarayıcılara eklenmesi, sonrasında JavaScript'in geliştirilmesiyle birlikte tarayıcıyı yazılım geliştirme ortamı olarak kullanmak, dolayısıyla server tarafında yapılabilecek işlemleri kullanıcı tarafında yapabilmek mümkün oldu. AJAX kütüphanelerinin yazılması, JQuery gibi frameworklerin geliştirilmesi kullanıcı tarafını çok daha güçlendirdi. Bu gelişmelerde en son nokta, herhalde kompleks kullanıcı kontrollerini (user control) tarayıcıda yaratmak ve gerekli datayı Web Servislerden çekerek, kullancı tarafında formatlayarak sunmak. Bu şekilde, örneğin Microsoft'un önümüzdeki ayda tam sürümü çıkacak AJAX Control Toolkit'ini kullanarak, tamamen servis tabanlı .html (.aspx, .php veya .jsp değil) sayfaları oluşturabilir, gerekli data oluşturma mantığını servera ama hangi datanın alınması gerektiği ve bu datanın nasıl kullanıcıya sunulacağı gibi işlerin arka planını tarayıcı tarafına yerleştirerek dinamik sayfalar yapabiliriz.
Servislerle tarayıcı arasındaki ileitişim formatı olarak günümüzde en çok kullanılan teknolojiler XML ve JSON. Birçok platform (ASP.NET, JAVA, JavaScript ve daha birçoğu) iki formatla da yazılım geliştirebilmemizi mümkün kılan kütüphaneleri ve sınıfları bize sunuyor. Fakat birçok avantajından dolayı JSON ön plana çıkmaya başladı. En önemli avantajlarından biri bandwith'i daha verimli kullanabilmemizi (ki AJAX işlemlerinin asıl amacı) sağlayan yapısı. Yani kısaca bahsedecek olursak XML ile bir datayı:
<Jeep><marka isim="Lincoln"><model isim="navigator">plaka numarası</model></marka></Jeep> şeklinde gösterirken, aynı datanın JSON formatı:
{
"Marka" : "Lincoln.",
"Model" : "Navigator",
"Motor" : "300 HP"
}
şeklinde gösterilebilir. Yukardaki örnekte gönderilen datanın bahsedilen özellik türleri (attribute) artarsa XML datanın büyüklüğü daha da artacaktır.
Şimdi kısaca JSON data nasıl kullanılır ona bakalım:
var jsonObje = {
"JeepSayısı": "2",
"Jeepler":
[
{ "Marka": "Lincoln", "Model": "Navigator", "Motor": "300HP"},
{ "Marka": "Cadillac", "Model": "Escalade", "Motor": "400HP"},
]
};
Yukardaki .js kodunun taslak olarak ne anlama geldiğini şu C# koduyla kolaylıkla anlayabiliriz:
public class Jeepler
{
int JeepSayısı;
List jeepler = new List();
}
public class Jeep
{
string Marka;
string Model;
string Motor;
}
Bu örneğin Object Oriented mantığına ne kadar uygun olduğu tartışılır :) önemli olan açıklayıcı bir örnek verebilmek, tabii ki.
Yani, JSON'da obje oluştururken gerekli datayı {} arasına yazıyoruz. "özellik adı": "özellik değeri" şeklinde bir formatı var. Farklı özellikleri virgül ile ayırıyoruz. [] ise arrayleri göstermek için kullanılıyor. Arrayin içerisinde objeler tanımlamak istersek [{obje formatını uygula}]'ı kullanmamız gerekiyor. Basit bir array tanımlamak isteseydik: [1,2,3,4] şeklinde yapabilirdik (string array'i tanımlamak isteseydik: ["Pazartesi", "Salı"] olurdu).
JSON formatı object oriented bir şekilde datayı manipule edebilmemizi sağlar. Örneğin yukardaki jsonObje için şu .js kodunu yazabiliriz:
var markaIsmi = jsonObje.Jeepler[0].Marka;
alert(markaIsmi);
Şimdi JSON ile ASP.NET AJAX methodlarını (Web Method) nasıl kullanabiliriz ona bakalım. Kodumuzda bilgisayarda çalışan işlemleri (Ctrl+Alt+Delete) ile görebildiğimiz işlemlerin özelliklerini, Web Method ile çevirelim. Sonra bu methodu tarayıcı tarafında JSON ile çağırıp listeleyelim: (Öncelikle VS'de bir web projesi açalım ve App_Code dosyası içerisinde IslemBilgisi.cs dosyasını yaratalım ve aşağıdaki kodu yazalım)
public class IslemBilgisi
{
public string IslemAdı { get; set; }
public long SayfalanmisMemoryBuyuklugu { get; set; }
}
Şimdi Default.aspx.cs dosyasına şunu ekleyelim:
[System.Web.Services.WebMethod]
public static List IslemleriAl()
{
var query = (from p in System.Diagnostics.Process.GetProcesses()
select new IslemBilgisi
{
IslemAdı = p.ProcessName,
SayfalanmisMemoryBuyuklugu = p.PagedMemorySize64
}).ToList();
return query;
}
Dikkat: Method static olmalı
[System.Web.Services.WebMethod], altına yazdığımız methodu tarayıcı tarafından çağırabilmemizi sağlar. Server tarafında yukarıdaki bilgiyi aldıktan sonra şimdi JQuery ile yukardaki datayı JSON formatında alalım (extra bir iş yapmamıza gerek yok. Objeleri List içerisinde çevirdiğimizden dolayı otomatik olarak JSON data geliyor).
$(document).ready(function() {
$.ajax({
type: "POST",
url: "Default.aspx/IslemleriAl",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
success: function(msg) {
var islemBilgisi = msg.d;
for (var i = 0; i < islemBilgisi.length; i++) {
var satir = "Islem Adı: " +
islemBilgisi[i].IslemAdı +
"" +
"Sayfalanmış Memori Buyuklugu: " +
processInfo[i].SayfalanmisMemoryBuyuklugu;
$("#Sonuclar").append("" + satir + "
");
}
}
});
});
Dikkat: Yukarıdaki kodu JQuery için gerekli <script> tagını ekledikten sonra yazalım.
Şimdi kodu inceleyelim. $(document).ready... yazarak DOM yüklenir yüklenmez hangi function'ın çağrılması gerekiyor, onu belirliyoruz. $.ajax, ajax callbackleri (Postback'in tersine tüm sayfayı yenilemeden) yapabilmemizi sağlayan bir method.
type:POST ile HttpPost yapıyoruz. url:Default.aspx/IslemleriAl, ASP.NET'in bize sunduğu çok güzel bir özelliği kullanabilmemizi sağlıyor: Sayfa url'inin arkasına, Web Method'un ismini eklememiz bu methodu çağırabilmemiz için yeterli. contentType ve dataType ile JSON formatında data alınması gerektiğini belirtmiş oluyoruz.
async:true ile asynchronous (arka planda denilebilir) bir şekilde işlemi gerçekleştirmiş oluyoruz. false olsaydı serverdan tüm data gelene kadar sayfadaki tüm işlem donmuş olurdu. success: ile data başarılı bir şekilde geldiğinde, bu datayı formatlayıp sayfaya sunacak function'u belirtmiş oluyoruz.
$("#Sonuclar") ile id'si olan HTML elementini (örnekte <div> elementi) alıp içindeki testini belirliyoruz. for döngüsü içerisinde serverdan List<IslemBilgisi> olarak çevirdiğimiz listenin (JSON formatı olarak array) üzerinden geçiyoruz. Önemli olan nokta ise bu arrayin herbir elementi object olarak gelmiş oluyor. Yani server tarafında IslemBilgisi sınıfında tanımladığımız IslemAdı ve SayfalanmisMemoryBuyuklugu'nu attribute olarak kullanabiliyoruz. $("#Sonuclar").append ile de #Sonuclar div'inin içerisinde (dışına değil) tüm datayı gösterebiliyoruz.
