Gel de Öğrenme! : jQuery Ajax
Bu makalenin amacı jQuery ile ajax kullanımını en ince ayrıntısına kadar öğrenmek. Öğrenmeden kastım proje içinde kullanabilmek. jQuery ve server tarafında asp.net kullanacağım. Yazıyı anlayabilmek için genel jQuery ve asp.net bilgisine sahip olmak yeterlidir.
Proje Oluşturma
Önce projemizi oluşturalım. Visual Studio 2010′da “New Project” ile boş bir web projesi ekliyoruz.
Ben tüm geliştirmemi c# ile yaparım. Yandaki fotoğraftaki gibi projemizi oluşturuyoruz. Burada .Net sadece merkezde kullanmak için. İlgili asp.net sayfaları yerine kendi kullandığınız dili rahatlıkla kullanabilirsiniz. Her zaman söylerim “en iyi yazılım dili, en iyi bildiğin dildir”.
Projemizi oluşturduktan sonra, öncelikle ne yapacağız bunu bir planlayalım. Benim bu örnekte hedeflediğim ana konular şu şekilde:
- Ekrana basit bir mesaj yazan temel uygulama (simple_ajax.aspx sayfası içinde)
- $.ajax metodlarını işleyeceğimiz açıklamalı bir örnek.(edu.aspx)
- Ajax ile form gönderme işlemi. (formpost.aspx)
Planımız bu şekilde, başlayalım…
Öncelikle projeme ilgili dosyaları ekleyeceğim. Bu örnek için şöyle bir yol izleyeceğim. Her dosya adında bir javascript dosyasıda ekleyeceğim ki anlaşılır olsun. Projemin bu aşamasının ekran görüntüsü aşağıda.(En son tüm kodları yayınlayacağım.)
Boş dosyalarımızı oluşturduktan sonra, sırasıyla örneklerimize başlayalım.
Temel Ajax Komutları (simple_ajax.aspx)
Yukarıdaki ekran görüntüsünde gördüğümüz gibi VS 2010′da yeni bir web projesi eklediğimizde Script klasörü altında jQuery’nin son sürüm dosyaları yükleniyor. Eğer siz farklı bir versiyonda bu dosyaları göremiyorsanız jQuery resmi web sitesinden indirebilirsiniz.
Tüm örneklerde ajax betiklerinin çağıracağı dosyaları xhr klasörü altında toplayacağım. Ayrıca dosya tipi olarak “Generic Handler” kullanacağım. Bu dosyaların aspx’den tek farkı sadece kodda ürettiğimiz html’i ekrana döndürmesi. Ekstra kod ya da tag barındırmıyor. Ajax geri dönüşleri için ideal. Gözünüz korkmasın, kullanımı çok basit.
Önce bu dosya içinde bir butona basınca ekrana “Merhaba” mesajını döndürmesini sağlayalım.
Önce xhr klasörü altına “simple_1.ashx” adında dosyamızı ekliyoruz.
İçeriği aşağıdaki gibi:
[code lang="csharp"]
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
context.Response.Write("Merhaba");
}
[/code]
ContentType ile geri dönüş tipimizin basit html olduğunu belirttik. Aslında projemizi çalıştırdığımızda ve bu ashx dosyasını başlangıç sayfası yaptığımızda ekrana sadece “Merhaba” yazdığını görebiliriz:
Şimdi javascript kodumuzu yazmaya başlayalım. simple_ajax.aspx dosyası içine koyacağımız bir linke basınca ekrana “Merhaba” mesajını getirmeye çalışacağız. HTML kodumuz:
[code lang="html"]
Basit Mesaj Çıkart!
[/code]
Javascript kodumuz, simple_ajax.js içine yazıyoruz.
[code lang="javascript"]
$(document).ready(function () {
$("#test1").click(function () {
$.ajax({
url: 'xhr/simple_1.ashx',
success: function (data) {
alert(data);
}
});
return false;
});
});
[/code]
Eğer ilk defa jQuery ile çalışıyorsanız yukarıdaki kodda anlamakta zorlanacağınız alanlar olabilir. Ben sadece iki satırı açıklayacağım, diğer bölümler belki jQuery giriş makale konusu olabilir.
1.satırdaki $(document).ready(function ()… tanımı jQuery’ye has onload fonksiyonuna karşılık gelen bir ifadedir. Yani html sayfası yüklendiği anda buradaki javascript komutları çalıştırılır.
3.satırdaki $(“#test1″).click ifadesi id değeri text1 olan nesnenin click olayına bir atama yaptığımızı gösterir. Bu a nesnesi olabileceği gibi bir image ya da div’ de olabilir. Burada ince bir nokta var. Sona yazdığım return false ifadesi nesnemiz bir anchor yani “a” ise, standart click işlemini iptal eder. Yani href özelliğinde yazan sayfa adresine yönlendirilme yapılmaz.
Asıl konumuza gelirsek yukarıdaki örnekte $.ajax fonksiyonu ile ajax dünyasına adım attık. Kullandığımız bir kaç özellik aslında anlaşılacağı üzere şöyle:
url: Bu parametre ile hangi sayfanın çağırılacağını belirtiyoruz.
success: Bu özelliğe atanan fonksiyon ile geri dönen değeri alıp ekrana alert ile gönderdik.
Dikkat ederseniz burada sayfa çağırma işlemi için GET ya da POST metodumu kullanılacak belirtmedik. Şimdi bunu öğrenelim. Bir adım daha ileri gidip ajax isteklerimizi ve geri dönüşleri takip etmeyi öğreneceğiz. Bunun için Firefox kurup, eklenti olarak Firebug’ı kurmalıyız. Bunları edindikten sonra sayfamızı firefox’ta çalıştırıp firebug ile giden-gelen dataya bakalım.
Firebug’ı ilk defa kullananlar için şunu belirtelim. Eklentiyi çalıştırmak için F12 tuşuna ya da pencerenin sağ altında beliren böcek simgesine tıklıyoruz. Bundan sonra ajax takipi için yukarıda ki fotoğrafta olduğu gibi “Net” başlığının yanındaki ok işaretine basıp, Etkin seçeneğini seçmemiz gerekiyor. Ardından eklentimiz isteiğimiz gibi çalışmaya başlayacaktır. Firebug olmasa Firefox’u asla kullanmayacağımı da satır arasında belirtmek istiyorum.
Yanıt sekmesine tıkladığımızda sadece “Merhaba” kelimesinin yazdığını görebiliriz. Bu basit örneğimiz bu kadar.
$.ajax metodları (edu.aspx)
contentType: Gönderilen verinin tipini belirtir. Bazı durumlarda json,xml ya da html olarak belirtmek gerekebilir.
dataType: Server tarafından dönen verinin tipidir. JSon, HTML, Script, Xml olabilir.
cache: Bu çok kullanılabilecek bir özellik. Browserlar genellikle ajax için cache tutma eğilimindedir. Ne var ki bazı durumlarda bunu istemeyiz. İşte bu özelliği “false” yaparak cache’i devre dışı bırakabiliriz.
beforeSend: Benim en çok kullandığım fonksiyonlardan biridir. Ajax ile istekte bulunmadan önce çalışmasını istediğiniz kodlar varsa bu fonksiyon altına yazabilirsiniz.
timeout: Önceden buyana, tüm request işlemlerinde bir timeout sınırı vardır. Eğer serverdan çağırdığımız data yüklüyse ve timeout süresini uzatmak istersek bu özelliği kullanmamız yeterlidir. Saniye cinsinden verilir.
type: Temelde browser tarafından baktığımızda ajax bir post işlemidir. Post işleminin 2 tipte yapıldığını belirtmiştik. POST ve GET tipleri. Bazı durumlarda standart GET metodu yerine POST kullanmak istersek bu parametre aracılığı ile bunu değiştirebiliriz.
Temel olarak en çok kullanabileceğimiz özellikler bunlar. Şimdi örneklerimize geçelim.
İlk örneğimiz, “beforeSend” ile ilgili olacak. Önce xhr klasörü altına edu1.ashx dosyasını ekliyoruz. İçeriği aşağıdaki gibi.
[code lang="csharp"]
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
System.Threading.Thread.Sleep(5000);
context.Response.Write("Merhaba "+DateTime.Now.ToString("dd.MM.yyyy HH:mm"));
}
[/code]
Bu kod, 5 saniye bekledikten sonra geri Merhaba ve o anki zaman bilgisini dönüyor.edu1.ashx sayfasını çağıran javascript kodunun ilk halide şu şekilde.
[code lang="javascript"]
$(document).ready(function () {
$("#eduBStest").click(function () {
$.ajax({
url: 'xhr/edu1.ashx',
beforeSend: function (data) {
$("#log1").append("Gönderim başlatılıyor
");
},
success: function (data) {
$("#log1").append("Gönderim bitti. Gelen data:"+data+"
");
}
});
return false;
});
});
[/code]
HTML Kod:
[code lang="html"]
[/code]
Html kodda belirtilen “eduBStest” id’li linke basınca yukarıda verdiğimiz javascript kodu çalışacaktır.
Bu kodda öncekinden farklı şekilde beforeSend fonksiyonu eklenmiş durumda. Şu an yaptığımız ajax gönderimine başlamadan önce “log1″ id’li div içine “Gönderim Başlıyor” mesajı yazmak ve aynı şekilde gönderim tamamlandığında dönen datayı da eklemek. Linke tıkladıktan sonra 5 saniye bekleyecek ve ardından dönen datayı div içine yazacaktır.
Bu örneği çalıştırdıktan sonra F5 ile browserı refresh ettiğimizde ve tekrar denediğimizde, 5 sn bekleme süresinin kaybolduğunu ve hemen bir değerin ekrana yazıldığını görebiliriz. Muhtemelen cache sorunu oluştu demektir ve hemen cache parametremizi devreye alabiliriz.
Yeni javascript kodumuz şu şekilde olacaktır.
[code lang="javascript"]
$(document).ready(function () {
$("#eduBStest").click(function () {
$.ajax({
cache:false,
url: 'xhr/edu1.ashx',
beforeSend: function (data) {
$("#log1").append("Gönderim başlatılıyor
");
},
success: function (data) {
$("#log1").append("Gönderim bitti. Gelen data:"+data+"
");
}
});
return false;
});
});
[/code]
cache ifadesini “false” değeri ile ekleyince sorunumuz ortadan kalktı.
type metodu ile ilgili örnek
Şimdi ileride kesinlikle ihtiyacınız olacağını düşündüğüm “type” metodu ile ilgili bir örneğe geçiş yapalım.
Yine xhr klasörü altına edu2.ashx adında bir dosya ekleyelim. Dosyamızın kodu şu şekilde:
[code lang="csharp"]
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
context.Response.Write("Metod: " + context.Request.HttpMethod);
}
[/code]
HTML Kodumuz:
[code lang="html"]
type="POST"
POST metodu ile istekte bulun!
type="GET"
[/code]
Javascript Kodumuz:
[code lang="javascript"]
$("#eduPostTest").click(function () {
$.ajax({
cache: false,
type: 'POST',
url: 'xhr/edu2.ashx',
beforeSend: function (data) {
$("#log2").append("
Post isteği gönderildi
");
},
success: function (data) {
$("#log2").append("Gönderim bitti.Dönen cevap:" + data + "
");
}
});
return false;
});
$("#eduGetTest").click(function () {
$.ajax({
cache: false,
type: 'GET',
url: 'xhr/edu2.ashx',
beforeSend: function (data) {
$("#log3").append("
GET isteği gönderildi
");
},
success: function (data) {
$("#log3").append("Gönderim bitti.Dönen cevap:" + data + "
");
}
});
return false;
});
[/code]
İlk örnekte yaptığımız gibi ilgili linklerin click event’ lerini özelleştirdik ve edu2.ashx dosyasına yönlendirdik. Bu dosya sadece kendisine gelen isteğin metod tipini geri döndürüyor.
Böylece az-çok bir şeylerin altından kalkabilir duruma geldik. Temel metodları öğrendik. Şimdi ufak bir form işlemi yapalım.
Ajax ile form gönderme işlemi. (formpost.aspx)
Öncelikle html kodumuz aşağıdaki gibi:
[code lang="html"]
Form Gönderme Örneği
[/code]
Javascript Kodu:
[code lang="javascript"]
$(document).ready(function () {
$('#demoForm').submit(function (e) {
$.ajax({
type: "POST",
url: "xhr/saveform.aspx?t=js",
data: $('#demoForm').serialize(),
dataType: "html",
cache: false,
contentType: "application/x-www-form-urlencoded; charset=utf-8",
success: function (msg) {
alert(msg);
}
});
e.preventDefault();
});
});
[/code]
Yine ajax metodu kullanıyoruz ama burada ince bir kaç nokta var. Öncelikle “data” değişkeni ile form içeriğindeki verileri göndermemiz gerekiyor. Bunun için,
“data: $(‘#demoForm’).serialize()” kodunu kullanıyoruz. Bu jQuery’nin bize sağladığı bir kolaylık. id’sini verdiğimiz form içindeki değerleri serialize ederek form tipine dönüştürüyor. Böylece saveform.aspx içindeki kodlar hem standart form post işlemi ile hem de ajax post ile çalışıyor. Yani yazdığımız bu kod javascript motoru disable edilmiş bir tarayıcıda da rahatlıkla çalışır.
Son olarak saveform.aspx kodlarımıza bakalım:
[code lang="csharp"]
protected void Page_Load(object sender, EventArgs e)
{
string namesurname = Request.Form["txtNameSurname"];
string phone = Request.Form["txtPhone"];
Response.Write("Ad soyad:"+namesurname+" - Telefon:"+phone);
Response.Flush();
Response.End();
}
[/code]
Mükemmel! Artık ajax projelerimizin vazgeçilmez bir parçası olabilir.
Biraz Felsefe…
Her işte olduğu gibi bu sektörde ve meslekte de planlama çok önemlidir. Ajax hayatı kolaylaştıran bir teknolojidir ama bilinçsiz kullanım içinden çıkılamayacak problemlere neden olabilir. Bu nedenle ajax yöntemine tam olarak haklim oluncaya kadar bildiğimiz şekilde kodlarımızı yazmaya devam edelim derim. Öncelikle güvenlik kaygıları yüksek olan işlerde bu şekilde düz ajax metodları kullanmak tehlikeli olabilir.
Ne yaptığımızı, nasıl yaptığımızı tam olarak öğrenip hakim olmadan çok karmaşık projelerde ajax kullanmaya başlamayalım.
AJAX, aslında bir yöntemdir, teknolojidir. Ne jQuery ne de Microsoft tekelinde değildir. Ek olarak extjs gibi bir çok framework ajax teknolojisini destekler. Ajax kodlama yaparken dikkat etmeniz gereken bir diğer noktada SEO optimizasyonudur.
Bu makale ile ilgili sorularınızı yorum olarak alabilirim…
Sonraki heycan verici serüvende buluşmak üzere…..
Son Yorumlar