|
AJAX can be used for interactive communication
with a database.
AJAX Database Example
In the AJAX example below we will demonstrate how a web page
can fetch information from a database using AJAX technology.
Select a Name in the Box Below
Customer info will be listed here.
AJAX Example Explained
The example above contains a simple HTML form and a link to a
JavaScript:
<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 value="NORTS ">North/South
<option value="WOLZA">Wolski Zajazd
</select>
</form>
<p>
<div id="txtHint"><b>Customer info will be listed here.</b></div>
</p>
</body>
</html>
|
As you can see it is just a simple HTML form with a drop down
box called "customers".
The paragraph below the form contains a div called "txtHint".
The div is used as a placeholder for info retrieved from the web
server.
When the user selects data, a function called "showCustomer()"
is executed. The execution of the function is triggered by the "onchange"
event. In other words: Each time the user 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 "selectcustomer.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 called "getcustomer.asp".
The page is written in VBScript for an Internet Information
Server (IIS). It could easily be rewritten in PHP, or some other
server language.
The code runs an SQL against a database and returns the
result as an HTML table:
<%
Set conn = Server.CreateObject("ADODB.Connection")
conn.Open "Driver={Microsoft Access Driver (*.mdb)}; DBQ=" &
Server.MapPath("northwind.mdb")
Set rs = Server.CreateObject("ADODB.Recordset")
sql = "SELECT * FROM Customers WHERE CustomerID LIKE '%%" &
Request.QueryString("q") &"%%'"
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>")
%>
|
|
