It’s so much easier than you think to get started using AJAX, you just need a basic knowledge of JavaScript and Classic ASP to build your first AJAX enabled page.
There are 3 parts to every AJAX request.
- The Request Page - this can be HTML, ASP, ASPX, PHP or any other type of web page you need to work with.
- JavaScript Functions - these are included in the Request Page, and handle the AJAX request and response.
- The Server Side Page - this page receives the request on the server, and sends something back to the JavaScript Function
Our simple example will search for the first name and last name from the database and display it on the page. This is a very simple version. All of this will occur without the page reloading, giving us the magical AJAX effect!
The below code will really helped you to understand the link between classic ASP and Ajax
This page can be any type of web page, and can provide many ways of launching an AJAX request. For our simple example, we are using two text boxes and onKeyUp() event of JavaScript to show the response.
<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>
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></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=xmlHttp.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;
}
<%
'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
%>
That's all the coding required, you can download the files for the demo below for the quick solution.
No comments:
Post a Comment