jQuery AJAX

AJAX, bir sunucu ile anlık bağlantı sağlanması ve verinin çevrimiçi alınmasını sağlayan sistemdir. Tüm sayfa yüklenmeden veri alma, değiştirme ve silme işlemi yapabildiğimiz bu sistemi jQuery ile kolay yoldan yapabiliriz.

jQuery load() fonksiyonu

load() fonksiyonu ile bir internet sayfasından anlık veri alabiliriz.

Kullanım: $(nesne).load(adres, veri, dönüş fonksiyonu);

- adres, veriyi alacağımız internet sayfası adresi, dosya adı.
- veri
- dönüş fonksiyonu, veri yüklendikten sonra çalıştırılacak bir fonksiyon

* * *

Örneğin bir not defterinden butona tıkladığımızda veri alan şu sisteme bakalım.

Not defteri açıp adını "demo.txt" koyun ve içine şunları yazın:

HTML Kodu

<h2>Veri Alindi!</h2>
<p>Veriyi aldik, napalim?</p>

Ardından HTML belgemizde aşağıdaki koda yer verelim:

JAVASCRIPT Kodu

<div id="txt" style="border: 1px #000000 solid; margin: 
3px; padding: 5px; width: 320px; height: 140px;"> </div>
<button id="btn">Veri Al</button>
<script>
$("#btn").click(function(){
   $("#txt").load("demo.txt");
});
</script>

Sayfamızı açtığımızda butona tıklayın ve not defterindeki verinin geldiğini görün.

demo.txt dosyasında yer verilen html elementleri arasından seçim yapıp dosya içinde sadece o yerin veri olarak alınmasını sağlayabiliriz. Bunun için dosya adından sonra nesneyi belirten bir ifade kullanırız:

JAVASCRIPT Kodu

<div id="txt2" style="border: 1px #000000 solid; margin: 
3px; padding: 5px; width: 320px; height: 140px;"> </div>
<button id="btn2">Veri Al</button>
<script>
$("#btn2").click(function(){
   $("#txt2").load("demo.txt h2");
});
</script>

Yukarıdaki örnekte bu değişikliği yaparsanız demo.txt içinde sadece Veri Alindi! kısmının göründüğünü göreceksiniz.

* * *

Dönüş Fonksiyonu

Bir load() yüklemesi yaptığımız zaman hata var mı diye kontrol etmek ya da veri yükledikten sonra işlem yapmak için load() içinde bir fonksiyona yer verebiliriz.

JAVASCRIPT Kodu

$("button").click(function(){
   $("#div1").load("demo.txt",function(responseTxt,statusTxt,xhr){
     if(statusTxt=="success")
       alert("İçerik başarıyla yüklendi.");
     if(statusTxt=="error")
       alert("Hata: "+xhr.status+": "+xhr.statusText);
   });
 });

* * *

Veri Alma ve Veri Gönderme

jQuery ile AJAX kullanarak veri işlemek için önce şu kavramları tanımlayalım:

- GET - veriyi almak için
- POST - veri göndermek için

GET ile Veri Almak

$.get("adres",function(veri){ ifadeler }); şeklinde kullandığımız bu fonksiyon, bir sayfadan GET yöntemi ile veri almamızı sağlar.

Bunu bir örnekle anlatalım.

Bir asp dosyası hazırlayın ve içine şu bilgiyi koyun:

ASP Kodu

<%
 response.write("Bu disardan aldigimiz bir bilgidir.")
%>

Ardından HTML dosyamızda şu kodlara yer verelim.

JAVASCRIPT Kodu

<div id="txt" style="border: 1px #000000 solid; margin: 
3px; padding: 5px; width: 320px; height: 140px;"> </div>
<button id="btn">Veri Al</button>
<script>
$("#btn").click(function(){
   $.get("demo.asp",function(veri){
      $("#txt").html(veri);
   });
});
</script><br/><br/>

Butona tıklandığında demo.asp dosyasındaki verinin id="txt" olan div elementi içerisine yerleştirildiğini göreceksiniz.

* * *

POST ile Veri Göndermek

$.post("adres",{form_adı:"değer"},function(veri){ifadeler}); şeklinde kullandığımız POST yöntemi, bir internet sayfasına veri göndermemize yarar.

Şimdi örneğe geçelim:

Bir "demo.asp" dosyası yaratıp içine şunu yazın:

ASP Kodu

<%
   response.write("Adiniz " & Request.Form("ad") & ", soyadiniz " & Request.Form("soyad"))
%>

Ardından HTML dosyanıza şu kodu kopyalayın:

JAVASCRIPT Kodu

<div id="txt3" style="border: 1px #000000 solid; margin: 3px; 
padding: 5px; width: 320px; height: 140px;"> </div>
<button id="btn3">Veri Al</button>
<script>
$("#btn3").click(function(){
   $.post("demo.asp",
   {
     ad:"Murat",
     soyad:"Elicaliskan"
   },
   function(data,status){
     $("#txt3").html(data);
   });
 });
</script><br/><br/>

Böylelikle jQuery ile ilgili temel düzeyde bilgiyi sizlere vermiş olduk. Yeni programlama deneyimlerimizde görüşmek üzere...

jQuery AJAX

jQuery load() fonksiyonu

HTML Kodu

JAVASCRIPT Kodu

JAVASCRIPT Kodu

Dönüş Fonksiyonu

JAVASCRIPT Kodu

Veri Alma ve Veri Gönderme

ASP Kodu

JAVASCRIPT Kodu

ASP Kodu

JAVASCRIPT Kodu

jQuery Nedir?

jQuery Efektleri

jQuery HTML

jQuery Nesneler

jQuery AJAX