Konular
Videolar
Sunular
Testler

jQuery ve AJAX işlemleri

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..
jQuery ve AJAX işlemleri

 

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');

 

iş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.

sayfayı ayır

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. iş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('');

});

 

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

sayfayı ayır

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:

 

 method="post" action="form-isle.php">

isim:  type="text" name="isim" />


Site:  type="text" name="site" />


şehir:
      name="sehir">
      value="izmir">izmir
      value="istanbul">istanbul
      value="ankara">Ankara
     
  


 type="submit">Formu Serileştir

 

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

form

ş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);
	}
});

 

Kaynak http://www.eburhan.com/jquery-ve-ajax-islemleri/

 

28,153 Okunma Henüz yorum yapılmamış 31/10/2012 02:07:16 31/10/2012 02:07:04

Yorumunuzu Ekleyin

JQuerye Giriş

JQuery, Sihirli dolar ($)işağreti ve operasyonlar zinciridir. Aslında Javascript ve CSS bilginiz varsa çok hoşunuza gidebilir.

33,311 Okunma 3 Yorum 07/07/2011 18:40:09 18/02/2014 22:11:40

Jquery ile Form İşlemleri

Jquerynin bize sağlıcağı en büyük kazanç şüpesiz farklı browserlar için tek kod kullanmak.

21,878 Okunma Henüz yorum yapılmamış 26/07/2011 12:12:10 17/10/2016 01:27:42

Jquery Kısa Teknikler

Jquery kullanırken yardımcı olacak bir kaç detay...

20,997 Okunma Henüz yorum yapılmamış 18/08/2018 13:33:35 11/04/2020 03:22:50

JQuery Olayları (Events)

Bir nesenin tetiklenmesini sağlayan olay çeşitleri

19,129 Okunma Henüz yorum yapılmamış 15/01/2014 20:55:49

JQuery Nedir?

Jquery, javascript ile hep yapmak isteyip, karışık JS programlama dili yüzünden bir türlü yapamadığınız kodlamayı çok kolay ve hızlıca yapmanızı sağlayan javascript kütüphanesidir.Diğer bir güzel yanı da jquery ile yazılan kodun tüm popüler tarayıcılarda sorunsuz çalışmasıdır, sizin kod üzerinde tarayıcı uyumluluğu çalışması yapamanıza gerek yoktur.

18,880 Okunma Henüz yorum yapılmamış 21/06/2011 23:58:55 08/11/2014 23:59:12

JQuery Özellik Şemaları

JQuery tüm özellikleriyle bu şemalarda saklı.

17,920 Okunma Henüz yorum yapılmamış 03/12/2012 02:27:58 03/12/2012 02:30:15

jQuery Ajax File Upload

PHP ile dosya yükleme işlemi yaparken kullanıcılara Upload durumunun hangi aşamada olduğunu yüzdesel olarak veya bir progres bar ile göstermek elbette daha güzel olur.

15,431 Okunma Henüz yorum yapılmamış 03/02/2015 16:45:48 12/06/2015 18:50:46

Yükleniyor...