Akıllı sözlük yazı dizimizin sonuncusunu gelmiş bulunuyoruz.
Bu yazımız da ise XHR kullanılarak SQL'deki bilgileri listeletip leb demeden leblebinin anlaşılmasını sağlayacağız.
<script>
var req;
function Initialize()
{
try
{
req=new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
req=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(oc)
{
req=null;
}
}
if(!req&&typeof XMLHttpRequest!="undefined")
{
req=new XMLHttpRequest();
}
}
function SendQuery(key)
{
Initialize();
var url="http://www.site.com/sozluk/dict.aspx?k="+key;
if(req!=null)
{
req.onreadystatechange = Process;
req.open("GET", url, true);
req.send(null);
}
}
function Process()
{
if (req.readyState == 4)
{
// only if "OK"
if (req.status == 200)
{
if(req.responseText=="")
HideDiv("autocomplete");
else
{
ShowDiv("autocomplete");
document.getElementById("autocomplete").innerHTML =req.responseText;
}
}
else
{
document.getElementById("autocomplete").innerHTML="Problem oluştu:<br>"+req.statusText;
}
}
}
function ShowDiv(divid)
{
if (document.layers) document.layers[divid].visibility="show";
else document.getElementById(divid).style.visibility="visible";
}
function HideDiv(divid)
{
if (document.layers) document.layers[divid].visibility="hide";
else document.getElementById(divid).style.visibility="hidden";
}
function BodyLoad()
{
HideDiv("autocomplete");
document.form1.keyword.focus();
}
</script>
XHR metodumuzu en üstte belirttik ve daha sonra farklı fonksiyonlar oluşturarak querystring ile sql'den gelen verilerin listeletilmesini sağlamış olduk.
CSS ile tasarım tarafında da kendinize özgü bir çalışma yapıp süsleyebilirsiniz.
Devamı olarak şu şekilde tanımladım.
<body onload="BodyLoad();">
<div align="center" class="heading">
<p><span class="style1">Akıllı Sözlük</span> <br>
</p>
</div>
<div align="center">
</div>
<form name="form1">
<center>
<input name="keyword" onKeyUp="SendQuery(this.value)" style="WIDTH:500px" autocomplete="off">
<div align="left" class="box" id="autocomplete" style="WIDTH:500px;BACKGROUND-COLOR:#ccccff"></div>
</center>
</form>
<p align="center"> </p>
</body>
sozluk.html olarak da kullanabileceğiniz bu sayfa ile verilerimizi XHR kullanarak listeletmiş oluyoruz.
Örnek görünüm şu şekilde :
ve böylelikle yazı dizimizin sonuna gelmiş bulunuyoruz.
Umarım faydalı olmuştur.
Görüşmek dileğiyle...