Anasayfa » Ajax

JQuery ile Ajax Kullanımı

2 Şubat 2011 3.021 kez okundu Yorum yok
1 Star2 Stars3 Stars4 Stars5 Stars (Henüz hiç oy kullanılmadı. İlk oyu siz verin.)
Loading...

Bu yazımda size jquery de ajax kullanımından bahsedeceğim ve küçük bir uygulama yapacağım.

Peki JQuery nedir? JQuery, kısaca bir Javascript kütüphanesidir. JQuery nin sloganı olan “The Write Less, Do More” yani daha az kod yazarak daha çok iş yapma mantığına dayalı bir kütüphanedir. JQuery ile sitemizde kullandığımız javascript araçlarını daha hızlı,pratik, daha az kod yazarak tamamlıyoruz.

Mesela javascriptte sıkça kullandığımız,
document.getElementById(“alan”);

yerine jquery ile,
$(“#alan”);

şeklinde kısaca halledebiliyoruz görüldüğü gibi.En basit işlemlerde bile büyük kolaylıklar sağlıyor.

JQuery ajax işlemlerinde de basit, başarılı bir kullanıma sahiptir.Javascript kullanırken ajax için web methodları kullanmamız gerekirken,jquery de sadece $.ajax nesnesi kullanarak işlemi çok kolay bir şekilde halledebiliriz.

JQuery yi kullanabilmek için resmi sitesinden sürümü indirip sayfanıza dahil etmeniz yeterli olacaktır.

Jqueryi 3 başlık altında inceleyebiliriz.

  1. Ajax istekleri
  2. Ajax olayları
  3. Ajax yardımcıları

1 AJAX İSTEKLERİ

Bir ajax oluşturmak için kısaca $.ajax() fonksiyonu kullanılır.Fonksiyondaki seçenekleri ise 4’e ayırabiliriz.
type: yapacağınız isteğe göre POST ya da GET değeri alır.
url: isteğin yapılacağı sayfa adresi, örneğin kavakci.com/hesapla.php
data: url ile birlikte göndereceğimiz değerleri verebiliriz, örneğin data=$veri yada data=3 (data kullanmak yerine direk url üzerinden de veri gönderebilirsiniz.Mesela kavakci.com/hesapla.php?data=3 )
success: yapılan işlemin başarılı olması durumunda asıl sayfamızda yapacağımız işlemleri belirleyebileceğimiz alan.

NOT:ajax olayları ve yardımcıları başlıklarını ilerleyen günlerde inceleyeceğim,incelediğimde linki buradan vereceğim.

Şimdi buraya kadar olan bölümle ilgili küçük bir uygulama yapalım.İki sayfamız olacak birisi index.php diğeri hesapla.php ayrıca bu dosyaların bulunduğu dizinde jquery.js dosyası olacak

index.php———————————————————-

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>Kavakci.com jQuery ve AJAX işlemleri</title>
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript”>
function hesapla()
 {
   $(‘#sonuc’).html(‘hesaplanıyor…’);
   var data=document.getElementById(‘text’).value;
   $.ajax({
     type: ‘GET’,
     url: ‘hesapla.php’,
     data: ‘data=’+data,   
     success: function(sonuc) {
     $(‘#sonuc’).html(data+’ nın karesi = ‘+sonuc);
     }
   });

  return false;
 }
</script>
<style type=”text/css”>
 div {
  border: 1px solid #CCCCCC;
  background:#FFFFCC;
  color:#666;
  font: normal 12px “Trebuchet MS”;
  width: 200px;
  padding: 7px
 }
</style>
</head>
<body>

<form>
<input type=”text” id=”text” value=”Sayıyı girin…”>
<input type=”button” value=”karesini al” onClick=”javascript:hesapla()”>
</form>
<div id=”sonuc”>sayının karesi burada görünecek</div>

</body>
</html>

———————————————————————–
hesapla.php——————————————————–

<?php
$data=$_GET[‘data’];
for($i=0;$i<10000;$i++)//hesaplanıyor yazısını görebilmek için bekletiyorum
{
  for($j=0;$j<1000;$j++){}
}
echo $data*$data;
?>

———————————————————————–

burada küçük bir uygulama yaptık. Amaç text fielde girilen değerin karesini alıp text id li div e yazmak.Kısaca butona tıkladığımızda hesapla fonksiyonu çağrılıyor burada önce ekrana “hesaplanıyor…” yazısı yazılıyor.document.getElementById ile text fieldden sayıyı alıp data bölümüne datanın sonuna ekleyip url yi yolluyoruz.Arka planda hesapla.php dosyası çalışıyor ve echo ile ekrana yazdığımız değer bize dönüyor.Değeri success bölümünde alıp ilgili id deki div e yazıyoruz.

İşte görüldüğü gibi çok basit bir fonksiyonla ajax kullanıyoruz ve sayfamızı yenilemeye ihtiyaç duymadan hızlı bir şekilde işlemimizi tamamlıyoruz.

<<< Önceki:

Sonraki: >>>


Facebookta Paylaş

Yorum Bırakın!

Yorum yaz, yada kendi sitende trackback (Geri besleme) olarak ekle. Ayrıca RSS ile bu konuya üye olabilirsin. .

Nazik olun. Temiz tutun. Konu dışına çıkmayın. Spam yaratmayın.

Bu tagları kullanabilirsiniz:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Bloğumuz gavatarı desteklemektedir. Kendi gavatarınızı edinmek için lütfen Gravatar a üye olun.