Ajax ile formdan post edilen veriye göre işlem yapmak

Ajax ile linklerde href=”javascript:fonksiyon();” şeklinde işlemler yapabiliyoruz. Aynı şekilde bir form içinde post edilen veriler içinde Ajax kullanabilir, sayfayı refresh etmeden veriler alabiliriz. Bunun bir yöntemi input nesnesinin onkeyup özelliğidir. Aşağıdaki gibi bir form hazırlayalım.

<form>
İsim: <input type=”text” id=”txt1″ onkeyup=”showHint(this.value)” />
</form>
<p>Sonuç: <span id=”txtHint”></span></p>

Aşağıdaki kodları da bir js dosyası yapıp içine yapıştırarak ya da sayfanızın html kodlarında head sekmeleri arasına yapıştırın.

var xmlhttp

function showHint(str)
{
if (str.length==0)
{
document.getElementById(“txtHint”).innerHTML=”";
return;
}
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
{
alert (“Your browser does not support XMLHTTP!”);
return;
}
var url=”sonuc.asp”;
url=url+”?q=”+str;
url=url+”&sid=”+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open(“GET”,url,true);
xmlhttp.send(null);
}

function stateChanged()
{
if (xmlhttp.readyState==4)
{
document.getElementById(“txtHint”).innerHTML=xmlhttp.responseText;
}
}

function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari için kodlar
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
// IE6, IE5 için kodlar
return new ActiveXObject(“Microsoft.XMLHTTP”);
}
return null;
}

İşlemleri showHint() fonksiyonu aracılığıyla sonuc.asp içinde yapıyoruz. sonuc.asp’de normal bir asp dosyası içinde yapabileceğiniz her işlemi yapıyorsunuz. Bu sayfada Response.Write ile yazdırdığınız sonuçlar en yukarda formun olduğu sayfada showHint spanı içinde yazılır.