AJAX Database Example
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:
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>")
%> |
Make your web applications look like a million bucks
|
|
Most web applications today use boring methods to present data to their viewers using grids or simple HTML tables. FusionCharts induces "life" into the web applications by converting monotonous data into lively charts, gauges & maps.
FusionCharts works with all technologies like ASP, ASP.NET, PHP, ColdFusion, Ruby on Rails, JSP, HTML pages etc.
and connects to any database to render animated & interactive charts. It takes less than 15 minutes and no expertise
whatsoever to build your first chart and just a glance of it to captivate your audience. This fact is endorsed by our
12,000 customers and 150,000 users which include a majority of the Fortune 500 companies.
And yeah, your applications could look like a million bucks by spending just $69.
So go ahead, download your
copy of FusionCharts and start "wow-ing" your customers now!
|
 |
W3Schools' Online Certification Program
The perfect solution for professionals who need to balance work, family, and career building.
More than 4000 certificates already issued!
|
The HTML Certificate documents your knowledge of HTML, XHTML, and CSS.
The JavaScript Certificate documents your knowledge of JavaScript and HTML DOM.
The XML Certificate documents your knowledge of XML, XML DOM and XSLT.
The ASP Certificate documents your knowledge of ASP, SQL, and ADO.
The PHP Certificate documents your knowledge of PHP and SQL (MySQL).
|
