AJAX and Classic ASP

3.98 (88 votes)

Using the xmlhttpserver object in javascript to request an asp page containing script to output text.

UPDATE!! A new version of this article, using jQuery is available here.

Generic cross-browser js function to create an xmlhttpserver object. For a clear introduction to the basics of AJAX, this series of articles is particularly helpful: http://www.ibm.com/developerworks/web/library/wa-ajaxintro1.html.

function GetXmlHttpObject(handler)
{ 
var objXmlHttp=null;

if (navigator.userAgent.indexOf("MSIE")>=0)
{ 
var strName="Msxml2.XMLHTTP";
if (navigator.appVersion.indexOf("MSIE 5.5")>=0)
{
strName="Microsoft.XMLHTTP";
} 
try
{ 
objXmlHttp=new ActiveXObject(strName);
objXmlHttp.onreadystatechange=handler;
return objXmlHttp;
} 
catch(e)
{ 
alert("Error. Scripting for ActiveX might be disabled");
return;
} 
} 
if (navigator.userAgent.indexOf("Mozilla")>=0)
{
objXmlHttp=new XMLHttpRequest();
objXmlHttp.onload=handler;
objXmlHttp.onerror=handler;
return objXmlHttp;
}
} 

Example js function that is fired by a selected index change on an html SELECT element. This one recieves the CustomerID to append to the querystring of the asp script that will get executed. The first js function will call the second StateChanged function, which will output any returned string (responseText) to the innerHTML of a div.

function GetCustomer(id)
{ 
var url="FetchCustomer.asp?CustomerID="  + id ;

xmlHttp=GetXmlHttpObject(stateChanged);
xmlHttp.open("GET", url , true);
xmlHttp.send(null);
} 

function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById('CustomerDetails').innerHTML=xmlHttp.responseText;
}
} 

The select list with the onChange event wired up to the GetCustomer function.

<%
strProvider = "Provider=Microsoft.Jet.OLEDB.4.0;"
strDb = "Data Source=" & Server.MapPath("Northwind.mdb")
strConn = strProvider & strDb
Set Conn = Server.CreateObject("ADODB.Connection")
Conn.Open strConn
Set rs = Conn.Execute("SELECT [CustomerID], [CompanyName] FROM [Customers]")
If Not rs.EOF Then
%>
  <form>
  <select name="CustomerID" onChange="GetCustomer(this.value);">
  <option></option>
<%		
  Do Until rs.EOF
    Response.Write "<option value=""" & rs("CustomerID") & """>" 
    Response.Write rs("CompanyName") & "</option>" & VbCrLf
    rs.MoveNext
  Loop
  rs.Close : Set rs = Nothing : Conn.Close : Set Conn = Nothing 
%>
  </select>
  </form>
<%
Else
  rs.Close : Set rs = Nothing : Conn.Close : Set Conn = Nothing
  Response.Write "<p>Something bad went wrong</p>"
End If
%>
<div id="CustomerDetails"></div>

An example asp script that receives the value from the querystring and queries the database, outputting the result to the http Response, which is received by the xmlhttp object and changes its readystate property and fires the statechanged method, which writes the responseText to the div.

<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<%
strProvider = "Provider=Microsoft.Jet.OLEDB.4.0;"
strDb = "Data Source=" & Server.MapPath("Northwind.mdb")
strConn = strProvider & strDb
Set Conn = Server.CreateObject("ADODB.Connection")
Conn.Open strConn
query = "SELECT * FROM Customers WHERE CustomerID = ?"
CustomerID = Request.QueryString("CustomerID")
arParams = array(CustomerID)
set cmd = Server.CreateObject("ADODB.Command")
cmd.CommandText = query
set cmd.ActiveConnection = Conn
Set rs = cmd.Execute(,arParams,1)
If Not rs.EOF Then
Response.Write rs(1) & "<br />" & _
  rs(4) &  "<br />" & _
  rs(5) & "<br />" & _
  rs(6) & "<br />" & _
  rs(7) & "<br />" & _
  rs(8) & "<br />" & _
  "Tel: " & rs(9) & "<br />"
End If
rs.Close : Set rs = Nothing
set cmd = Nothing 
Conn.Close : Set Conn=nothing
%>

The sample above includes the use of a parameter array passed to the command's execute method. This helps protect against SQL injection.

You might also like...

Date Posted:
Last Updated:
Posted by:
Total Views to date: 81022

7 Comments

- Francisco

Gostaria de um Exemplo completo, não sei onde colocar essas rotinas. Sounovato.

- Mike

@Francisco

The first 3 code blocks go into the page that the user sees. The final block is a complete page.

- mehraveh

thank you. Its very good.

- Mike

This is one of the most popular articles on your site. Goes to show Microsoft that classic ASP is alive and well and, well, I for one love it still! Thanks!

- John

thanks,

- usman

how to call a function after statechanged returns a value...
I actually have called ajax on mouse over ... and have to show the result in a small div.. which appears on mouse over ... the issue I am getting is the div appears before the ajax gets the responce and shows nothing if i put delay it gives the same problem. so how can i call a funciton inside state changed.... ????

- Paul Scannell

I'm implementing this because I have users that use other browsers besides IE. I'm only in the beginning testing phase, but I noticed that I can only run the code snippets once. I have to close the browser and reload it again in order to something a little different. I can't just do a refresh.

Is there a way to create the ajax connection once and then use it over and over with different quereis, etc.?

Recent Comments

Pam 30/08/2017 11:30
In response to Sending Email in Razor Pages
Mike, RazorPages sound like a nice choice for somebody still working in ASP classic who wants to to...

Robby Robson 15/08/2017 00:43
In response to Routing in Razor Pages
Mike: great stuff. Now that .Core Standard 2.0 is formally out, how soon will you rewrite your book...

Satyabrata Mohapatra 28/07/2017 08:59
In response to Sending Email in Razor Pages
Bit off topic, but congratulation sir for your MVP award. You deserve it !!!...

Satyabrata Mohapatra 23/07/2017 16:43
In response to Razor Pages - The Elevator Pitch
@Dale Severin You can continue to build apps using asp.net web pages....

Satyabrata Mohapatra 23/07/2017 16:40
In response to Sending Email in Razor Pages
Thanks for sharing...learned a lot...

Gfw 22/07/2017 11:53
In response to Sending Email in Razor Pages
Question... Does System.Net.Mail support SSL?...

Dale Severin 20/07/2017 03:38
In response to Razor Pages - The Elevator Pitch
I work with razor web pages extensively. I appreciate the rapid development it permits me to I am as...

Obinna Okafor 14/07/2017 01:19
In response to Routing in Razor Pages
Thank you, Mike. Good post....

Satyabrata Mohapatra 11/07/2017 16:02
In response to Routing in Razor Pages
Very powerful routing system!!...

Cyrus 05/07/2017 03:41
In response to Razor Pages - Getting Started With The Preview
How can I trim packages and services as much as possible to use just razor pages? I don’t want to to...