HOME HTML CSS JAVASCRIPT SQL PHP JQUERY XML ASP.NET MORE...
REFERENCES | EXAMPLES | FORUM | ABOUT

ASP Classic - AJAX


Learn ASP Classic by building a web site from scratch.

Part VII: Displaying Data Using AJAX.


What We Will Do

In this chapter we will:

  • Display data from the database using AJAX

Create an AJAX Server Page

In your web folder (DemoASP), create a new ASP file named "getCustomers.asp".

Put the following code inside the ASP file:

getCustomers.asp

<%
response.ContentType="text/HTML"
response.Charset="ISO-8859-1"

on error resume next
set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
conn.Open("C:/WebData/Northwind.mdb")
set rs = Server.CreateObject("ADODB.recordset")
sql="SELECT CompanyName,City,Country FROM Customers"

rs.Open sql, conn
if err <> 0 then
  response.write(err.description)
  set rs=nothing
  set conn=nothing
else
  response.write("<table border='1'>")
  response.write("<tr><th>Name</th><th>City</th><th>Country</th></tr>")
  do until rs.EOF
    response.write("<tr>")
    for each x in rs.Fields
      response.write("<td>" & x.value & "</td>")
    next
    response.write("</tr>")
    rs.MoveNext
  loop
  response.write("</table>")
  rs.close
  conn.close
end if
on error goto 0
%>

The file above is a standard ASP file, returning only an HTML table.


Create an AJAX Browser Page

In your "DemoASP" folder, create a new file named "Ajax.html".

Put the following code inside the file:

Ajax.html

<!DOCTYPE html>
<html>
<head>
<title>ASP Demo</title>
<link href="Site.css" rel="stylesheet">
</head>
<body>
<div id="main">
<h1>Customers</h1>
<div id="t01"></div>
</div>

<script>
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("t01").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getCustomers.asp",true);
xmlhttp.send();
</script>

</body>
</html>

Try it Yourself »


Congratulations

You have created your first data page using AJAX.



Your suggestion:

Close [X]

Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

WEB BUILDING

Download XML Editor FREE Website BUILDER Free HTML5 Templates

SHARE THIS PAGE