Web Forms AJAX

## Web Building

HOME Web Empty Site Web Database

## PHP Demo

PHP Demo PHP Website PHP Styles PHP Database PHP Navigation PHP Ajax

## ASP Demo

ASP Demo ASP Website ASP Styles ASP Database ASP Login ASP Security ASP Navigation ASP Ajax

## .NET Web Pages

WebPages Demo WebPages Website WebPages Styles WebPages Database WebPages Login WebPages Security WebPages Navigation WebPages Ajax

## .NET Web Forms

WebForms Demo WebForms Website WebForms Styles WebForms Database WebForms Navigation WebForms Ajax

## Web Building

Web Design Web Quality Web WAI Web Validation Web SEO Web TCP/IP

## Web Hosting

Host Intro Host Providers Host Domains Host Capacity Host Email Host Technologies Host Databases Host Types Host E-commerce

# ASP.NET Web Forms - AJAX

« Previous
Next Chapter »

Learn ASP.NET Web Forms by building a web site from scratch.

Part V: Displaying Data Using AJAX.

## What We Will Do

In this chapter we will:

- Displaing data from the database using AJAX

## Create an AJAX Server Page

In your web folder (DemoWebForms), create a new ASPX file named "getCustomers.aspx".

Put the following code inside the file:

## getCustomers.aspx

<%@ Import Namespace="System.IO" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.OleDb" %>
<%
Dim dbconn As OleDbConnection
Dim objAdapter As OleDbDataAdapter
Dim objTable As DataTable
Dim objRow As DataRow
Dim objDataSet As New DataSet()
dbconn=New OledbConnection("Provider=Microsoft.Jet.OLEDB.4.0;data source=C:\WebData\Northwind.mdb")
objAdapter=New OledbDataAdapter("SELECT CompanyName,City,Country FROM Customers",dbconn)
objAdapter.Fill(objDataSet,"customers")
objTable=objDataSet.Tables("customers")
objRow=objTable.Rows(0)
response.write("<table border='1'>")
response.write("<tr><th>Name</th><th>City</th><th>Country</th></tr>")
for each x in objTable.Rows
response.write("<tr>")
response.write("<td>" & x("companyname") & "</td>")
response.write("<td>" & x("city") & "</td>")
response.write("<td>" & x("country") & "</td>")
response.write("</tr>")
next
response.write("</table>")
dbconn.Close()
%>

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

## Create an AJAX Browser Page

In your "DemoWebForms" 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.aspx",true);
xmlhttp.send();
</script>
</body>
</html>
Try it Yourself »

## Congratulations

You have created your first data page using AJAX.

« Previous
Next Chapter »

## Your suggestion:

Your E-mail (optional):

Page address:

Description:

Close [X]

## Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

## WEB HOSTING

Best Web Hosting UK Reseller Hosting Wow! $5 SSD Hosting

## WEB BUILDING

Download XML Editor
FREE Website BUILDER FREE Website Creator

## WEB RESOURCES

Web Statistics Web Validation

## SHARE THIS PAGE