PHP Kod: Kodu kopyalamak için üzerine çift tıklayın!
function oku()
{
url = 'oku.php?rand='+ Math.random();
var html = '';
var i;
http.open("GET",url,true);
http.onreadystatechange = function dataGetir()
{
if(http.readyState == 4)
{
veri = null;
if(http.responseText)
{
veri = eval("("+http.responseText+");");
html = '<table width="400" border="1" align="center" cellpadding="0" cellspacing="0">'
+ '<tr>'
+ '<td>No</td>'
+ '<td>Adı</td>'
+ '<td>Soyadı</td>'
+ '<td>Telefon</td>'
+ '<td>Tarih</td>'
+ '</tr>';
for(i=0; i<veri.s.length; i++)
{
html = html + "<tr>"
+ "<td>" + (i+1) + "</td>"
+ "<td>" + veri.s[i].data.adi + "</td>"
+ "<td>" + veri.s[i].data.soyadi + "</td>"
+ "<td>" + veri.s[i].data.tel + "</td>"
+ "<td>" + veri.s[i].data.tarih + "</td>"
+ "</tr>";
}
html = html + "</tr>"
+ "<td colspan='5' align='center'>"
+ "<input type='button' value='kaybol' onclick='kaybol()'>"
+ "</td>"
+ "</tr>"
+ "</table>";
document.getElementById('satirlar').innerHTML = html;
}
else
{
alert("hata");
}
}
}
http.send(null);
}
Bu komut satırında ise veritabanına bağlanıp dataları Array olarak çıktı sağlayan oku.php dosyasına bağlanıp dataları okuyarak datanın Array objesi olarak alabilmesi için eval yöntemini kullanıyoruz. Şayet bu yöntemi kullanmazsak gelen data text olarak nitelendirilecek, dolayısıyla datayı ayıklayamayacağız. Veritabanından datayı aldıktan sonra, HTML tablosunun baş kısmını oluşturup, data Array sayısı kadar dönen bir for döngüsüyle tablonun tr alanlarını oluşturup sonuna da tablonun alt kısmında tabloyu yok edecek bir buton ekleyip
innetHTML kullanarak sayfanın sonra tanımladığımız <span id="satirlar"></span> katmanına oluşturduğumuz çıktıyı yazdırıyoruz. Son olarak oluşturduğumuz tabloyu yokeden kaybol fonksiyonunda belirttiğimiz katmanın değerini =" bir nevi null yaparak siliyoruz.
PHP Kod: Kodu kopyalamak için üzerine çift tıklayın!
function kaybol()
{
document.getElementById('satirlar').innerHTML = '';
}
Görüldüğü gibi biraz çaba sarf ederek web sayfamızı daha da dinamik bir yapıya büründürüp çık hızlı bir şeklide çalışmasını sağlayabiliriz. Ajax'ın sadece hızlı olmasını düşünmemeliyiz. Büyük hit alan web sayfalarının oluşturacağı bant genişliğini bu yontemi kullanarak çok daha makul seviyelere indirebiliriz.