Ajax Script Source Codes

Using Drop Down Boxes

<form name="myform" id="myform">
<table width="250" border="0">
<tr><td><strong>age:</strong></td></tr>
<tr><td>
<select name="age" onchange="showResults(this.value, document.myform.status.value, document.myform.gender.value)">
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
</select></td></tr>
<tr><td><strong>status:</strong></td></tr>
<tr><td>
<select name="status" onchange="showResults(document.myform.age.value, this.value, document.myform.gender.value)">
<option value="unemployed">unemployed</option>
<option value="employed">employed</option>
<option value="student">student</option>
</select>
</td></tr>
<tr><td><strong>gender:</strong></td></tr>
<tr><td>
<select name="gender" onchange="showResults(document.myform.age.value, document.myform.status.value, this.value)">
<option value="male">male</option>
<option value="female">female</option>
<option value="any">any</option>
</select>
</td></tr>
</table>
</form>
<div id="txtResults"><p style="font-style:italic">Results will be listed here.</p></div>

The ajax.js page uses the XMLHttpRequest object and the GET method to retrieve results from the getResults.asp page using querystrings. The GetXmlHttpObject() function uses a try catch block to create the most appropriate XMLHttpRequest object and alerts the user if unsuccessful. Create a new page and paste the following code and save it as ajax.js:

var xmlHttp

function showResults(str, str2, str3)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Your browser does not support the XMLHttpRequest object.")
return
}
var url="getResults.asp"
url=url+"?age="+str
url=url+"&status="+str2
url=url+"&gender="+str3
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}

function stateChanged()
{
if (xmlHttp.readyState == 0)
{
document.getElementById("txtResults").innerHTML = "<p> Search in progress...</p>"; //loading
}
else if(xmlHttp.readyState == 1)
{
document.getElementById("txtResults").innerHTML = "<p> Search in progress...</p>"; //loaded
}
else if(xmlHttp.readyState == 2)
{
document.getElementById("txtResults").innerHTML = "<p> Search in progress...</p>"; //interactive
}
else if(xmlHttp.readyState == 3)
{
document.getElementById("txtResults").innerHTML = "<p> Loading data...</p>";
}
else if (xmlHttp.readyState==4 '' xmlHttp.readyState=="complete")
{
document.getElementById("txtResults").innerHTML=xmlHttp.responseText
}
}

function GetXmlHttpObject()
{
var objXMLHttp=null

try {
objXMLHttp = new ActiveXObject("Msxml2.XMLHTTP"); //ie6 newest and fastest
} catch (e) {
try {
objXMLHttp = new ActiveXObject("Microsoft.XMLHTTP"); //ie5.5
} catch (e) {
objXMLHttp = null;
}
}

if (objXMLHttp==null)
{
objXMLHttp=new XMLHttpRequest() //standard
}
return objXMLHttp
}

This page only holds asp code to execute the query and write the results in a table and then returns those results to the XMLHttpRequest object. ** I have used a dynamic SELECT statement to illustrate the use of the querystring values. You should filter and sanitize all input data here and use a stored procedure if possible. Create a new page called getResults.asp and paste the following:


<%
a = Cint(Request.QueryString("age"))
s = Request.QueryString("status")
g = Request.QueryString("gender")

If g = "any" Then
g = "%"
End If

' sql to get results
sql="SELECT * FROM dbo.ajaxtest WHERE Age = " & a & " AND Gender LIKE '" & g & "' AND Status = '" & s & "'"
Set objConn = Server.CreateObject("ADODB.Connection")
objConn.Open strConn
Set objRS = objConn.Execute(sql)

If NOT objRS.EOF Then
Do While NOT objRS.eof
Response.Write("<table>")
Response.Write("<tr><td><strong>ID:</strong></td><td>" & objRS(0) & "</td></tr>")
Response.Write("<tr><td><strong>Age:</strong></td><td>" & objRS(1) & "</td></tr>")
Response.Write("<tr><td><strong>Gender:</strong></td><td>" & objRS(2) & "</td></tr>")
Response.Write("<tr><td><strong>Status:</strong></td><td>" & objRS(3) & "</td></tr>")
Response.Write("</table><br />")
objRS.movenext
Loop
Else
Response.Write("<p style=""color:red;"">No records match your criteria.</p>")
End If

' clean up
objRS.Close: Set objRS = Nothing
objConn.Close: Set objConn = Nothing
%>

This tutorial uses a simple table called "ajaxtest" which consists of the following fields:

Id int
Age int
Gender varchar(6)
Status varchar(30)

<<<----- Return to Ajax Source Code Questions Page

Have a Question ? post your questions here. It will be answered as soon as possible.