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” 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.
- 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>
<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.
Bunlara da Göz Atmak İsteyebilirsiniz.
<<< Önceki: Vodafone Mobil Modem Yazılım Problemi ve Çözümü
Sonraki: Put.io Ne Demek? Nedir? Ne Değildir? Nasıl Çalışır? Kimindir? >>>
Yorum Bırakın!