AJAX Database Example


AJAX can be used to communicate with a database dynamically.


AJAX Database Example

The example below will demonstrate how a web page can read information from a database using AJAX: Please select a customer in the dropdown list below:

Example


Customer information will be listed here...

Try it Yourself »


Example Explained - The showCustomer() Function

When a user selects a customer in the dropdown list above, the function named "showCustomer()" is executed. This function is triggered by the "onchange" event:

function showCustomer(str) { var xmlhttp; if (str == "") { document.getElementById("txtHint").innerHTML = ""; return } if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest() } else { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP") } xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { document.getElementById("txtHint").innerHTML = xmlhttp.responseText } } xmlhttp.open("GET", "/try/ajax/getcustomer.php?q=" + str, true); xmlhttp.send() }

The showCustomer() function performs the following tasks:

  • Check if a customer has been selected
  • Create an XMLHttpRequest object
  • Execute the created function when the server response is ready
  • Send the request to a file on the server
  • Note that we have added a parameter q (with the content of the input field) to the URL

The AJAX Server Page

The server page called by the JavaScript above is a PHP file named "getcustomer.php".

It is also easy to write the server file in PHP, or in other server languages. SeeThe corresponding example written in PHP。

The source code in "getcustomer.php" is responsible for querying the database, and then returns the results 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>")
%>
Other Extensions