HAZİRAN27
Jquery ile Ajax kullanımına basit bir örnek
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>
dürdüncü adım olarak çalıştırılan emir sonucunun görüntüleneceği eleman'ı oluşturuyoruz.
<div id="AjaxDiv">Sonuç Burada Yazacak</div>Beşinci ve son adım da ajax ile veri gönderilip işlenecek ve sonunu bize verecek sayfayı oluşturuyoruz.
aşağıdaki kodları ajax-deneme-sayfasi.asp olarak kaydedin.
<%
Response.Charset = "iso-8859-9" ' türkçe karakterler problem yaratmasın
veri = Request.QueryString("veri")
if Not IsNumeric(veri) Then
Response.Write"Parametre hatası"
else
Response.Write veri &" nolu sayfaya tıkladınız. "
end if
%>
Yukarıda da gördüğünüz üzere jquery, ajax'ın kullanımınız oldukça basitleştirmiş. daha görsel bir örnek yapmak isterdim ama malesef zaman ile ilgili bir problemim var şu sıralar. Daha rahat bir zamanda daha gösterişli örneklerle birlikte olucaz zaten.
- Yukarıdaki örneğin çalışan halini incelemek için tıklayın
- Yukarıdaki örneğin çalışan halini bilgisayarınıza indirmek için tıklayın.
İlerleyen zamanlarda Jquery ile ilgili farklı örnekler de ekleyeceğim.
Şimdilik bu kadar :D
