Merhaba arkadaşlar uzun zamandan beri asp ve ajax kullananlar, kullanmak isteyenler için ASP ile ajax derslerine başlıyorum…

Ajax ( asynchronous javascript and xml ) genellikle java script kullanarak sayfanın yenilenmeden belli bir katmanını güncelleme işlemidir. ( en basit anlatımıyla )

Piyasada dolaşan bir çok javascript kodu var bende bunlardan birini kullanacağım.

Kodumuz ——————————————

<script>
function yeni_nesne(){
var nesneyarat;
/*@cc_on @*/
/*@if (@_jscript_version >= 5) try { nesneyarat = new ActiveXObject(”Msxml2.XMLHTTP”); }
catch (e) {
try { nesneyarat = new ActiveXObject(”Microsoft.XMLHTTP”); }
catch (E) { nesneyarat = false; }
}@end @*/
if (!nesneyarat && typeof XMLHttpRequest!=’undefined’) {
try {
nesneyarat= new XMLHttpRequest();
} catch (e) {
nesneyarat=false;
}
}
return nesneyarat;
}

function AoL(id,cikti,hedef) {
var aktifform  = document.getElementById(id);
var ekranayaz  = document.getElementById(cikti);
var ciktiver   = new String(”");
var name, value;
for(var I = 0; I < aktifform.elements.length; I++){
name  = aktifform.elements[I].name;
value = aktifform.elements[I].value;
ciktiver += escape(name) +’='+ encodeURIComponent(value) +’&’;
}
var nesneiste = new yeni_nesne();
nesneiste.open(”post”, hedef, true);
nesneiste.setRequestHeader(”Content-type”, “application/x-www-form-urlencoded; charset=iso-8859-9″);
nesneiste.send(ciktiver);
nesneiste.onreadystatechange = function() {
if (nesneiste.readyState == 4 && nesneiste.status == 200) {
ekranayaz.innerHTML = nesneiste.responseText;
}
else { ekranayaz.innerHTML = ”; }
}
return false;
}
</script>

Kodumuz Bitti ——————————————

üstteki Javascript kodunu sayfanıza ekleyebilirsiniz daha sonra işlemlere başlayacağız.

Evet  www.colakogludemir.com.tr adresinde bulunan ve ajax ile çalışan hesaplama bölümünü inceliyoruz. Sanırım 2 sene kadar önce yapmıştım.

Kullanıcı siteye girdiğince boru çaplarını ajax ile hesaplayabiliyor böylece sayfa yenilenmeden ve fazla beklemeden istediği sonuca ulaşabiliyor.

Ajax ile formu post edebilmek için üstteki javascript kodunu sayfamıza ekledikten sonra form alanımıza gelip

<form id=”form” onSubmit=”return AoL(this.id,’sonuc’,'hesapla.asp’)”>   kalın ile yazılı olan yeri ekliyoruz.

burada dikkat etmeniz gereken javascript kodları

AOL(this.id,’sonuc’,'hesapla.asp’)

This.id’nin anlamı kullanıldı elemanın id değerini almasıdır. Örnegin burada form’da kullanıldığı için this.id = form’dur.

sonuc  ajax ile güncellenecek alandır. istediğiniz şekilde güncellenecek elemanı secebilirsiniz. Örnegin.

<div id=”sonuc”></div> yada <td id=”sonuc”>  gibi secenekleri deneme yanılma yolu ile genişletebilirsiniz.

Hesapla.asp illa hesapla olacak diye bir kaide yok siz hangi sayfaya post edecek siniz oraya o sayfayı alacaksınız.

asp ve ajax ile post işlemi

Hesapla.asp içine

<% response.write(”ajax post işlem sonucu”)%> yazıp kaydedelim.

Sonra yaptıgımız ajax form post çalışıyor mu deniyelim.

Başka bir derste görüşmek üzere…