AJAX Tutorial Using Drop Down Boxes
The first page contains a simple form and uses the JavaScript "onchange" event for each drop down menu to trigger the function "showResults" from the ajax.js page. The results from the database are updated in the <div> tag at the end of the page.
» See the demo
In your default.asp page, place the following in the <head> section:
<script src="ajax.js" type="text/javascript"></script>
This is a simpe form with three drop down boxes. Each box has an onchange event which passes the values for each box to the showResults function on the ajax.js page. Place the following in the <body> of the default.asp page:
<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"); //later IE
} catch (e) {
try {
objXMLHttp = new ActiveXObject("Microsoft.XMLHTTP"); //earlier IE
} catch (e) {
objXMLHttp = null;
}
}
if (objXMLHttp==null)
{
objXMLHttp=new XMLHttpRequest() //IE7, Firefox, Safari
}
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:
<!-- #include file="yourconnectionstring.asp" -->
<%
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 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
%>
浙公网安备 33010602011771号