首页 > OOP语言 > AJAX > 正文

在ASP.NET中使用无框架的Ajax实例
2012-08-22 19:06:02   来源:www.bianceng.cn   评论:0 点击:

暂时无描述信息

我们需要两个页面a.aspx、b.aspx,a页面代码如下(就用最常见的,两个下拉列表连动的例子):

<body>
  <form id="Form1" method="post" runat="server">
  <select id="AList" onchange="SetBList()">
    <option value="0">A</option>
    <option value="1">B</option>
    <option value="3">C</option>
  </select>
  <select id="BList"></select>
  </form>
</body>

当a页面触发onchange事件后,我们进入写在a页面的SetBList()方法中,这里将完整的js列出来:

<script language="javascript">
var xmlHttp;
function SetBList() {
  var avalue = document.getElementById("AList").value;
  var url = "b.aspx?Avalue=" + avalue;
  createXMLHttpRequest(); // 创建xmlHttp对象
  xmlHttp.onreadystatechange = handleStateChange; // 当xmlHttp状态码发生改变时,调用handleStateChage方法
  xmlHttp.open("GET", url, true);  // GET方法发送请求
  xmlHttp.send(null);
}
function BListInitial() {
  // 先清空一下BList的option
  clearBList();
  var blist = document.getElementById("BList"); // 获取BList对象
  var rs = xmlHttp.responseXML.getElementsByTagName("City"); // 从返回xml文档中,读取<City>标签的数据
  // 这个循环取值的地方,卡了我一会,将xmlHttp.responseXML创建成一个xml文档,然后找读文档的方法,但问题是不同浏览器创建xml文档的方法不一样
  for(var i=0;i<rs.length;i++) {
    var option = document.createElement("OPTION");
    option.text = rs[i].getElementsByTagName("CityName");
    option.value = rs[i].getElementsByTagName("CityCode");
    blist.options.add(option);
  }
}
function clearBList() {
  var ven = document.getElementById("VendorList");
  while(ven.options.length > 0)
    ven.removeChild(ven.childNodes[0]);
}
function handleStateChange() {
  if(xmlHttp.readyState == 4) {
    if(xmlHttp.status == 200) {
      BListInitial();
    }
  }
}
function createXMLHttpRequest() {
  // IE
  if (window.ActiveXObject) {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  // Mozilla
  else if (window.XMLHttpRequest) {
    xmlHttp = new XMLHttpRequest();
  }
}
</script>

相关热词搜索:

上一篇:第一页
下一篇:用Microsoft ASP.NET AJAX技术构建交互式的用户界面― Part 2

分享到: 收藏