AJAX Veritabanı

< Önceki Sonraki >

AJAX, bir veritabanıyla etkileşimli iletişim kurmak için kullanılabilir.

AJAX Veritabanı Örneği

Aşağıdaki AJAX örneğinde bir web sayfasının nasıl AJAX teknolojisini kullanarak veritabanından veri çekebileceğini göreceğiz.

Aşağıdaki listeden bir isim seçin

Müşteri seçimi:
Müşteri bilgisi burada listelenecek.

AJAX Örneğinin açıklaması

Yukarıdaki örnek basit bir html formu ve bir javascript koduna bağlantı içerir:

<html>

<head>
<script src="selectcustomer.js"></script>
</head>
<body>
<form>
Select a Customer:
<select name="customers" onchange="showCustomer(this.value)">

  <option value="ALFKI">Alfreds Futterkiste</option>
  <option value="NORTS ">North/South</option>
  <option value="WOLZA">Wolski Zajazd</option>

</select>
</form>
<p>
<div id="txtHint"><b>Customer info will be listed here.</b></div>
</p>
</body>

</html>

Gördüğünüz gibi bu sadece "customers" adında bir seçmeli liste öğesi içeren basit bir html formudur.

Formun altındaki paragraf "txtHint" adında bir div öğesi içerir. Bu div öğesi sunucudan gelen veri için bir yer tutucu olarak kullanılmaktadır.

Kullanıcı veri seçtiğinde "showCustomer()" işlevi çalıştırılır. Bu işlevin çalışması "onchange" olayı tarafından tetiklenir. Başka bir deyişle kullanıcı açılır listenin değerini her değiştirdiğinde showCustomer işlevi çağrılır.

JavaScript kodu aşağıda gösterilmektedir.

AJAX JavaScript kodu

"selectcustomer.js" dosyasındaki kod aşağıdaki gibidir:

var xmlHttp

function showCustomer(str)
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
  {
  alert ("Your browser does not support AJAX!");
  return;
  }
var url="getcustomer.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()
{
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;
}

AJAX Sunucu Sayfası

JavaScript tarafından çağrılan sunucu sayfası "getcustomer.asp" adında basit bir asp dosyasıdır.

Sayfa VBScript dilinde bir Internet Information Server (IIS) sunucu için yazılmıştır. Kolayca PHP dilinde yada başka bir sunucu taraflı dil ile de yazılabilir. PHP ile yazılmış benzer bir örnek için tıklayın.

Bu kod bir veritabanında SQL sorgusu çalıştırır ve sonucu bir HTML tablosu olarak döner:

<%
response.expires=-1
sql="SELECT * FROM CUSTOMERS WHERE CUSTOMERID="
sql=sql & "'" & request.querystring("q") & "'"

set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
conn.Open(Server.Mappath("/db/northwind.mdb"))
set rs = Server.CreateObject("ADODB.recordset")
rs.Open sql, conn

response.write("<table>")
do until rs.EOF
  for each x in rs.Fields
    response.write("<tr><td><b>" & x.name & "</b></td>")
    response.write("<td>" & x.value & "</td></tr>")
  next
  rs.MoveNext
loop

response.write("</table>")
%>
< Önceki Sonraki >
ajax kodları, ajax dersi, ajax nasıl, learn ajax, ajax how to, ajax nedir, ajax öğren, ajax dersleri, ajax örnekleri, ajax programlama, ajax lessons, ajax, ajax tutorial, ajax örneği,