February 12th, 2008, 08:57 AM
|
 |
Contributing User
|
|
Join Date: Mar 2004
Location: NJ
|
|
|
Simple/Reusable AJAX query with Classic ASP.
Hey Guys. I've been a member here for a long time and decided to try to share some code that might be helpful to others. I hope someone can get some use out of it. The zip file contains eveything you need including the access DB and the "workingbar.gif". All you have to do is give the DB a dsn name of "ajax" and you will be ready to go.
Basic HTML Page
Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Update Form</title>
<script src="ajax.js" language="javascript"></script>
<script>
var whichLink = "nameQuery.asp"
var whichElement = "insert_response"
</script>
</head>
<body>
<form name="form1" action="" method="post">
First<input name="first_name" id="first_name" type="text" onKeyUp="showData()"><br>
Last<input name="last_name" id="last_name" type="text" onKeyUp="showData()"><br><br><br>
<div id="insert_response"></div>
</form>
</body>
</html>
This is the .js file.
Code:
// JavaScript Document
/*
This is a dynamic ajax query script. It uses the variables, enabling it to work with any page without having to recreate a new query script. Currently this is only for querying data.
I am working on one for inserting and updating data also.
whichElement and whichLink are defined in the page calling the function.
I.E.
whichLink = "nameQuery.asp" this is the page making the query to the database.
whichElement = "nameList" this is the element where the data will be returned on the original page.
this function uses both the "name" attribute and the "id" attribute but could just as easily only use one or the other.
-created by krstofer@teamshibby.com. Based off of script found @ w3schools.com
*/
var xmlHttp
function showData()
{
//this shows the "working" graphic when the query page is retrieving data
document.getElementById(whichElement).innerHTML = "<div align=center><b>Working....</b><br><br><img src='workingBar.gif'></div>"
//by setting these values to "" it prevents an undefined error. Also defining these outside of the function will add existing data to the variable which will cause an error.
var theForm = ""
var howManyElement = ""
var daString = ""
theForm = document.form1
//this finds the number of elements on the form and assigns the number to the howManyElement variable.
howManyElement = theForm.elements.length;
xmlHttp=GetXmlHttpObject();
//this for block creates the string with all the data in the url. The loop goes through each element and assigns the form name and the value to the string creating a "first=brian&last=collier' string if the form contains a 'first' field and a 'last' field.
for (i=0; i<howManyElement; i++){
daString = daString + theForm.elements[i].name+ "="+theForm.elements[i].value+"&";
}
if (xmlHttp==null)
{
alert ("Your browser does not support AJAX!");
return;
}
//the 'whichLink' variable is assigned on the page making the request.
var url=whichLink;
url=url+"?"+daString;
url=url+"sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
//alert(url)//this is used to view the URL being sent to the query page.
}
function stateChanged()
{
if (xmlHttp.readyState==4)
{
document.getElementById(whichElement).innerHTML=xm lHttp.responseText;
}
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
The asp query page
Code:
<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<%
'this creates the dynamic query for the search. This is a very simple version.
first_name = request.QueryString("first_name")
last_name = request.QueryString("last_name")
if first_name <> "" and last_name = "" then
dynQuery = "first_name like '"& first_name&"%'"
elseif first_name = "" and last_name <> "" then
dynQuery = "last_name like '"& last_name&"%'"
elseif first_name <> "" and last_name <> "" then
dynQuery = "last_name like '"& last_name &"%' AND first_name like '"&first_name&"%'"
end if
%>
<%
Dim rs1
Dim conn
dim query
dim Cmd
conn = "dsn=ajax;"
Set rs1 = Server.CreateObject("ADODB.Recordset")
rs1.ActiveConnection = conn
rs1.Source = "select * from names where " & dynQuery
rs1.CursorType = 0
rs1.CursorLocation = 2
rs1.LockType = 1
rs1.Open()
rs1_numRows = 0
Dim Repeat1__numRows
Dim Repeat1__index
Repeat1__numRows = -1
Repeat1__index = 0
rs1_numRows = rs1_numRows + Repeat1__numRows
%>
<%
While ((Repeat1__numRows <> 0) AND (NOT rs1.EOF))
response.Write(rs1("first_name") & " " & rs1("last_name") & " | " & rs1("email") & "<br><br>")
Repeat1__index=Repeat1__index+1
Repeat1__numRows=Repeat1__numRows-1
rs1.MoveNext()
Wend
rs1.Close()
Set rs1 = Nothing
%>
|
ASP Free Forums Sponsor:
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
