Adım Adım jQuery – 2 : Ajax İşlemleri
Merhaba arkadaşlar, bu yazımda sizlere Ajax metodlarını anlatacağım. Ajax metodları nedir, ne işe yarar? Önce bu soruların cevaplarını verelim. Web sitelerimizde sürekli form inputları kullanır ve bu formların sunucuya gönderilerek veri tabanına yazılmasını isteriz. Ancak bu işlem yapılırken sürekli olarak yapılan değişikler sunucudan gelen bilgiyle sayfanın yeniden yüklenmesi ile devreye girebilmektedir. Bu işlem sırasında hiç düzenleme yapmadığınız kısımlar bile sayfa yenilemesi esnasında tekrar yüklenecek ve siteye gereksiz yük oluşturacaktır.
Ajax metodları ile bu işlemlerden kurtulabiliyor ve sayfa yenileme işlemi olmaksızın sadece yapılan değişikliklerin devreye alınmasını sağlayabiliyoruz. Basit bir örnek vermek gerekirse 2 adet selectbox olduğunu düşünelim. Burada 1.selectbox’tan seçilen telefon markası olsun [Apple, Samsung, Nokia, HTC…] 2.selectbox ise 1.selectbox’ta seçilen verinin değişimine göre gelecek modeller olsun. Burada 1.seçim yapıldıktan sonra tüm sayfanın tekrar yüklenmesi işleminden ziyade sadece 2.selectbox içeriğini güncelleyerek daha şık ve sistemi yormayan bir çalışma sağlayabiliriz. Bu kadar anlatımdan sonra basit işlemler ile Ajax(Asenkron Javascript And XML) metodlarına başlayalım.
1. İlk örneğimizde basit bir butona basıp ajax metodu ile gitmesini istediğimiz adresteki veriyi getirmesini ve bir alert ile yazmasını istiyoruz.
index.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Adım Adım jQuery - 2 : Ajax Metodları</title>
<script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
</head>
<body>
<div id="sonuc">
<input type="button" id="btnGonder" value="Gönder">
</div>
</body>
<script type="text/javascript">
$('#btnGonder').click(function(){
$.ajax({
url:'getData.php',
success:function(data){
alert(data);
}
})
})
</script>
</html>
getData.php :
<?php print "Ajax metodu ile verimizi getirdik."; ?>
Burada getData.php dosyası bizim link olarak aldığımız ve veriyi gönderen kısımdır. Örnekte sadece bu dosyada ekrana yazı yazmasını istedik. İlerleyen derslerde Codeigniter framework’ü üzerinde daha detaylı veritabanı bağlantılı işlemler de gerçekleştireceğiz. Şimdi örneğimize dönelim. Burada Butona tıklandığında click event’ı devreye giriyor ve belirtilen linke gidip veriyi getiriyor. Eğer işlem başarılı olduysa yani success kısmına girdiyse alert ile ekrana yazdırıyoruz.
2.örneğimizde işleri biraz değiştirelim. Bir textbox koyalım, bu textbox içerisine yazdığımız veriyi alert ile tekrar gösterelim.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Adım Adım jQuery - 2 : Ajax Metodları</title>
<script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
</head>
<body>
<!-- Örnek 2 : -->
<div id="sonuc">
<input type="text" name="isim" id="isim">
<input type="button" id="btnGonder" value="Gönder">
</div>
<p id="gelenveri"></p>
</body>
<script type="text/javascript">
//Örnek 2:
$('#btnGonder').click(function(){
//Öncelikle girdiğimiz veriyi gönderebilmek için değişkenimize alalım.
verimiz = $('#isim').val(); //ID'si isim olan verinin değerini al.
$.ajax({
type:'GET',
url:'getData.php',
data:'veri='+verimiz, //getData.php?isim=(verimiz içerisindeki data) oldu.
success:function(data){
$('#gelenveri').html(data);
}
})
})
</script>
</html>
Burada öncelikle ajax metoduna GET metodu ile işlem yapacağımızı belirtiyoruz. Ardından hangi linke (url) gideceğimiz ile data olarak neleri vereceğimizi gösterdik. getData.php dosyasında ise $_GET ile gönderdiğimiz isimdeki veriyi aldık ve ekrana yazdık. Burada ekrana yazma işlemi aslında veriyi geriye gönderme işlemi gibi de tanımlayabiliriz. Dönen veriyi ise paragraf tagı içerisinde gösterdik.
<?php
//Örnek 2:
$veri = $_GET["veri"];//Get metodu ile gönderdiğimiz isim verisini getirmektedir.
echo $veri;
?>
Bu basit örneklerden sonra son olarak biraz daha farklı bir örnek yapalım ve işlemlerimizi burada sonlandıralım. Son örneğimizde en basit haliyle bir login işlemi yapacağız. Senaryomuzdan kısaca bahsedip hemen işlemlere geçmek istiyorum. Login metodunda şifre ve kullanıcı adımızı sunucuya gönderip kontrol ettirmemiz gerekiyor fakat bunu POST işlemi ile yapmalıyız çünkü şifremizin gizli olması gerekmektedir. Yani ajax metodumuz POST ile çalışacak. login.php adında bir dosyamız olacak ve burada kullanıcı adı şifre doğru ise bize büyük bir başlık ile giriş yapıldı yazacak, ancak kullanıcı adı şifre doğru değilse başarısız yazarak işlemi bitireceğiz. Sunucudan verileri json formatında döndürerek json verinin nasıl alındığı bilgisine de bir adım olsa bakmış olacağız.
HTML kodlarımızı ve javascript kodlarımızı inceleyerek başlayalım.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Adım Adım jQuery - 2 : Ajax Metodları</title>
<script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
</head>
<body>
<!-- Örnek 3: Login: -->
<form id="loginform">
<table>
<tr>
<td>Kullanıcı Adı : </td>
<td><input type="text" name="kullaniciadi" id="kullaniciadi"></td>
</tr>
<tr>
<td>Şifre : </td>
<td><input type="password" name="sifre" id="sifre"></td>
</tr>
<tr>
<td colspan="2"><input type="button" id="giris" value="Giriş Yap" style="float:right;"></td>
</tr>
</table>
<p style="font-size: 24pt" id="islemsonucu"></p>
</form>
</body>
<script type="text/javascript">
//Örnek 3:
$('#giris').click(function(){
$.ajax({
type:'POST',
url:'login.php',
data:$('#loginform').serialize(), // Önceki işlemde göndereceğimiz verileri tek tek almıştık ancak serialize kullanırsak tüm veriler otomatik olarak alınır(name bilgisine göre)
success:function(data){
if(data.sonuc == 1){//Eğer sonuc 1 ise giriş başarılıdır.
$('#islemsonucu').html(data.mesaj); //işlem sonucuna göre mesajı yazdıralım.
}else{//1 değilse giriş başarısız.
$('#islemsonucu').html(data.mesaj); //işlem sonucuna göre mesajı yazdıralım.
}
}
})
})
</script>
</html>
Tablomuz içerisinde düzenli görünmesi adına bir form oluşturduk. Burada kullanıcı adı ve şifre kısımları girilecektir. Girilen bilgiler sunucuda incelenecek ve bize uygun değerler ise başarılı ya da başarısız olarak geriye veri döndürecektir. Burada kullanılan bir metotdan bahsedelim hemen, serialize(), Form nesneleri içerisinde bulunan bilgileri seri olarak elde etmeye ve kolaylıkla göndermeye yarar. Tek tek verileri alabileceğimiz gibi tüm formu doğrudan bu şekilde alabiliriz. Verileri aldıktan sonra sunucuya gönderiyoruz ve gelecek cevabı bekliyoruz.
login.php
<?php
$kullaniciadi = $_POST["kullaniciadi"];
$sifre = $_POST["sifre"];
//Bu kısım json veri dönmesi için gereklidir.
//Bu bilgi girilmediği takdirde verileri görüntüleyemeyiz.
header('Content-Type: application/json');
//Kullanıcı adımız admin, şifremiz 12345 olsun.
if($kullaniciadi == 'admin' && $sifre == "12345"){//Kullanıcı adı ve şifre doğruysa
$arrSonuc = array("sonuc"=>1, "mesaj"=>"Giriş başarılı.");
}else{//Doğru değilse veriler.
$arrSonuc = array("sonuc"=>0, "mesaj"=>"Giriş başarısız.");
}
echo json_encode($arrSonuc); //Sonuç dizimizi json veri formatına döndürerek gönderdik.
?>
Burada gördüğümüz gibi verileri POST ile gönderdiğimiz için POST ile verilerimizi karşılıyoruz. header() metodu içerisinde bu işlem sonunda json verisi istediğimizi belirttik. Ardından kontrollerimizi de tamamlayarak json verimizi gönderdik. Gelen bilgiler doğrultusunda “Giriş başarılı” ya da “Giriş başarısız” yazarak işlemi sonlandırdık.
Basit düzeyde ajax post ve get işlemlerini inceledik. Daha detaylı işlemler için yeni örneklerde görüşmek üzere. Bir sonraki işlemlerde konuyu anlatmak yerine doğrudan bir proje üzerinden geniş çaplı örnek yapmayı planlıyorum. 🙂 Bu örneklerin kaynak kodlarını linkten indirebilirsiniz. Soru görüş ve örnek istekleriniz için mail atmanız yeterli.. İyi çalışmalar.. 🙂
