Sep.06

Hızlandırılmış jQuery 3 Dersleri : AJAX

İlk olarak AJAX’ın tanımı ile başlayalım…

Öncelikle AJAX herhangi bir dil veya framework değildir. AJAX, bir yaklaşım türüdür. AJAX, “Asynchronous JavaScript XML” (Eşzamansız JavaScript XML) kelimelerinin baş harflerinden türetilmiştir. Adından da anlaşılacağı üzere asenkron olarak çalışabilmemize olanak sağlar. Alt yapısında JavaScript XML ve XML/HttpRequest nesnelerini barındırır.
AJAX, genel olarak sayfayı yenilemeden, arkaplanda istekler yaparak verileri tekrar tekrar çekip ön yüzde, yani DOM’da göstermeyi amaçlar. Aynı zamanda GET ve POST metotlarını da desteklediği için veri gönderip geriye sonuç da (result) alabilir.

Biz, bu konumuzda AJAX’ı direkt olarak kullanmaktan ziyade, jQuery ile daha sade bir şekilde nasıl kullanabileceğimizi göreceğiz. Günümüzde web servisleriyle çalışmak artık web sayfalarında uygulanması zorunlu olan bir yöntem olmuştur. AJAX konusu da web servisleriyle çalışırken önemli olduğu için bu konu üzerinde biraz ağırlık vermekte fayda var.

.ajax()

Bir AJAX çağrısı yapılırken jQuery’de .ajax() metodu kullanılır. Parametre olarak options (ayarlar) alır. En temel alacağı opsiyon ilki URL’dir, yani hangi adrese çağrı yapılacağıdır. Sonraki opsiyonlar da zorunlu. Yaklaşık 20 küsür adet opsiyonu vardır; bunları http://api.jquery.com/jquery.ajax/ adresinden inceleyebilirsiniz. Genellikle done, fail ve always opsiyonları kullanılır. AJAX çağrısının başarılı bir şekilde sonuçlanması ile done opsiyonundaki fonksiyon çağırılır, parametre olarak da dönen değer fonksiyona atanır. fail parametersi de AJAX çağrısının hatalı sonlanmasında çalışır. always ise çağrı bittiğinde sonuç ne olursa olsun çalıştırılır.

Önemli uyarı; AJAX çağrıları güvenlik sebebi ile http, https üzerinden çağrıları yapmaya izin verir. Bu nedenle localhost üzerinden test etmeniz gerekiyor.

Basit bir örnek yapalım. Örneğimizde bir HTML dosyasına çağrı yapacağız. HTML dosyası yüklendiğinde de bir div içinde göstereceğiz.

HTML5 alanımızda aşağıdaki gibi bir div tanımlayalım.

<div id="ekran"></div>

jQuery kodumuz aşağıdaki gibi olsun.

$.ajax( "assets/metin.html" )
	  .done(function(data) {
	    console.log("yüklendi", data);
	    $("#ekran").html(data);
	  })
	  .fail(function() {
	    console.log("hata");
	  })
	  .always(function() {
	    console.log("işlem tamamlandı");
	  }
);

.ajax() metoduna ilk olarak yüklenecek olan dosyanın yolunu girdik. Ardından sırası ile .done, .fail ve .always metotlarını tanımladık. Bunlardan .done sadece yeterli olacaktır, ancak herhangi bir hata durumunda veya genel olarak sorgunun çalışması ile ilgili işlemler de yapmak mantıklı olacağı için bu 3 metot bir arada kullanılır. .done metodunda data isminde bir parametre fonksiyona verilmiştir. Data parametresi, URL’den yüklenmiş olan string veriyi taşır. Fonksiyon içinde de ekran isimli div hedeflenmiş ve .html() metodu ile gelen data yazdırılmıştır.

.load()

Direkt olarak .ajax() metoduna bağlı olmadan, bir içeriği yükleyip herhangi bir elementin içinde yazdırmanızı sağlar. Ayrıca, yükleyeceğiniz içerik eğer bir HTML dosyası ve içinde de etiketler, id’ler veya class’lar varsa, doğrudan hedeflediğiniz içeriği de seçmeniz mümkündür.

Mesela yukarıdaki örneğimizde kullandığımız assets/metin.html dosyasının içeriği aşağıdaki gibidir.

<h1>Bu içerik metin.html içinde yer almaktadır</h1>
<p>Dışarıdan okunan bir içerik...</p>

Şimdi .load() metodu ile direkt olarak sayfamızda yer alan ekran id’li div’in içinde h1 içeriğini gösterelim.

$("#ekran").load("assets/metin.html h1");

İlk olarak hedeflenen (içeriğin gösterileceği element) elementi seçici ile seçip .load() metodunu uyguluyoruz. Parametre olarak string halinde sadece 1 adet değer aldığı görülüyor, ancak 2 adet parametre yer alıyor. assets/metin.html, yüklenecek olan URL’i belirtirken aralarında bir boşluk bırakılıp verilen h1 de, o URL’de yer alan metnin içindeki seçici oluyor, yani h1 etiketini göster demiş oluyoruz. Eğer sadece “assets/metin.html” olarak verirseniz, bütün içeriği gösterir. Parametre olarak etiket, id veya class gibi seçimler de yapabilirsiniz.

.get()

.get() metodu, .ajax() metodu gibi HTTP isteği atmak için kullanılır. Farklı olarak istekte bulunurken GET metodu ile değişken değerleri gönderebilirsiniz. Bir callback fonksiyonu barındırır ve result (dönüş) değerini de (data, status) alabilirsiniz. Yani çift yönlü bir iletişim kurulabilir.

GET çağrısını test edebilmek için öncelikle bir servise ihtiyacımız var. Öğrenme aşamasında pratik bir çözüm olması amacı ile https://httpbin.org/ adresinden faydalanacağız. Ancak kendi web servisinizi nasıl yazıp AJAX ile nasıl kullanacağınızı Formlarla Çalışmak konusunda görmüştünüz.

https://httpbin.org/get adresine girdiğimizde bize aşağıdaki gibi bir JSON dönecektir.

{
  "args": {}, 
  "headers": {
    "Accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8", 
    "Accept-Encoding": "gzip, deflate, br", 
    "Accept-Language": "tr-TR,tr;q=0.8,en-US;q=0.6,en;q=0.4", 
    "Connection": "close", 
    "Cookie": "_gauges_unique_day=1; _gauges_unique_month=1; _gauges_unique_year=1; _gauges_unique=1; _gauges_unique_hour=1", 
    "Host": "httpbin.org", 
    "Referer": "https://httpbin.org/?isim=ugur", 
    "Upgrade-Insecure-Requests": "1", 
    "User-Agent": "Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.113 Safari/537.36"
  }, 
  "origin": "818.23.11.125", 
  "url": "https://httpbin.org/get"
}

Burada args key’i bir Object olarak boş şekilde tanımlanmış. Eğer GET sorgumuzu aşağıdaki gibi yaparsak, GET ile göndermiş olduğumuz değeri args’ın içinde görebiliriz.

https://httpbin.org/get?kitapIsmi=html5&konu=ajax

Burada 2 adet değişken gönderdik, kitapIsmi ve konu. Şimdi bu yapıyı kullanarak jQuery’de .get() metodunu kullanmayı öğrenelim.

$.get("https://httpbin.org/get?kitapIsmi=html5&konu=ajax", function(data, status){
	console.log("status : ", status);
	console.log("data : ", data);
  	console.log("data args : ", data.args);
  	console.log("Kitap İsmi : ", data.args.kitapIsmi);
  	console.log("Konu : ", data.args.konu);
});

Her bir konsol yazdırmasında sırasıyla http sorgusunun status’unu, dönen verileri, dönen veriler içindeki args key’ini, args içindeki kitapIsmi ve konu değerlerini de yazdırmış olduk.

.post()

.get() metoduna benzer ancak veriler açık olarak gitmez, POST metodu olarak gider. Ayrıca JSON objesi de POST edilebilir. Örneğimizde bir JSON nesnesi gönderip sonucuna bakalım.

$.post( "https://httpbin.org/post", { isim: "Uğur GELİŞKEN", yas: 35 } )
	  .done(function( data ) {
	    console.log( data );
	 }
);

.get() metodundan farklı olarak bu sefer herhangi bir callback fonksiyonu kullanmadık, bunun yerine .done() metodundan faydalandık. .done() metodu da yine bir callback fonksiyonu alır ve parametre olarak data değerini verdik.

Örneğimizde bir JSON içinde isim ve yas değerlerini gönderdik. Gelen veriyi de konsolda yazdırdık. Sonuç aşağıdaki gibi olacaktır.

POST ile gönderdiğimiz JSON değerleri sunucuda parse edilmiş ve form key’i içinde isim ve yas değerleri olarak bize geri dönmüş.

.serialize()

HTML5’te bir form yaptığınız düşünün. Bu form içinde de ortalama 10 adet input text olduğunu varsayalım. AJAX ile formda yer alan verileri (textarea, select, input) GET/POST etmemiz gerektiğinde bir JSON objesi oluşturup, bu verileri GET/POST edebiliriz, ancak bu sistem biraz vakit almaktadır ve eski bir metottur. Bunun yerine .serialize() metodunu kullanıp parametre olarak da form nesnesini verdiğimizde, otomatik olarak form içinde yer alan input’ların name attribute’lerine göre değerler bir araya getirilip JSON nesnesi oluşturularak gönderebiliriz Bir örnek üzerinde inceyelim.

Öncelikle form içindeki verileri SUBMIT butonu ile konsolda JSON olarak yazdıralım.

<form >
  <label for="isim">İsim</label><br>
  <input type="text" name="isim" >
  <br>
   <label for="soyisim">Soyisim</label><br>
  <input type="text" name="soyisim" >
  <br><br>
  <input type="submit" value="Gönder">
</form>

Basitçe bir form oluşturduk ve 2 adet input kullandık.

$("form").on("submit", function(e) {
  e.preventDefault();
  console.log( $(this).serialize() );
});

Örneğimizde .on() metodunu da görmüş olduk. Bu metot, bir elemente olay yöneticisi atamak için kullanılır.

elementine .on() metodu ile submit olay yöneticisini atamış olduk. İkinci parametersi olan fonksiyon’a da event’i simgeleyen e parametresi eklendi. Fonksiyon içinde e.preventDefault() metodunu kullandık. Bu metot, URL yönlendirmesini iptal etmiş olur. Kullanma sebebimiz, form’un submit edildiğinde bir URL arıyor olmasındandır. Biz, bir URL’ye yönlendirmek yerine kendimiz AJAX çağrısı yapacağız. $(this). ile de form hedeflenip .serialize() metodu ile de form içinde yer alan input’ların name değerlerine göre içerikleri konsolda yazdırılıyor.

isim=u%C4%9Fur&soyisim=geli%C5%9Fken

Şimdi jQuery ile bu iki metin kutusuna girilen verileri serileştirelim ve GET ile web servisine gönderip sonuca bakalım.

$("form" ).on( "submit", function( e ) {
	  	e.preventDefault();
		$.get("https://httpbin.org/get?" + $("form").serialize(), function(data){
			console.log("data : ", data);
		});
	}
);

Önceki konumuzda görmüş olduğumuz GET isteğinde direkt olarak URL içinde ? işaretinden sonra değerlerimizi girmiştik. Ancak burada serileştirme işlemi yaptık ve string birleştirme işlemi ile otomatik olarak GET verilerimizi eklemiş olduk. İstek yapılırken URL aşağıdaki gibi olacaktır.

https://httpbin.org/get?isim=u%C4%9Fur&soyisim=geli%C5%9Fken

Şimdi de farklı bir metot ile POST metodunu kullanarak serileştirme yapalım…

.serializeArray()

Önceki örneğimizde yer alan form’dan devam edelim..

.serializeArray() metodu, verileri bir String (URL Encoded) olarak değil, bir JSON Array olarak göndermemize olanak sağlar. Formu submit ettiğimizde aşağıdaki jQuery kodunda görüldüğü gibi konsolda yazdıralım.

console.log( $("form").serializeArray() );

2 elemanlı bir ARRAY nesnesi olarak form verilerimiz yazdırıldı. ARRAY nesnesi içerisinde her bir form input’u birer JSON olarak tanımlandı.

$("form").on( "submit", function(e) {
    	e.preventDefault();
    	$.ajax({
	        url : "post.php",
	        type : "POST",
	        dataType : "JSON",
	        data : $("form").serializeArray(),
	        success : function(data){
	            console.log(data);
	            console.log(data[2]);
	        },
	        error : function(e){
	            console.log("hata", e) 
	        }
    	});
});

İlk olarak konumuzun başında da gördüğümüz gibi bir .ajax() nesnesi oluşturuyoruz. Bu nesnenin fazlaca opsiyon alacağından bahsetmiştik ve birkaç opsiyon eklememiz gerekti. İlk opsiyon default olarak URL’dir, ancak burada tek tek eklenen opsiyonların da neler olduğunu tanımladık. url opsiyonuna POST edeceğimiz verilerin adresini (post.php), type opsiyonuna veri gönderme metodunu (POST), dataType opsiyonuna gönderilen verinin biçimini (JSON), data opsiyonuna form’dak input’ların .serializeArray() metodu ile serileştirilmiş halini atadık. success, çağrının başarılı olması durumunda, error de çağrının hatalı olması durumunda çalıştırılacak.

Dönen değerler bir Array nesnesi olacağı için index numarasına göre verilere erişiyoruz. Bizim hoşgeldin mesajımızın index’i 2 olduğu için data[2] şeklinde mesajımızı konsolda yazdırıyoruz.

<?php
	header('Content-Type: application/json');
	$isim = $_POST['isim'];
	$soyisim = $_POST['soyisim'];
	$hosgeldin = "Hoşgeldin " . $isim . " " . $soyisim;
	echo json_encode( array($isim, $soyisim, $hosgeldin) );
?>

PHP tarafında ilk olarak echo ile üretilen içeriğin, daha doğrusu dönen değerin bir string olmayacağını, bir JSON nesnesi olacağını header içinde tanımlıyoruz. POST ile gelen verileri de $_POST[] metodu ile alıp değişkenlere atıyoruz. Elde ettiğimiz isim ve soyisim değerlerini de bir mesajda birleştirim $hosgeldin adlı değişkene atıyoruz. Elimizde şu an 3 adet değişken var. Bunları da array() metodu ile birleştirip 3 elemanlı bir dizi oluşturuyoruz. Oluşturduğumuz diziyi de json_encode() metodu içerisinde kullanıp echo ile yazdırıyoruz. Eğer düz bir şekilde değişkenleri yazdırırsanız, dönen veriler işlenemeyecektir ve error’a düşecektir.

İçeriği paylaş:
  • facebook
  • twitter

Leave a comment

Yorum