實做AJAX讀取資料-以ASP為例

大致上要做到一個簡易的AJAX非同步的傳輸
首先利用你使用的語言連接資料庫。並且將讀取到的資料轉成XML顯示
如下:

<%

Set nRS = Server.CreateObject("ADODB.Recordset")
Set conn=Server.CreateObject("ADODB.Connection")
conn.Open OracleDataBaseProvider
codesearch = Request("codesearch")

SQL="select * from GIS_CATEGORY where codesearch='"&codesearch&"'"
nRS.open SQL,conn
response.ContentType = "text/xml"
Response.write "<?xml version=""1.0"" encoding=""big5"" ?>"
Response.write "<debrislist>"
do while not nRS.eof
Response.write "<debris>"
Response.write "<Name>" & nRS("Name") & "</Name>"
Response.write "<code>" & nRS("codesource") & "</code>"
Response.write "</debris>"
nRS.movenext
loop
Response.write "</debrislist>"
nRS.close
%>

然後在建立一個XMLHTTPReques Object接收XML資料，
下面是從資料庫抓取資料的連鎖下拉式

如下：
function createXMLHTTPRequext()

{
if(window.ActiveXObject) {//IE6.0以下
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}

else if(window.XMLHTTPRequest){//IE7.0、Firefox
xmlhttp = new XMLHTTPRequest();
}

else
{
alert('不支援ajax');
}

if (!xmlhttp) {
alert('Giving up :( Cannot create an XMLHTTP instance');
return false;

}
}

function Init()

{
PostOrder('codesearch=2','s1');
PostOrder('codesearch=A','s2');
PostOrder('codesearch=A01','s3');
}

function PostOrder(xmldoc,control)
{
ctl=control;
createXMLHTTPRequext();
xmlhttp.Open("GET", "/Ajax.asp?"+xmldoc, false);
xmlhttp.onreadystatechange= HandleStateChange;//當資料讀取時所要呼叫的methor
xmlhttp.Send(null);

}

function HandleStateChange()

{

if (xmlhttp.readyState == 4)

{
//將下拉式清空
for(var i=0;i<=document.getElementById(ctl).length;i++)
{
document.getElementById(ctl).remove(0);
}
var xmldoc = xmlhttp.responseXML;
var index=0;

for(var i=0; i<xmldoc.getElementsByTagName('Name').length; i++)
{
var name_node = xmldoc.getElementsByTagName('Name')[i];
var code_node = xmldoc.getElementsByTagName('code')[i];
document.getElementById(ctl).options[index++]=new
Option(name_node.firstChild.data,code_node.firstChild.data);
}
}
}

function Change(control,change)
{
var s1=control.options[control.selectedIndex].value;
PostOrder("codesearch="+s1,change);
var s2= document.getElementById("s2").options[document.getElementById("s2").selectedIndex].value;
PostOrder("codesearch="+s2,"s3");
}



function selectChange(control,change)
{
var str=control.options[control.selectedIndex].value;
PostOrder("codesearch="+str,change);
//alert(str);

}

//隱藏部分的文章