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/

 

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

Yorumunuzu Ekleyin

jQuery Ajax File Upload
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.
Detaylar

16,024 Okunma Yorumsuz 12/06/2015 18:50:46

Jquery ile Form İşlemleri
Jquery ile Form İşlemleri

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

22,361 Okunma Yorumsuz 17/10/2016 01:27:42

JQuerye Giriş
JQuerye Giriş

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

33,825 Okunma 3 Yorum 18/02/2014 22:11:40

JQuery Özellik Şemaları
JQuery Özellik Şemaları

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

18,269 Okunma Yorumsuz 03/12/2012 02:30:15

jQuery ile Otomatik Tamamlayıcı
jQuery ile Otomatik Tamamlayıcı

Uygulamada jQuery(Ajax), PHP ve MySQL kullanacağız.
Detaylar

20,075 Okunma 3 Yorum

Jquery Kısa Teknikler
Jquery Kısa Teknikler

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

21,420 Okunma Yorumsuz 11/04/2020 03:22:50

Jquery ve PHP Kullanarak Ajax ile Dinamik Select Örneği Oluşturmak
Jquery ve PHP Kullanarak Ajax ile Dinamik Select Örneği Oluşturmak

Bir select kutusu içerisindeki optionları ajax ile alıp yüklemek için yapmamız gerekenler.
Detaylar

22,782 Okunma Yorumsuz 14/01/2019 01:01:03

JQuery Nedir?
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.
Detaylar

19,296 Okunma Yorumsuz 08/11/2014 23:59:12

JQuery Olayları (Events)
JQuery Olayları (Events)

Bir nesenin tetiklenmesini sağlayan olay çeşitleri
Detaylar

19,522 Okunma Yorumsuz

Control HTML5 Audio With Jquery
Control HTML5 Audio With Jquery
Detaylar

3,184 Okunma Yorumsuz 31/12/2018 00:13:04

Yükleniyor...