Uygulamada önemini vurgulamak istediğim nokta Ajax teknolojisiyle herhangi bir kaynaktan daha hızlı ve kolay bir şekilde veri çekebiliriz. Aşağıda sizlerle paylaştığım basit uygulamada .txt uzantılı bir dosya içindeki verilere Ajax teknolojisini kullanarak ulaştık. Verileri ekranda görüntülemek için hazır gridlere ihtiyaç duymadık. Kullanmış olduğumuz divlerle kendi gridimizi kendimiz oluşturduk. Bu da uygulamanın boyutunu küçültmemize ve daha hızlı çalışmamıza olanak sağladı. Paylaşmış olduğum örnek uygulamada nasıl kullanmanız ve nelere dikkat etmeniz gerektiğini anlattım.
Örnek Uygulama
<head runat=”server”>
<title></title>
<%–CSS tanımlamamızı yapıyoruz.–%>
<style type=”text/css”>
.cl, .cl2
{
float: left;
min-height: 20px;
padding: 3px;
width: 180px;
}
.cl
{
background-color: red;
}
.cl2
{
background-color: yellow;
}
.clear
{
clear: both;
float: none;
height: 0;
}
#myGrid
{
font-size: 10pt;
}
#ortala
{
width: 1024px;
margin-right: auto;
margin-left: auto;
}
</style>
<%–AJAX kullanarak txt içindeki datayı çekiyoruz.–%><script language=”javascript” type=”text/javascript”>
function ajaxer() {
var xmlHttp;
try { xmlHttp = new XMLHttpRequest(); }
catch (e) {
try { xmlHttp = new ActiveXObject(“Msxml2.XMLHTTP”); }
catch (e) {
try { xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”); }
catch (e) { return false; }
}
}xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 || xmlHttp.readyState == “complete”) {
if (xmlHttp.status == 200) {var x;
//eval methodunu kullanarak satirlar değişkeninin içindekileri kod parçasıymış gibi çalıştırıyoruz.
var satirlar = eval(xmlHttp.responseText);for (x in satirlar) {
var xyz = eval(satirlar[x]);
//Çektiğimiz verileri div kullanarak grid oluşturup satırlara yazıyoruz.
document.getElementById(‘myGrid’).innerHTML += ” <div class=’row’>”;var i = 0;
//Çektiğimiz verileri oluşturduğumuz gridde sütunlara ayırıyoruz.
for (y in xyz) {
//Sütunların farklı renklerde olması için sorgu oluşturarak
//artarda olan kolonların farklı renkte olmasını sağlıyoruz.
i++;
if (i % 2 == 0) {document.getElementById(‘myGrid’).innerHTML += “<div class=’cl’>” + xyz[y] + “</div>”;
}
else {
document.getElementById(‘myGrid’).innerHTML += “<div class=’cl2′>” + xyz[y] + “</div>”;
}
}document.getElementById(‘myGrid’).innerHTML += “<div class=’clear’></div></div>”;
}
}
}
}
//data.txt dosyasını çağrıyoruz.
xmlHttp.open(“GET”, “data.txt”);
xmlHttp.send(null);
}
</script></head>
<body onload=“javascript:ajaxer();“>
<form id=”form1″ runat=”server”>
<div id=”ortala”>
<div id=”myGrid”>
</div>
</div>
</form>
</body>
Uygulamayı buradan indirebilirsiniz.
gurkank tarafından yazıldı 
