下面是构造的一个ajax对象ContentLoader:
1var net=new Object();
2net.READY_STATE_UNINITIALIZED=0;
3net.READY_STATE_LOADING=1;
4net.READY_STATE_LOADED=2;
5net.READY_STATE_INTERACTIVE=3;
6net.READY_STATE_COMPLETE=4;
7net.ContentLoader=function(url,onload,onerror)
8{
9 this.url=url;
10 this.req=null;
11 this.onload=onload;
12 this.onerror=(onerror) ? onerror : this.defaultError;
13 this.loadXMLDoc(url);
14}
15net.ContentLoader.prototype={
16 loadXMLDoc:function(url)
17 {
18 if(window.XMLHttpRequest)
19 { this.req=new XMLHttpRequest();}
20 else if(window.ActiveXObject)
21 { this.req=new ActiveXObject("Microsoft.XMLHTTP");}
22
23 if(this.req)
24 {
25 try{
26 var loader=this;
27 this.req.onreadystatechange=function()
28 {
29 loader.onReadyState.call(loader);
30 }
31 this.req.open("POST",url,true);
32 this.req.send(null);
33 }catch(err){
34 this.onerror.call(this);
35 }
36 }
37 },
38 onReadyState:function()
39 {
40 var req=this.req;
41 var ready=req.readyState;
42 if(ready==net.READY_STATE_COMPLETE)
43 {
44 var httpstatus=req.status;
45 if(httpstatus==200||httpstatus==0)
46 {
47 this.onload.call(this);
48 }
49 else
50 {
51 this.onerror.call(this);
52 }
53 }
54 },
55 defaultError:function()
56 {
57 alert("error fetching data!"
58 +"\n\nreadyState:"+this.req.readState
59 +"\nstatus: "+this.req.status
60 +"\nheaders: "+this.req.getAllResponseHeaders());
61 }
62}
2net.READY_STATE_UNINITIALIZED=0;
3net.READY_STATE_LOADING=1;
4net.READY_STATE_LOADED=2;
5net.READY_STATE_INTERACTIVE=3;
6net.READY_STATE_COMPLETE=4;
7net.ContentLoader=function(url,onload,onerror)
8{
9 this.url=url;
10 this.req=null;
11 this.onload=onload;
12 this.onerror=(onerror) ? onerror : this.defaultError;
13 this.loadXMLDoc(url);
14}
15net.ContentLoader.prototype={
16 loadXMLDoc:function(url)
17 {
18 if(window.XMLHttpRequest)
19 { this.req=new XMLHttpRequest();}
20 else if(window.ActiveXObject)
21 { this.req=new ActiveXObject("Microsoft.XMLHTTP");}
22
23 if(this.req)
24 {
25 try{
26 var loader=this;
27 this.req.onreadystatechange=function()
28 {
29 loader.onReadyState.call(loader);
30 }
31 this.req.open("POST",url,true);
32 this.req.send(null);
33 }catch(err){
34 this.onerror.call(this);
35 }
36 }
37 },
38 onReadyState:function()
39 {
40 var req=this.req;
41 var ready=req.readyState;
42 if(ready==net.READY_STATE_COMPLETE)
43 {
44 var httpstatus=req.status;
45 if(httpstatus==200||httpstatus==0)
46 {
47 this.onload.call(this);
48 }
49 else
50 {
51 this.onerror.call(this);
52 }
53 }
54 },
55 defaultError:function()
56 {
57 alert("error fetching data!"
58 +"\n\nreadyState:"+this.req.readState
59 +"\nstatus: "+this.req.status
60 +"\nheaders: "+this.req.getAllResponseHeaders());
61 }
62}
这个是发送请求的页面:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DoubleCombo.aspx.cs" Inherits="WebApplication11.DoubleCombo" %>
<!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 runat="server">
<title>無題のページ</title>
<script type="text/javascript" src="../ContentLoader.js">
</script>
<script type="text/javascript">
function FillTerritory(oElem,oTarget)
{
var strValue=oElem.options[oElem.selectedIndex].value;
var strParams="?q="+strValue+"&f="+oTarget.form.name+"&e="+oTarget.name;
var url="DoubleComboXML.aspx"+strParams;
new net.ContentLoader(url,FillDropDown,null);
}
function FillDropDown()
{
var xmlDoc = this.req.responseXML.documentElement;
var xSel = xmlDoc.getElementsByTagName('selectElement')[0];
var strFName = xSel.childNodes[0].firstChild.nodeValue;
var strEName = xSel.childNodes[1].firstChild.nodeValue;
var objDDL = document.forms[strFName].elements[strEName];
objDDL.options.length=0;
var xRows = xmlDoc.getElementsByTagName('entry');
for(var i =0;i<xRows.length;i++)
{
var theText = xRows[i].childNodes[0].firstChild.nodeValue;
var theValue = xRows[i].childNodes[1].firstChild.nodeValue;
var option = new Option(theText,theValue);
try
{
objDDL.add(option,null);
}
catch (e){
objDDL.add(option,-1);
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<h2>Ajax Demo</h2>
<select id="ddlRegion" name="ddlRegion" onchange="FillTerritory(this,ddlTerritory)">
<option value="-1">Pick a Region</option>
<option value="1">Eastern</option>
<option value="2">Northern</option>
<option value="3">Western</option>
<option value="4">Southern</option>
</select>
<select id="ddlTerritory" name="ddlTerritory">
</select>
</form>
</body>
</html>
<!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 runat="server">
<title>無題のページ</title>
<script type="text/javascript" src="../ContentLoader.js">
</script>
<script type="text/javascript">
function FillTerritory(oElem,oTarget)
{
var strValue=oElem.options[oElem.selectedIndex].value;
var strParams="?q="+strValue+"&f="+oTarget.form.name+"&e="+oTarget.name;
var url="DoubleComboXML.aspx"+strParams;
new net.ContentLoader(url,FillDropDown,null);
}
function FillDropDown()
{
var xmlDoc = this.req.responseXML.documentElement;
var xSel = xmlDoc.getElementsByTagName('selectElement')[0];
var strFName = xSel.childNodes[0].firstChild.nodeValue;
var strEName = xSel.childNodes[1].firstChild.nodeValue;
var objDDL = document.forms[strFName].elements[strEName];
objDDL.options.length=0;
var xRows = xmlDoc.getElementsByTagName('entry');
for(var i =0;i<xRows.length;i++)
{
var theText = xRows[i].childNodes[0].firstChild.nodeValue;
var theValue = xRows[i].childNodes[1].firstChild.nodeValue;
var option = new Option(theText,theValue);
try
{
objDDL.add(option,null);
}
catch (e){
objDDL.add(option,-1);
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<h2>Ajax Demo</h2>
<select id="ddlRegion" name="ddlRegion" onchange="FillTerritory(this,ddlTerritory)">
<option value="-1">Pick a Region</option>
<option value="1">Eastern</option>
<option value="2">Northern</option>
<option value="3">Western</option>
<option value="4">Southern</option>
</select>
<select id="ddlTerritory" name="ddlTerritory">
</select>
</form>
</body>
</html>
下面这个页面是被请求页面,主要用来返回请求的数据库数据:
public partial class DoubleComboXML : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
classiccode
}
private DataTable FillDataTable(string sql)
{
string strConn = "initial Catalog = Northwind;Data Source = 127.0.0.1;Integrated Security = true;";
SqlDataAdapter cmdl = new SqlDataAdapter(sql, strConn);
DataSet ds = new DataSet();
cmdl.Fill(ds);
cmdl.Dispose();
return ds.Tables[0];
}
}
{
protected void Page_Load(object sender, EventArgs e)
{
classiccode
}
private DataTable FillDataTable(string sql)
{
string strConn = "initial Catalog = Northwind;Data Source = 127.0.0.1;Integrated Security = true;";
SqlDataAdapter cmdl = new SqlDataAdapter(sql, strConn);
DataSet ds = new DataSet();
cmdl.Fill(ds);
cmdl.Dispose();
return ds.Tables[0];
}
}