Bu konuda sizlere ASP ile Ajax kullanımını anlatacağım.
Kolaylık olması açısından jQuery Javascript Kütüphanesini kullanacağız.Jquery kütüphanesini indirmek için
http://www.jquery.com/ sayfasında bulunan Download(jQuery) butonunu tıklayın.
Ajax ile 2 şekilde veri gönderebilirsiniz:
1-GET
2-POST
İlk olarak ben GET metoduna değineceğim.GET metoduyla gönderdiğimiz verileri sayfada Request.QueryString komutuyla çağırabilirsiniz.Fazla uzatmadan kodlara geçelim.
Bu bizim içerik alma sayfamız olsun:
İlk önce bu kod ile jquery kütüphanesini sayfamıza çağıralım:
- Kod: Tümünü seç
<script language="javascript" src="jquery-1.3.2.min.js"></script>
Daha sonra ajax isteği oluşturan bir fonksiyon yazalım:
- Kod: Tümünü seç
<script language="javascript">
function icerikal(){
$.ajax({
type: 'GET',
url: 'icerik.asp',
data: 'tur=haber',
success: function(ajaxCevap) {
$('#sonuc').html(ajaxCevap);
}
});
}
</script>
TYPE ile veri gönderme metodu,
URL ile veri göndereceğimiz ASP sayfasını,
DATA ile de verimizi belirliyoruz.Success da da Ajax işlemi başarılı olduğunda çalıştırılacak fonksiyonu belirtiyoruz.
DATA kısmında farkettiyseniz tur=haber yaptım.Buradaki tur QueryString'imiz oluyor.Böylelikle icerik.asp sayfamızdan haber içeriği çekmiş olacağız.icerik.asp sayfasında if kontrolü ile mesela tur=haber ise haberleri listele,tur=ders ise dersleri listele şeklinde bir sorgulama yapacağız.
Success da belirttiğimiz fonksiyon ise gelecek olan içeriğin, id'si sonuc olan Div elementimizde görünmesini sağlıyor.
Şimdi de bir buton oluşturacağız ve butona basıldığı takdirde icerikal() fonksiyonumuz çalışacak yani içerikleri almış olacağız.
- Kod: Tümünü seç
<button onclick="icerikal();">İçerik Al</button>
Onclick ile butona basıldığında çalışacak olan fonksiyonu belirledik.
Geriye içeriğin gözükeceği div'imiz kaldı:
- Kod: Tümünü seç
<div id="sonuc">İçerik Burda Gözükecek</div>
Şimdi de icerik.asp sayfamızda kontrolümüzü yapalım:
- Kod: Tümünü seç
<%
If Request.QueryString("tur")="haber" then
Response.write "Haber1<br>Haber2<br>Haber3<br>Haber4"
Elseif Request.QueryString("tur")="ders" then
Response.write "Ders1<br>Ders2<br>Ders3<br>Ders4"
End If
%>
Sayfamızdaki butona bastığımızda haberlerin listelendiğini göreceksiniz.Dersleri de denemek için DATA kısmını 'tur=ders' yapmanız yeter.
Eğer Türkçe karakter sorunu yaşarsanız icerik.asp sayfanıza şu kodu ekleyin:
- Kod: Tümünü seç
<%
Response.Charset="windows-1254"
%>
Şimdi de POST metodunu anlatalım:
Aslında ikisi arasında pek fark yok.Kodlarda ufak bi değişiklikle post metoduyla veri alma işlemini gerçekleştirebilirsiniz.
Bu bizim içerik alma sayfamız.Farkettiyseniz type parametresi POST.Onun haricinde hiçbir değişiklik yapmıyoruz.Data kısmınıda aynı bırakıyoruz.tur=haber şeklinde gönderdik.Asp sayfamızda da Request.Form("tur") şeklinde alacağız çok basit.
- Kod: Tümünü seç
<script language="javascript" src="jquery-1.3.2.min.js"></script>
<script language="javascript">
function icerikal(){
$.ajax({
type: 'POST',
url: 'icerik.asp',
data: 'tur=haber',
success: function(ajaxCevap) {
$('#sonuc').html(ajaxCevap);
}
});
}
</script>
<button onclick="icerikal();">Ýçerik Al</button>
<div id="sonuc">Ýçerik Burda Gözükecek</div>
İşte ASP sayfamız:
- Kod: Tümünü seç
<%
Response.Charset="windows-1254"
%>
<%
If Request.Form("tur")="haber" then
Response.write "Haber1<br>Haber2<br>Haber3<br>Haber4"
Elseif Request.Form("tur")="ders" then
Response.write "Ders1<br>Ders2<br>Ders3<br>Ders4"
End If
%>
Umarım anlatabilmişimdir.
