在ASP.NET中使用无框架的Ajax实例
2009-02-12 09:53
429 查看
摘要:可能.net程序员手写方法的时候很少,在初学时,就被前辈灌输“使用框架!”、“用系统自带方法!”这个概念,直接导致我们某方面相对孱弱。这也是为什么,用java写Ajax例子信手拈来,而用C#写,却困难重重——网上很难找到不用Ajax.dll实现的例子。
我们需要两个页面a.aspx、b.aspx,a页面代码如下(就用最常见的,两个下拉列表连动的例子):
当a页面触发onchange事件后,我们进入写在a页面的SetBList()方法中,这里将完整的js列出来:
b.aspx页面将html部分全部删除,仅仅留一行:
原因是我们a页面要求返回的xml文档,因此,我们将Html标签部分删除。然后在b页面的Page_Load方法中,对数据库进行操作,然后数据写成xml的格式,例如:
在整体运行之前可以先将b页面测试一下,如果得到类似如下结果,则说明,数据部分是没问题的。
我们需要两个页面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> |
<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>
b.aspx页面将html部分全部删除,仅仅留一行:
<%@ Page language="c#" Codebehind="b.aspx.cs" AutoEventWireup="false" Inherites="Test.Ajax" %> |
// 数据库操作,得到DataTable dt string xml = "<Data>"; foreach(DataRow row in dt.Rows) { xml += "<City>"; xml += "<CityName>" + row["CityName"] + "</CityName>"; xml += "<CityCode>" + row["CityCode"] + "</CityCode>"; xml += "</City>"; } xml += "</Data>"; // 清页面格式,写xml Response.ClearContent(); Response.Cache.SetNoStore(); Response.ContentType = "text/xml"; Response.ContentEncoding = System.Text.Encoding.UTF8; Response.Write(xml); |
- <Data> - <Vendor> <VendorId>7</VendorId> <VendorName>千千</VendorName> </Vendor> </Data> |
相关文章推荐
- 在ASP.NET中使用无框架的Ajax实例
- 在ASP.NET中使用无框架的Ajax实例
- 使用ASP.NET AJAX 1.0框架PreviewGlitz进行网页动画编程
- asp.net ajax框架使用技巧之一
- C#实现多级子目录Zip压缩解压实例 NET4.6下的UTC时间转换 [译]ASP.NET Core Web API 中使用Oracle数据库和Dapper看这篇就够了 asp.Net Core免费开源分布式异常日志收集框架Exceptionless安装配置以及简单使用图文教程 asp.net core异步进行新增操作并且需要判断某些字段是否重复的三种解决方案 .NET Core开发日志
- 使用Northwind和Entity框架的ASP.NET MVC实例
- 使用ASP.Net 3.5 的Ajax与Web服务开发实例
- 使用ASP.NET AJAX调用后台WebService优化网站性能实例
- 使用ASP.Net 3.5 的Ajax与Web服务开发实例
- StructureMap 作为 ASP.NET MVC 的 DI 框架的使用实例
- (五)asp.net ajax框架的简单使用
- ASP.NET MV框架下使用ajax上传要注意的一个问题
- asp.net中ajax.ajaxMethod使用方法和实例
- [置顶] 【Asp.net】使用Ajax和Jquery在前台向后台传参数并返回值的实例
- asp.net ajax框架使用-DataTable的使用
- 使用ASP.NET AJAX框架扩展HTML Map控件
- WebCast《实战ASP.NET AJAX系列课程(2):使用客户端框架创建“纯粹”的Ajax应用程序》相关资源
- asp.net+JSON+Ajax(基于Prototype框架1.4)做无刷新的2级DropDownList代码实例
- ASP.NET AJAX中 复杂数据类型使用简单实例
- 【转载】使用Json比用string返回数据更友好,也更面向对象一些 |Asp.net MVC 2.0 + Unity 2.0(IoC) + EF4.0 实例:RoRoWoBlog 开源项目框架代码