Creating a search form using AJAX

Creating a search form using AJAX - Demo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>AJAX Search</title>
<script src="ajax.js" type="text/javascript"></script> 

</head>

<body>
<form name="myform" id="myform">
  <table width="250" border="0">
   <tr><td><strong>title:</strong></td></tr>
   <tr><td>
   <select name="title" onchange="showResults(this.value, document.myform.director.value)">
    <option value="An Inconvenient Truth">An Inconvenient Truth</option>
    <option value="Attack of the Ants">Attack of the Ants</option>
    <option value="Big Mama">Big Mama</option>
   </select></td></tr>
   <tr><td><strong>director:</strong></td></tr>
   <tr><td>
   <select name="director" onchange="showResults(document.myform.title.value, this.value)">
    <option value="Al Gore">Al Gore</option>
    <option value="Jim Brady">Jim Brady</option>
    <option value="Charlie Briggs">Charlie Briggs</option>
   </select>
   </td></tr>   
 </table>
</form>
<div id="txtResults"><p style="font-style:italic">Results will be listed here.</p></div>
</body>

</html>

** ajax.js **

var xmlHttp

function showResults(str, str2)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Your browser does not support the XMLHttpRequest object.")
return
}
var url="getResults.asp"
url=url+"?title="+str
url=url+"&director="+str2
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
}

** getResults.asp **

<%
a = Request.QueryString("title")
s = Request.QueryString("director")

' sql to get results
sql="SELECT ID, Title, Director FROM Movies WHERE Title = '" & a & "' AND Director LIKE '" & s & "'"

'Create our connection (SQL Server OLEDB Connection)
   Set con=Server.Createobject("ADODB.Connection")
   con.ConnectionString = "Provider=SQLOLEDB; Data Source=; Initial Catalog=; User ID=; Password=" 
   con.Open strConn
   Set objRS = con.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>Title:</strong></td><td>" & objRS(1) & "</td></tr>")
    Response.Write("<tr><td><strong>Director:</strong></td><td>" & objRS(2) & "</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
con.Close: Set con = Nothing

%>

Stone Coast Web Design

.NET Web Development

Creating a search form using AJAX - Demo