AJAX Database

<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>

The output of this simple HTML form willbe a drop down box called "customers".

The paragraph below the form contains a div tag called "txtHint". The div is used as a placeholder for info retrieved from the web server.

When the user select data, a function called "showCustomer()" is executed. The execution of the function is triggered by the "onchange" event of the javascript . In other words: Each time the user can change the value in the drop down box, the function showCustomer is called.

The JavaScript code is listed below

The AJAX JavaScript

This is the JavaScript code stored in the file "vyom.js":

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
}

The AJAX Server Page

The server paged called by the JavaScript, is a simple ASP file having name "getcustomer.asp"

The page is written in VBScript for the Internet Information Server (IIS). It could easily be rewritten in PHP, or some other server languages.

The code runs an SQL against a database and returns the results as an HTML table:

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>")

Share And Enjoy:These icons link to social bookmarking sites where readers can share and discover new web pages.