asp ajax 範例二

AJAX會去抓取ASP response.write出來的訊息. 以血型為例：選擇任一血型,會秀出該血型特徵

JavaScript :

<script type="text/javascript">
function showBlood(str)
{
var xmlhttp;   
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","getboold.asp?q="+str,true);
xmlhttp.send();
}
</script>

部分HTML :

<form action="">
血型 : <select name="BloodType" onchange="showBlood(this.value)">
<option value="">請選擇</option>
<option value="A">A型</option>
<option value="B">B型</option>
<option value="AB">AB型</option>
<option value="O">O型</option>
<option value="RH+">RH+型</option>
<option value="RH-">RH-型</option>
</select>
</form>
<br />
<div id="txtHint">BloodType info will be listed here...</div>

ASP程式碼 :

<%
   response.CharSet ="utf-8"
   session("dsn")="dsn=Northwind;uid=sa;pwd=SQLsys"

   set rs=server.CreateObject ("adodb.recordset")
   sqlstr="select Characteristic from dbo.BloodType where type='" & request("q") & "'"
   rs.Open sqlstr,session("dsn"),3,1,1
   if not rs.EOF then
      response.Write ("特徵：<BR/>" )
      response.Write (trim(rs("Characteristic")))
   end if
   rs.Close
 %>

初始畫面：

點選O型畫面：