Güzel bir pazar gününde daha önce yazmayı düşündüğüm jquery ile ajax kullanımı hakkındaki yazıma başlıyorum. Jquery 'nin ajax kullanımını kolaylaştırdığından başka bir yazımda bahsetmiştim. İlk olarak temel ajax işlevini inceleyelim:
[js]
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});
[/js]
Bu işlevde ajax için bazı parametreler kullanıyoruz. type değeri yapılacak isteğin türünü (POST yada GET), url değeri çağrı yapılacak adresi, data ise gönderilen parametreleri url biçiminde kodlanmış olarak içerir. success değişkeni ise ajax çağrısının başarıyla sonlanmasının ardından yapılacak işlemleri içeren bir işlev tanımıdır. Bunun için ya function ile yeni işlev tanımlaması yaparız yada daha önce tanımladığımız bir işlevin adını kullanabiliriz.
Jquery 'deki Ajax işlevlerini listelersek:
[js]
$.ajax(options)$.get(url, data, callback)
$.getScript(url, callback)
$.getJSON(url, data, callback)
$.post(url, data, callback, type)
load(url, data, callback)
[/js]
Gördüğünüz gibi bu işlevler genel olarak url, data ve callback parametreleriyle kullanılmaktadır. Elbette bu işlevler arasında bazı farklılıklar vardır. Herbirinin amacını kısaca özetlemek gerekirse:
ajax işlevi en temel olanıdır. Kullanım örneğini yukarıda görmüştük. Bu işlevin avantajı daha detaylı ayarlar yapabilmenizdir ve ajax çağrısıyla ilgili daha fazla olaya ait callback işlevi tanımlayabilmenizdir. Devam etmeden önce ajax olaylarını listelemek istiyorum:
[js]
ajaxComplete(callback) // ajax çağrısının tamamlanmasının ardından yapılacaklar için
ajaxError(callback) // hata oluşması durumunda yapılacaklar için
ajaxSend(callback) // ajax ile veri göndermeden önce yapılacaklar için
ajaxStart(callback) // ajax çağrısı başladıktan sonra yapılacaklar için
ajaxStop(callback) // ajax çağrısı bittikten sonra yapılacaklar için
ajaxSuccess(callback) // ajax çağrısının başarıyla tamamlanmasının ardından yapılacaklar için
[/js]
ajax() işlevi dışındaki işlevler için sadece ajaxComplete olayı kullanılır ki bu çoğu zaman yeterlidir.
$.get(url, data, callback) işlevi en basit ajax işlevlerinden biridir. Parametre olarak çağrının yapılacağı url, gönderilecek veri, ve çağrının tamamlanmasıyla yapılacak işlev tanımlaması kullanılır.
$.getScript(url, callback) işlevi ise aynı get işlevi gibidir ancak bu işlevin amacı ajax çağrısı ile elde edilen javascript kodunu çalıştırmaktır.
$.getJSON(url, data, callback) işlevi de get işlevi gibidir. Tek farkı gelen ajax çağrısı ile gelen sonucu metin olarak değil JSON verisi olarak almasıdır. Bu işlevin kullanımının bir üstünlüğü vardır. Eğer tek bir ajax çağrısıyla birden fazla veri elde etmek istiyorsanız (ör: sayfanın farklı yerlerinde kullanmak için) $.getJSON işlevini kullanabilirsiniz. Hatta sunucudan dönen json verisi içinde elde etmek istediğiniz veri haricinde işlemin başarı durumunu belirten bir değer, hata olması durumunda ziyaretçiye verilecek mesaj, en son işlem zamanı gibi ekstra veriler ekleyerek gelen verinin farklı şekillerde kullanılmasını sağlayabilirsiniz. Sunucu tarafında tek yapmanız gereken sonucu json olarak dönmek. Bunun için göndermek istediğiniz verileri bir dizi içine ekleyerek (associated array) bunu json_encode işlevi ile json biçimine çevirip echo ile çıktı vermeniz yeterlidir.
$.post(url, data, callback, type) işlevinin özelliği ise aktarım yöntemi olarak POST kullanması ve dönen verinin callback işlevine ne şekilde aktarılacağını (ör: json, xml) belirleme imkanınızın olmasıdır. Bunu bir örnekle açıklamak istiyorum:
Örneğimiz için sunucu tarafında basit bir json çıktısı kullanalım:
[php]
echo json_encode(array("name"=>"John","time"=>"2pm"));
[/php]
Bu çıktıyı elde edip kullanacağımız ajax çağrımız şu şekilde olabilir:
[js]
$.post("test.php",{ func: "getNameAndTime" }, function(data){
alert(data.name); // John
console.log(data.time); // 2pm
}, "json");
[/js]
Bu çağrı ile test.php işlevine POST yöntemiyle istekte bulunuyoruz (bu örnekte gönderilen veri olarak sunucuda çalıştırılacak işlevin adını verdik ) ve 4. parametremizde belirttiğimiz üzere sonucun json olarak değerlendirilmesini sağlıyoruz. Bu şekilde gelen veriyi herhangi bir işleme gerek kalmadan doğrudan callback işlevinde kullanabiliyoruz.
load(url, data, callback) işlevi ise diğerlerine göre özel bir uygulama amacıyla kullanılmaktadır. En başta $ işaretinin olmadığına dikkat edin. Bunun nedeni bunun doğrudan çalıştırılan değil bir seçici ile elde jquery nesnesi üzerinde uygulanmasıdır. İşlevin amacı basitçe ajax çağrısı yaparak gelen sonucu sayfanızdaki bir öğeye aktarmaktır.
[js]
$("#feeds").load("feeds.php", {limit: 25}, function(){
alert("The last 25 entries in the feed have been loaded");
});
[/js]
Ajax çıktısının feeds idsine sahip öğeye aktarıldığına dikkat edin.
Jquery ile ajax kullanımını özetlemeye çalıştım. Ajax kullanımı için birçok uygulama alanı bulabilirsiniz. İhtiyacınıza göre yukarıda işlevlerden size uygun olanını seçmeniz işlemlerinizde kolaylık sağlayacaktır.