eburhan.com

Bu yazıda jQuery kütüphanesi ile AJAX işlemlerinin nasıl yapıldığından bahsedeceğim. Prototype ve MooTools kütüphanelerini de kullanmış biri olarak size söyleyebilirim ki AJAX işlemlerinin en kolay ve esnek bir şekilde jQuery ile yapılabildiğini gördüm. Eminim ki yazının sonunda bu konuda bana hak vereceksiniz, çünkü gerçekten jQuery ile bir AJAX işlemi yapmak çok kolay

Bu konuyu resmi jQuery dökümanında olduğu gibi 3 başlık altında anlatmak istiyorum:

1. Ajax istekleri
2. Ajax olayları
3. Ajax yardımcıları

1. Ajax istekleri

Bir AJAX isteği oluşturmak için $.ajax() fonksiyonundan faydalanıyoruz. Yapacağımız işlemin türüne göre bu fonksiyona farklı farklı seçenekler belirtmek durumundayız. Bu seçeneklerden en temel olanlarını kısaca inceleyelim:

• type: Bir web sayfasına yapılacak olan isteğin türünü belirler. GET veya POST olmak üzere iki farklı değerden birisini almalıdır.
• url: istek yapılacak sayfayı belirtmenizi sağlar. google-backlink.php gibi…
• data: istek yapılan sayfaya herhangi bir bilgi gönderecekseniz bu bilginin ne olduğunu belirtmenizi sağlar. Örneğin google-backlink.php isimli bir sayfaya url=www.eburhan.com bilgisini göndermek için bu seçeneği kullanmalıyız.
• success: yapmış olduğumuz isteğin başarılı olup olmadığını kontrol etmemizi sağlar. Örneğin yapılan başarılı bir istek sonucunda geri dönen cevabı işlemek için bu seçeneği kullanabiliriz.

$.ajax() fonksiyonundan ve onun alabileceğini seçeneklerden de bahsettiğimize göre artık bunların nasıl kullanıldığına geçelim. Örnek uygulamamızda “google-backlink.php” sayfasına “url=www.eburhan.com” bilgisini GET yöntemi ile gönderip sonucu alacağız. Aldığımız sonucu ise ID özniteliği "sonuc" olan DIV etiketi içerisinde göstereceğiz.

$.ajax({
	type: 'GET',
	url: 'google-backlink.php',
	data: 'url=www.eburhan.com',
	success: function(ajaxCevap) {
		$('#sonuc').html(ajaxCevap);
	}
});

Bu örnek uygulamanın çalışır halini Örnek 1A sayfasında bulabilirsiniz.

jQuery ile AJAX isteği oluşturmanın çok daha kısa yolları da vardır. Bu yollar $.get() ve $.post() fonksiyonlarından geçiyor. Fonksiyon isimlerinden de anlaşılacağı üzere GET türünde bir istek için $.get() fonksiyonunu, POST türünde bir istek için $.post() fonksiyonunu kullanabiliriz. Bir önceki örnek uygulamanın $.get() fonksiyonu ile nasıl yapılabileceğini görelim:

$.get(
	'google-backlink.php',
	{url: 'www.eburhan.com'},
	function(ajaxCevap){
    	$('#sonuc').html(ajaxCevap)
	}
);

$.get() fonksiyonunda öncelikle istek yapılacak sayfayı, daha sonra ise bu sayfaya gönderilecek bilgiyi belirtiyoruz. Sonra da geri dönen cevabı bir fonksiyon içerisinde işliyoruz. Çalışır halini Örnek 1B sayfasında görebilirsiniz.

Şimdi de herhangi bir web sayfasının içeriğini kendi web sayfamıza kolayca entegre edebilmemizi sağlayan $.load() fonksiyonunu inceleyelim. Örneğimizde "delicious-eburhan.php" diye bir dosyamız olsun. Bu dosyanın görevi, Del.icio.us isimli dünyaca ünlü sosyal imleme sitesinde saklamış olduğum son 10 bağlantıyı göstermek olsun. Biz bu gösterimi $.load() fonksiyonu ile kendi sayfamızda yer alan DIV etiketi içerisinde yapacağız.

$('#sonuc').load('delicious-eburhan.php');

İşte bu tek satırlık kod yardımıyla "delicious-eburhan.php" dosyasının tüm içeriğini web sayfamızdaki DIV etiketi içerisine yüklemiş oluyoruz. Gerçekten kolay değil mi? Bu örneğin çalışır halini Örnek 1C sayfasında bulabilirsiniz.

2. Ajax olayları

Bu yazının başındaki örnekte (Örnek 1A) success isimli bir seçenek kullanmıştık. Bu seçeneğin görevi, bir AJAX isteği başarılı olarak tamamlandıktan sonra bizim herhangi bir işlem yapabilmemizi sağlamaktı. Bu seçeneği her AJAX isteğinde kullanmak için her defasında belirtmemiz gerekiyor. Oysaki biz böyle tekrarlara düşmeyelim diye jQuery bize "ajax olayları" diye bir olanak sunmuş. Alttaki örneğe bakalım:

$("#sonuc").ajaxSuccess(function(){

	$(this).html('ajax isteği başarılı');

});

Bu örnekte, web sayfamızdaki bütün AJAX istekleri başarıyla sonuçlandığı zaman ID özniteliği "sonuc" olan bir elemanın içerisine "ajax isteği başarılı" mesajı yazılacaktır. Yani ayrıyeten herbir $.ajax() fonksiyonu içerisinde belirtmemize gerek kalmamıştır.
Örneği test etmek için Örnek 2A sayfasına bakabilirsiniz.

jQuery kütüphanesi içerisindeki ajax olayları şöyledir:

• ajaxComplete: bir ajax isteği tamamlandığında
• ajaxError: bir ajax isteği başarısız olduğunda
• ajaxSend: bir ajax isteği gönderilmeden önce
• ajaxStart: bir ajax isteği başladığında
• ajaxStop: bir ajax isteği durdurulduğunda
• ajaxSuccess: bir ajax isteği başarıyla tamamlandığında

Küçük bir örnekle de ajax olayları konusunu geçmek istiyorum. Hepiniz AJAX kullanan web sitelerinde bunlar gibi yükleniyor (loading) resimleri görmüşsünüzdür. İşte böyle birşey oluşturmak için ajaxStart isimli olayı kullanabiliriz. Böylece herhangi bir AJAX isteği başladığında web sayfanızın bir yerinde yükleniyor resmi gösterebilirsiniz

$("div#yukleniyor").ajaxStart(function(){

	$(this).html('<img src="yukleniyor.gif" />');

});

Bu örneğin uygulamasını da Örnek 2B sayfasında görebilirsiniz.

3. Ajax yardımcıları

Bu başlık altında ajaxSetup() ve serialize() isimli iki fonksiyonu inceleyeceğiz.

Yardımcı fonksiyonlar sayesinde AJAX işlemlerini daha da kolaylaştırabilirsiniz. Örneğin web sayfanızda birden fazla $.ajax() fonksiyonu kullanmışsınız fakat bu fonksiyonun bazı seçenekleri hep tekrar etmiş. Oysaki ajaxSetup() yardımcısı ile bu tekrar eden seçenekleri baştan belirleyebiliyoruz. Böyle olunca da her $.ajax() fonksiyonuna aynı seçenekleri tekrar tekrar girmekten kurtulmuş oluruz.

$.ajax({
	type: 'GET',
	url: 'google-backlink.php',
	data: 'url=www.eburhan.com',
	success: function(ajaxCevap) {
		$('div#sonuc').html(ajaxCevap);
	}
});

$.ajax({
	type: 'GET',
	url: 'google-backlink.php',
	data: 'url=www.yakuter.com',
	success: function(ajaxCevap) {
		$('div#sonuc').html(ajaxCevap);
	}
});

Şimdi yukarıdaki iki koda bakalım. Bu kodların ikisi de aynı web sayfasında bulunuyor. Dikkat ettiyseniz "type", "url" ve "success" seçenekleri her ikisinde de ortak. Oysaki ajaxSetup() yardımcısı ile bu ortak ifadelerin tek bir yerde toplanması sağlanabiliyor. Böylece kodlarımız daha temiz görünüyor.

$.ajaxSetup({
	type: 'GET',
	url: 'google-backlink.php',
	success: function(ajaxCevap) {
		$('div#sonuc').html(ajaxCevap);
	}
});

$.ajax({ data: 'url=www.eburhan.com' });
$.ajax({ data: 'url=www.yakuter.com' });

Böylesi daha iyi değil mi Test etmek isterseniz Örnek 3A sayfasına bakabilirsiniz.

Şimdi de form alanlarında sıklıkla kullanacağımız serialize() yardımcısına geçelim. Bu yardımcı sayesinde bir forma girilen bütün bilgiler sorgu cümleciği (query string) haline otomatik olarak dönüştürülürler. Bu sorgu cümleciğini herhangi bir sayfaya bilgi gönderirken kullanırız. Şimdi alttaki gibi basit bir formumuz olduğunu varsayalım:

<form method="post" action="form-isle.php">
  <p>İsim: <input type="text" name="isim" /></p>
  <p>Site: <input type="text" name="site" /></p>
  <p>Şehir:
     <select name="sehir">
     <option value="izmir">İzmir</option>
     <option value="istanbul">İstanbul</option>
     <option value="ankara">Ankara</option>
     </select>
  </p>
  <p><button type="submit">Formu Serileştir</button></p>
</form>

Girilen örnek bilgilerle beraber bu kodların ekran görüntüsü alttaki gibi olacaktır:

Şimdi de serialize() yardımcısını kullanarak bu formdaki bilgileri bir sorgu cümleciği haline dönüştüren kodu yazalım:

$('form).serialize();

Bu kodu çalıştırdığınızda altaki gibi bir sorgu cümleciği elde etmiş olacaksınız. Kendiniz test etmek isterseniz Örnek 3B sayfasına da bakabilirsiniz.

isim=Erhan&site=eburhan.com&sehir=izmir

Artık serialize() yardımcısı ile oluşturduğumuz bu sorgu cümleciğini istediğimiz gibi kullanabiliriz. Özellikle de bir formdaki bilgileri kullanarak bir AJAX isteği yaptığımızda bu yardımcı işimizi çok kolaylaştıracaktır. Öyleyse bir AJAX isteğinde bu yardımcı nasıl kullanıyor ona da bakalım ve bu yazıya da son noktayı koymuş olalım

$.ajax({
	type: 'POST',
	url: 'form-isle.php',
	data: $(’form’).serialize(),
	success: function(ajaxCevap) {
		$(’#sonuc’).html(ajaxCevap);
	}
});

NOT: yazıdaki örnek uygulamaları buradan indirebilirsiniz.

benzer yazılar:

• jQuery ile "çek-bırak" özellikli nesneler oluşturmak
• jQuery ile hazırladığım "Kalan Karakter" eklentisi
• jQuery ve JSON işlemleri