From http://www.w3schools.com (Copyright Refsnes Data)

AJAX Database Example

« Previous Next Chapter »

AJAX can be used for interactive communication with a database.

AJAX database example

The following example will demonstrate how a web page can fetch information from a database with AJAX technology.

Select a customer in the drop-down box below:

Select a Customer:

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 type="text/javascript" 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>

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

</body>
</html>

As you can see it is just a simple HTML form with a drop down box called "customers".

The <div> below the form will be 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 AJAX JavaScript

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

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()
{
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  return new XMLHttpRequest();
  }
if (window.ActiveXObject)
  {
  // code for IE6, IE5
  return new ActiveXObject("Microsoft.XMLHTTP");
  }
return null;
}

The AJAX server page

The server page called by the JavaScript above, is an ASP file called "getcustomer.asp".

The ASP page is written in VBScript for an Internet Information Server (IIS). It could easily be rewritten in PHP, or some other server language. Look at a corresponding example in PHP.

The code runs a query against a database, and returns the result in an HTML table:

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

« Previous Next Chapter »

From http://www.w3schools.com (Copyright Refsnes Data)