AJAX ile Secime Gore Liste
Bir site tasarlarken, form islemlerinde en onemli konulardan biri, listeden yapilan secime gore yeni bir listenin belirmesi veya aktif listedeki bazi degerlerin guncellenmesi. Bu islemi AJAX teknolojisi ile gerceklestirebiliriz.

AJAX Nedir?
AJAX'in oncelikle bir programlama dili olmadigini bilmemiz gerekiyor. Bir programlama yontemidir. AJAX, "Asynchronous JavaScript And XML"'in basharflerinden olusmus bir kisaltmadir. AJAX ile kullanici dostu internet uygulamalari gelistirebilirsiniz. Javascript ve HTTP istekleri uzerine kurulu bir yontemdir.

Sitelerimizde kullanabilecegimiz yontemleri; form islemleri, belli araliklarla guncellenen uyarilar, son haberler olarak siralayabiliriz.

Ben size bu yazida form islemleri ile ilgili bilgiler ve kodlar vermeye calisacagim.

Form.html dosyasi olusturup icine basit bir form yerlestirebiliriz.
<html><head>
<script src="verisec.js"></script>
</head><body>
Listelenecek verileri seciniz:
<select name="veriler" onchange="VeriGoster(this.value)">

<option value="1">ASP</option>
<option value="2 ">CSS</option>
<option value="3">Internet</option>

</select></form><p>
<div id="Veriler"><b>Verilerimiz burda listelenecek.</b></div>
</p></body></html>


Bu dosyamizdan sonra ikinci dosyamiz olan verisec.asp dosyamizi olusturuyoruz. Siz bu dosyayi verisec.php veya kendinize gore duzenleyebilirsiniz.
<html><head></head><body>
<%
If Request.QueryString("q") = "1" then
Response.Write "ASP ile ilgili verilerimiz burada"
ElseIf Request.QueryString("q") = "2" then
Response.Write "CSS ile ilgili verilerimiz burada"
ElseIf Request.QueryString("q") = "1" then
Response.Write "Internet ile ilgili verilerimiz burada"
End If%>
</body></html>


Ve tum bu dosyalarimizin calismasini ve iliski kurmasini saglayan son dosyamizi verisec.js olarak belirliyoruz.
var xmlHttp

function VeriGoster(str)
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Tarayicinizi guncelleyiniz.");
return;
}
var url="verisec.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("Veriler").innerHTML = xmlHttp.responseText;
}
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}


ornek dosyayi gormek icin tiklayiniz.
January 23, 2009
Ayberk Atasay
Javascript/Ajax
4 yorum