黑马程序员_Ajax中使用XML(从服务器端输出XML格式数据,在模版页接收数据)
2013-08-11 15:34
459 查看
------- Windows Phone 7手机开发、.Net培训、期待与您交流! -------
Ajax中使用XML,我在这节课里面学会了用这个东西用来实现一个在使用了模板页上有一个显示登录用户的登录名的文本,当鼠标在其内容页移动到显示I登陆名的上面就会显示该用户的其他信息。
首先需要建一个一般处理程序,
代码如下:
然后再模板页写js代码接受:
设置鼠标事件:
显示:
<div class="userinfo" id="userinfo" style="display:none" >
<p>
<label>
姓名:
</label>
<label id="Name">
</label>
</p><p>
<label>
地址:
</label>
<label id="Address">
</label>
</p><p>
<label>
电话:
</label>
<label id="Phone">
</label>
</p><p>
<label>
Mail:
</label>
<label id="Mail">
</label>
</p>
</div>
------- Windows Phone 7手机开发、.Net培训、期待与您交流! -------
Ajax中使用XML,我在这节课里面学会了用这个东西用来实现一个在使用了模板页上有一个显示登录用户的登录名的文本,当鼠标在其内容页移动到显示I登陆名的上面就会显示该用户的其他信息。
首先需要建一个一般处理程序,
代码如下:
<%@ WebHandler Language="C#" Class="GetUser" %> using System; using System.Web; using BookShopBLL; using BookShopModels; using System.Xml.Serialization; using System.Xml; public class GetUser : IHttpHandler { public void ProcessRequest (HttpContext context) { context.Response.ContentType = "text/xml"; //验证传过来的值不为null if (context.Request.QueryString["loginId"]!=null) { //获取loginId(登录名) string loginId = context.Request.QueryString["loginId"].ToString(); //用用户类接受按照登录名搜索到的用户信息 //Users oUser = BookShopBLL.UserManage.GetUsersByloginId("bobo");//测试用户 Users oUser = BookShopBLL.UserManage.GetUsersByloginId(loginId); if (oUser!=null) { //是一个抽象类 XmlWriter writer = null; try { //创建一个XmlSerializer对象 XmlSerializer serializer = new XmlSerializer(oUser.GetType()); //将XmlWriter对象赋值为XmlTextWriter对象 writer = new XmlTextWriter(context.Response.OutputStream,System.Text.Encoding.UTF8); //调用序列化方法 serializer.Serialize(writer,oUser); } finally { if (writer!=null) { writer.Close(); } } } } } public bool IsReusable { get { return false; } } }
然后再模板页写js代码接受:
<script type="text/javascript" language="javascript"> function createXmlHttpRequest() { if (window.ActiveXObject) {//如果是IE浏览器 return new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) {//非IE浏览器 return new XMLHttpRequest(); } } function getUser(loginId) { if (loginId != null) { //获取服务器的网址 var url = "AjaxHandler/GetUser.ashx?loginId=" + loginId; //创建XmlHttpRequest var xhr = createXmlHttpRequest(); //设置回调函数 xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.Status == 200) { var dom = xhr.responseXML; //获取服务器端发送来XML格式的数据 //读取XML数据 document.getElementById("Name").innerHTML = dom.getElementsByTagName("Name")[0].text; document.getElementById("Address").innerHTML = dom.getElementsByTagName("Address")[0].text; document.getElementById("Phone").innerHTML = dom.getElementsByTagName("Phone")[0].text; document.getElementById("Mail").innerHTML = dom.getElementsByTagName("Mail")[0].text; //设置显示用户详细信息 document.getElementById("userinfo").style.display = "inline"; } } //初始化XmlHttpRequest-------true代表可以异步 xhr.open("GET", url, true); //发送请求 xhr.send(null); } } //设置不显示用户详细信息 function closeUser() { document.getElementById("userinfo").style.display = "none"; } </script>
设置鼠标事件:
<asp:LinkButton ID="lBtn_User" runat="server" onmouseover='getUser(this.innerHTML)' onmouseout='closeUser()'>用户</asp:LinkButton>
显示:
<div class="userinfo" id="userinfo" style="display:none" >
<p>
<label>
姓名:
</label>
<label id="Name">
</label>
</p><p>
<label>
地址:
</label>
<label id="Address">
</label>
</p><p>
<label>
电话:
</label>
<label id="Phone">
</label>
</p><p>
<label>
Mail:
</label>
<label id="Mail">
</label>
</p>
</div>
------- Windows Phone 7手机开发、.Net培训、期待与您交流! -------
相关文章推荐
- 使用ASP.NET AJAX异步调用Web Service和页面中的类方法(10):服务器端和客户端数据类型的自动转换:以XML方式序列化数据、小结
- ajax完成异步的省市联动效果--使用xml接收数据
- 使用ASP.NET AJAX异步调用Web Service和页面中的类方法(10):服务器端和客户端数据类型的自动转换:以XML方式序列化数据、小结
- ajax之xml数据的服务器端发送和客户端接收。
- Ajax 使用XMLHttpRequest对象发送数据和接收处理XML源代码
- Flex接收服务器端传送的XML数据
- ajax 接收json,xml类型数据
- 客户端发送xml数据,服务器端接收之
- AJAX Hacks之Hack 4. 接收XML格式的数据
- XML(php中获取xml文件的方式/ajax获取xml格式的响应数据的方式)
- 在JQuery中可以使用get,post和ajax方法给服务器端传递数据
- 使用原生Ajax处理HTML,XML,JSON数据
- Ajax.net使得服务器端的数据模型能够被javascript所使用
- MVC使用ajax异步刷新时怎样输出从后台中传过来的JSON数据
- 使用TCP协议编写一个网络程序,设置服务器端的监听端口是8002,当与客户端建立连接后,服务器端向客户端发送数据“Hello, world”,客户端收到数据后打印输出。
- [SoOnPerson]使用vue.js 来输出ajax返回的json数据
- 使用ASP.NET AJAX异步调用Web Service和页面中的类方法(5):服务器端和客户端数据类型的自动转换:基本类型和枚举类型
- JS使用ajax从xml文件动态获取数据显示的方法
- lesson 11:使用TCP协议编写一个网络程序,设置服务器端的监听端口是8002,当与客户端建立连接后,服务器端向客户端发送数据“Hello, world”,客户端收到数据后打印输出。
- AJAX第二步:AJAX接收返回类型为text/XML的数据