Ajax İle Alan Güncelleme Örneği 1

jQuery kütüphanesi yardımıyla ajax kullanımına dair bilgiler ve örnekleri inceleyelim.

Ajax ile ilgili kısaca değinmek gerekirse, bir web sitesinde çeşitli olaylar (events) neticesinde (tıklama, üzerine gelme, yüklendiğinde, tuşa basıldığında vs..) sayfayı yenilemeden sunucu taraflı bilgiyi ekrana getiren teknolojidir. Özellikle jQuery sayesinde JavaScript'i daha da kolay kullanımı sözkonusudur. jQuery'nin ajax metodunu inceleyelim.
jQuery Ajax Metodu
jQuery.ajax
({
	type: 'GET',
	url: 'ajax.aspx',
	cache: false,
	data: 'islem=ara&kelime=serkan',
	contentType: "application/x-www-form-urlencoded;charset=utf-8",
	success: function (strSonuc) {
		//Dönen strSonuc değeri
	},
	error: function (ajaxIstek, strDurum) {
		var strHata_Mesaji = "";
		if (ajaxIstek.status === 0) {
			strHata_Mesaji = "Bağlantı yok. Lütfen internet bağlantınızı kontrol ediniz.";
		} else if (ajaxIstek.status == 404) {
			strHata_Mesaji = "Sayfa bulunamadı [404].";
		} else if (ajaxIstek.status == 500) {
			strHata_Mesaji = "İç Sunucu Hatası [500].";
		} else if (strDurum === 'parsererror') {
			strHata_Mesaji = "JSON isteği ayrıştırılamadı.";
		} else if (strDurum === 'timeout') {
			strHata_Mesaji = "Zaman aşımı hatası.";
		} else if (strDurum === 'abort') {
			strHata_Mesaji = "Ajax isteği iptal edildi.";
		} else {
			strHata_Mesaji = "Bilinmeyen hata. Hata detayı: " + ajaxIstek.responseText + ".";
		}
		alert(strHata_Mesaji);
	}
});
type: Veriyi nasıl göndereceğimiz (get yada post metodu)

url: Hangi sayfadan verileri çekeceğimizi belirtiyoruz.(asp, php, .net vs..)

cache: Bellek mekanizması

data:: Burada belirteceğimiz değerler, form elemanları ve karşılıkları şeklinde gitmektedir. Mesela "GET" metodu ile gönderdiğiniz değerlerin adresi şu şekilde olmaktadır: ajax.aspx?islem=ara&kelime=serkan

success: Yapılan isteğin başarılı olması durumunda bize strSonuc değişkeni gönderilir.

error: Yapılan isteğin başarısız olması durumunda çeşitli hata tipleri dönmektedir. Bunlardan birkaçı, veri işlenirken internet bağlantısının kopması yada veriyi çekeceğimiz sayfada bir hata oluşması gibi.

Kısaca ajaxa giriş niteliğinde sizlere bu yazıyı aktarmış bulunuyorum. Şimdi bir sayfadan bilgi alıp bunu ilgili elementin html tarafında ekrana yazdıralım.
Ajax ile Asp Dosyasına Bilgi Gönderelim
jQuery.ajax
({
	type: 'GET',
	url: 'ajax.asp',
	cache: false,
	data: 'kelime=Serkan',
	contentType: "application/x-www-form-urlencoded;charset=utf-8",
	success: function (strSonuc) {
		jQuery("div").html(strSonuc);
	}
});
ajax.asp dosyasına QueryString olarak kelime değişkeni gönderilmektedir. Bu değişkenin taşıdığı değer olarak Serkan gönderilmiştir.
Gönderilen veriler asp dosyasında işlendikten sonra ekrana bilgiler yazdırılmaktadır. Yazdırılan bu bilgiyi Ajax ile arkaplanda okuyup ilgili element içerisinde gösterdik.
Asp Dosyası
<%
strKelime = Request("kelime")
Response.Write "Merhaba "& strKelime &", şimdiki tarih: " & Now()
%>
Örnek 1 (ASP)

Sonuç Burada Çıkacak

Yorumlar

Henüz hiçbir yorum yazılmamış. İlk yorumu siz yapın.

Yorum Yaz

Avatar

REKLAM

DDos Koruma, Botnet Koruma, Layer 7 Saldırı koruması, Sanal sunucu, Vds sunucu

REKLAM

Çizgi Filmler

EN

  • Popüler
  • Yeni
  • Son Yorum