HAZİRAN27

Jquery ile Ajax kullanımına basit bir örnek

Javascript kategorisinde | [1479 ] kez okunmuş | [8] Yorum » | Yorum Yaz »

Daha önceleri Ajax uygulamaları için uzun uzun javascript kodları yazmaya uğraşırdım (Aslında bir kere yazıp, kopyala yapıştır yapardım :) ). Jquery Ajax api'si sayesinde, uzun javascript kodları ile uğraşmaktan kurtulup, kısa bir kod bloğu ile ajax işlemleri yapılabiliyor.

Nasıl çalıştığına, hemen bir örnek görmek isterseniz, hemen kategorilerin üzerindeki arama bölümüne birşeyler yazabilirsiniz.

Jquery ile ajax yada başka plug-in'leri kullanabilmeniz için, öncelikle js dosyasının son versiyonuna sahip olmanız gerekiyor. Buradan en son versiyon .js dosyasını bilgisayarınıza indirebilirsiniz.

Aşağıda kullanımına örnek olması açısından basit bir örnek kodu sizinle paylaşıyorum.

İlk olarak yukarıdaki linkten indirdiğiniz .js dosyasını sayfamıza ekliyoruz.

<script language="javascript" src="js/jquery-1.3.2.min.js"></script>

İkinci adım olarak ajax'ın çalışacağı kodları <head>...</head> tagları arasına ekliyoruz.

<script language="javascript">


function AjxTest(parametre)

{

$('#AjaxDiv').html('İşlem Yapılıyor...'); // işlem yapıldığı süre içince ziyaretçi bunu görecek

$.ajax({

         type: 'GET', // Veri taşıma methodu

         url: 'ajax-deneme-sayfasi.asp', // işlemin yapılacağı sayfa

         cache: false, 

         data: 'veri='+parametre, // sayfaya gönderilecek parametreler

         success: function(sonuc) {

                  $('#AjaxDiv').html(sonuc);

                  }

         });

}


</script>

Üçüncü adım olarak ajax'ı çalıştırması için sayfamızdaki bir neyneye emir veriyoruz

<a href="javascript:AjaxTest(1);" title="İlk Link">Link 1</a>-<a href="javascript:AjaxTest(2);" title="İkinci Link">Link 2</a>-<a href="javascript:AjaxTest(3);" title="Üçüncü Link">Link 3</a>

Tamamını Okuyun

1