我们需要两个页面aaspxbaspxa页面代码如下（就用最常见的两个下拉列表连动的例子）
＜body＞ ＜form id=Form method=post runat=server＞ ＜select id=AList onchange=SetBList()＞ ＜option value=＞A＜/option＞ ＜option value=＞B＜/option＞ ＜option value=＞C＜/option＞ ＜/select＞ ＜select id=BList＞＜/select＞ ＜/form＞ ＜/body＞
当a页面触发onchange事件后我们进入写在a页面的SetBList()方法中这里将完整的js列出来
＜script language=javascript＞var xmlHttp;function SetBList() { var avalue = documentgetElementById(AList)value; var url = baspx?Avalue= + avalue; createXMLHttpRequest(); // 创建xmlHttp对象 xmlHttponreadystatechange = handleStateChange; // 当xmlHttp状态码发生改变时调用handleStateChage方法 xmlHttpopen(GET url true); // GET方法发送请求 xmlHttpsend(null);}function BListInitial() { // 先清空一下BList的option clearBList(); var blist = documentgetElementById(BList); // 获取BList对象 var rs = xmlHttpresponseXMLgetElementsByTagName(City); // 从返回xml文档中读取＜City＞标签的数据 // 这个循环取值的地方卡了我一会将xmlHttpresponseXML创建成一个xml文档然后找读文档的方法但问题是不同浏览器创建xml文档的方法不一样 for(var i=;i＜rslength;i++) { var option = documentcreateElement(OPTION); optiontext = rs[i]getElementsByTagName(CityName); optionvalue = rs[i]getElementsByTagName(CityCode); blistoptionsadd(option); }}function clearBList() { var ven = documentgetElementById(VendorList); while(venoptionslength ＞ ) venremoveChild(venchildNodes[]);}function handleStateChange() { if(xmlHttpreadyState == ) { if(xmlHttpstatus == ) { BListInitial(); } }}function createXMLHttpRequest() { // IE if (windowActiveXObject) { xmlHttp = new ActiveXObject(MicrosoftXMLHTTP); } // Mozilla else if (windowXMLHttpRequest) { xmlHttp = new XMLHttpRequest(); }}＜/script＞
baspx页面将html部分全部删除仅仅留一行
＜%@ Page language=c# Codebehind=baspxcs AutoEventWireup=false Inherites=TestAjax %＞
原因是我们a页面要求返回的xml文档因此我们将Html标签部分删除然后在b页面的Page_Load方法中对数据库进行操作然后数据写成xml的格式例如
// 数据库操作得到DataTable dtstring xml = ＜Data＞;foreach(DataRow row in dtRows) { xml += ＜City＞; xml += ＜CityName＞ + row[CityName] + ＜/CityName＞; xml += ＜CityCode＞ + row[CityCode] + ＜/CityCode＞; xml += ＜/City＞;}xml += ＜/Data＞;// 清页面格式写xmlResponseClearContent();ResponseCacheSetNoStore();ResponseContentType = text/xml;ResponseContentEncoding = SystemTextEncodingUTF;ResponseWrite(xml);
在整体运行之前可以先将b页面测试一下
如果得到类似如下结果则说明数据部分是没问题的
＜Data＞ ＜Vendor＞ ＜VendorId＞＜/VendorId＞ ＜VendorName＞千千＜/VendorName＞ ＜/Vendor＞＜/Data＞
