jquery ile AJAX

Yakın bir zamandan beridir iyi bir Javascript kütüphanesi olanjquery‘yi kullanmaya başladım. Ufak ufak deneyimlerimi aktarmaya çalışacağım. İlk olarak AJAX ile giriş yapmak istedim. Önceden ajax için kendi yazdığım basit bir sınıfı (class) kullanıyordum. Ama jquery ajax fonksiyonu oldukça kullanışlı. Ayrıca üzerinde devamlı çalışılan bir yapı olduğu için, Javascript ile internet tarayıcılarda yaşanacak uyum sorunları ile ilgilenmek için zaman harcamak gerekmiyor. Neyse konuya girelim.

Aslıdan jquery’de farklı ajax kullanım yöntemleri olsa da, şimdi en geniş olanaklar sunan tarzı üzerinde durmaya çalışacağım. Örneğimizde bir formdan girilen e-posta adresinin veritabanında kayıtlı olup olmadığının kontrolünü jquery ajax yardımıyla yapacağız. Formdaki e-posta alanından çıkıldığı anda kontrol etmek için onblur olayını (event) kullanacağız. Varolan e-posta adresi için uyarıyı vermek üzere, görünmeyen bir uyarı yazısını görünür yapacağız.

<input name=”eposta” type=”text” onblur=”epostabak(this.value);” />
<div id=”emsj” style=”display:none;”>Girdiğiniz e-posta adresi sistemimizde kayıtlıdır! Lütfen farklı bir adres giriniz.</div>

Yukarıda formdan bizim kullandığımız bölümü görebilirsiniz. Aşağıda da javascript kodumuzu görüyorsunuz. Scriptin en üstünde jquery.js dosyamızı da yüklemeyi unutmuyoruz. Burada sitenin ana klasörünün altında js klasöründe imiş.

<script type=”text/javascript” src=”/js/jquery.js”></script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

function epostabak(posta){
	if(posta!=''){
		$.ajax({
			async: false,
			type: "POST",
			url: "/eposta_bak.php",
			data: "eposta=" + posta,
			dataType: "text",
			timeout: 2000,
			error: function(nesne, sebep, hata){
				void(0);
			},
			success: function(veri){
				if(veri==1) {
					epostasonuc=true;
					document.getElementById("emsj").display='none';
				}else{
					epostasonuc=false;
					document.getElementById("emsj").display='block';
				}
			}
		});
		return epostasonuc;
	}
}

Fonksiyonda formdan alınan değerin boş olup olmadığını kontrol ettikten sonra jquery’de ajax nesnemizi oluşturuyoruz. İşleyişi tamamen nesneyi oluştururken kullandığımız ayarlarla belirliyoruz. Burada tüm ayar seçeneklerine (options) değinmeyeceğim. En çok kullanılabilecek olanları anlatmak istiyorum.

async (Boolean) : Varsayılan olarak true tanımlanmış. Eğer değer vermezseniz true oluyor. Bu seçenek ile işlemin asenkron yürütülmesini kontrol ediyoruz. Adı öyle de, işlevi ne :) , kısaca; bu script çalışırken sayfada işlem yapmaya devam etme durumunu ayarlıyorsunuz. Senkronlu işlem önceki işlemin bitmesini takiben başlar. Yani bu işlem sonuçlanmadan diğer işlemler devam etmezler. async false iken (senkronlu) internet tarayıcınız sonuç gelene kadar donup kalacaktır :) True ise sizin sayfada çalışmanıza olanak sağlar.

type (String) : Varsayılan get . Çok bilinen GET ve POST yöntemleri ile istem gönderilir (HTTP request).

url (String) : Varsayılan olarak sayfanın kendisi ayarlanmış (sakat iş:)) . URL adresi oluyor anlaşılacağı üzere. Ama jquery sitesinde yapılan uyarıyı burada yapmadan geçmeyelim: document.location.href string olacakmış, documant.location nesne olan değil!

data (Object, String) : Bu yukarıda verdiğimiz adrese (url), yukarıda seçtiğimiz yöntem ile (get, post, ?) göndereceğimiz veri oluyor. Gönderilecek veri sorgu dizisine (query string) çevrilerek gönderiliyor. Bu çevrim yöntemleri ile ilgili de ayarlar mevcut ama burada değinmeyeceğim. Varsayılan olarak çevrim “application/x-www-form-urlencoded” olarak yapılıyor.

dataType (String) : Varsayılan olarak sitesinde Intelligent Guess demişler :) Ama ben makinelere çok güvenmem ;) Bu da sizin gönderdiğiniz istek sonucunda beklediğiniz verinin ne olduğunu belirliyor.

• xml : XML dökümanı gelecekse kullanılır. Gelen nesne x ise x.documentElement olarak kullanabilirsiniz (matematik dersi gibi oldu).
• html : Düz metin dosya. Hiç kullanmadım ama gelen html dökümanındaki script tagları DOM’a eklenirken değerlendirilir diyorlar.
• text : Düz metin dizisi.
• script, json, jsonp diğer seçenekler oluyor.

timeout (Number) : İstek işleminden belli zamandan sonra vazgeçilmesini sağlıyor. Number olarak verilen değer milisaniye oluyor. 2000 = 2 saniye.

error (Function) : Hata oluşması durumunda çalıştırılacak olan fonksiyon. Üç değer alıyor; function (XMLHttpRequest, textStatus, errorThrown)  şeklinde.

succes (Function) : İşlemin başarıyla gerçekleşmesi durumunda çalışacak olan fonksiyon. Bu da iki değişken alıyor; function (data, textStatus) . Buradaki data, ayarlarda dataType ile belirlediğiniz ve geri gelmesini beklediğiniz ve eğer hatasız gelmişse işleyeceğimiz verimiz oluyor. Hayrını görünüz.

Bu seçeneklerin dışında HTTP erişim yetki istemi (HTTP access authentication request) için kullanılabilecek user ve password gibi seçenekler de mevcut. Dahası da var. İlgilenenler sitesinden detaylı olarak öğrenebilirlier.

Javascript’te jquery ile ajax kullanımına böylece bir giriş yapmıştık olduk sanırım. Benden şimdilik bu kadar :)

Kaynaklar:

• http://docs.jquery.com/Ajax/jQuery.ajax

Etiketler: ajax, javascript, jquery

web bölümüne 25 Temmuz 2009, Cumartesi tarihinde girilmiştir. Yorumları RSS 2.0 den takip edebilirsiniz. Yorum yazabilir yada kendi sitenizden izlemeye alabilirsiniz.