AJAX Datenbank

<html>
<head>
<script src="vyom.js"></script>
</head>
<body>
<form>
Select a Customer:
<select name="customers" onchange="showCustomer(this.value)">
<option value="ALFKI">Matrin Luther
<option value="NORTS ">Bil Gates
<option value="WOLZA">Newton
</select>
</form>
<p>
<div id="txtHint"><b>Customer info will be listed here.</b></div>
</p>
</body>
</html>

Der Ausgang dieses einfachen HTML Form willbe ein Tropfen schachteln unten angerufene „Kunden“.

Der Punkt unterhalb der Form enthält einen Div. Umbau, der „txtHint“ genannt wird. Die Div. wird als placeholder für Info verwendet, das vom web server zurückgeholt wird.

Wenn die auserwählten Daten des Benutzers, eine Funktion, die „showCustomer genannt wird ()“ durchgeführt werden. Die Durchführung der Funktion wird durch den „onchange“ Fall des Javascript ausgelöst. Mit anderen Worten: Jedesmal wenn der Benutzer den Wert im Tropfen unten ändern kann, boxen, das Funktion showCustomer wird benannt.

Der Javascriptcode wird nachstehend aufgeführt

Das AJAX Javascript

Dieses ist der Javascriptcode, der in der Akte „vyom.js“ gespeichert wird:

var xmlHttp

function showCustomer(str)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
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 || xmlHttp.readyState=="complete")
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText
}
}

function GetXmlHttpObject()
{
var objXMLHttp=null
if (window.XMLHttpRequest)
{ objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
}

Die AJAX Bediener-Seite

Der Bediener paginierte benannt durch das Javascript, ist eine einfache Asp Akte, die hat Namen „getcustomer.asp“

Die Seite wird in VBScript für den Internet-Informationsserver (IIS) geschrieben. Sie könnte in PHP oder in einigen anderen Bedienersprachen leicht neu geschrieben werden.

Der Code läßt einen SQL gegen eine Datenbank laufen und bringt die Resultate als HTML Tabelle zurück:

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/vyom.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>")