一、从服务器端输出xml格式数据
生成的xml文件 结果如图:
- <%@ WebHandler Language="C#" Class="GetUser" %>
- using System;
- using System.Web;
- using System.Xml;
- using System.Xml.Serialization;
- using System.Text;
- using BookShopBLL;
- using BookShopModels;
- public class GetUser : IHttpHandler {
- public void ProcessRequest (HttpContext context) {
- context.Response.ContentType = "text/xml";//xml类型
- if (context.Request.QueryString["loginId"]!=null)
- {
- //1.根据地址参数获取实体类
- Users user = UserManager.GetUserByLoginId(context.Request.QueryString["loginId"].ToString());
- if (user!=null)
- {
- XmlWriter writer = null;
- try
- {
- //2.创建一个XMLSerializer对象
- XmlSerializer serializer = new XmlSerializer(user.GetType());
- //3.将XMLWriter对象赋值为XMLTextWriter对象
- writer = new XmlTextWriter(context.Response.OutputStream,Encoding.UTF8);
- //4.调用序列化方法
- serializer.Serialize(writer,user);
- }
- finally
- {
- if (writer!=null)
- {
- //5.关闭写入器
- writer.Close();
- }
- }
- }
- }
- }
- public bool IsReusable {
- get {
- return false;
- }
- }
- }
二、使用XMLDocument
后置代码:
显示用户信息的html文档代码:
- <asp:Literal ID="ltlUser" runat="server" >
- <a href="UserLogin.aspx">【登录】</a><a href="Register.aspx">【免费注册】</a>
- </asp:Literal>
- <div 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>
Css代码:
- <style type="text/css">
- #userinfo
- {
- position: absolute;
- padding: 5px 5px 5px 5px;
- left: 80px;
- top: 30px;
- background-color: #FAFAD2;
- display: block;
- width: 220px;
- height: 80px;
- color: #000;
- overflow: hidden;
- border: solid 1px #F7F7F7;
- }
- </style>
实现javascript函数完成用户信息显示
- <script language ="javascript" type="text/javascript" >
- function closeUser() {
- document.getElementById("userinfo").style.display = "none";
- }
- function CreateXmlHttpRequest() {
- if (window.ActiveXObject) {//如果是IE浏览器
- return new ActiveXObject("Microsoft.XMLHTTP");
- }
- else if (window.XMLHttpRequest) {//非IE浏览器
- return new XMLHttpRequest();
- }
- }
- function getUser(loginId) {
- if (loginId != "") {
- var url = "ajaxHandler/GetUser.ashx?loginId=" + loginId;
- var xhr = CreateXmlHttpRequest();
- //设置回调函数
- xhr.onreadystatechange = function () {
- if (xhr.readyState == 4
- && xhr.status == 200) {
- document.getElementById("userinfo").style.display = "inline";
- var dom = xhr.responseXML; //得到XMLDocument对象
- //获取节点数据
- 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;
- }
- };
- xhr.open("GET",url,true);
- xhr.send(null);
- }
- }
- </script>
以上效果只支持IE浏览器!!!结果如图: