JQuery ile Ajax Kullanımı

**Ceybi** · 15 Ocak 2012, 15:29

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” yanidaha 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 [Yanlizca 10 Saniyede Üye Olmak Için TIKLAYINIZ...]sürümü indirip sayfanıza dahil etmeniz yeterli olacaktır.
Jqueryi 3 başlık altında inceleyebiliriz.

Ajax istekleri
Ajax olayları
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 Kodu:

<html>
<head>
<**** **********=”Content-Type” *********”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- Kodu:

  <?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.

15 Ocak 2012, 15:29	#1
Ceybi Mareşal Üyelik Tarihi: 13 Ocak 2012 Mesajlar: 697 Rep Puanı : 10 Rep Derecesi :	JQuery ile Ajax Kullanımı 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” yanidaha 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 [Yanlizca 10 Saniyede Üye Olmak Için TIKLAYINIZ...]sürümü indirip sayfanıza dahil etmeniz yeterli olacaktır. Jqueryi 3 başlık altında inceleyebiliriz. Ajax istekleri Ajax olayları 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 Kodu: <html> <head> <** ******=”Content-Type” ******”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- Kodu: `<?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.

Seçenekler
Yazdırılabilir şekli göster Sayfayı E-Mail olarak gönder
Stil
Normal Hybrid-Şeklinde gösterime geç Ağaç şeklinde gösterime geç

Benzer Konular
Konu	Konuyu Açan	Forum	Cevap	Son Mesaj
Hatasız AJAX Kullanımı (Türkçe)	Ceybi	JavaScript & AJAX	0	15 Ocak 2012 15:23

Sponsor Linkler (Lütfen Sitemize Destek Olmak İçin Günde Bir Kez Tıklayınız)