一、从服务器端输出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; } } }生成的xml文件 结果如图:
二、使用XMLDocument
后置代码:
if (!Page.IsPostBack) { if (Session["loginid"]!=null) { this.ltlUser.Text = string.Format("您好," +"<span onmouSEOver='getUser(this.innerHTML)' " //关闭closeUser()方法用来关闭显示的div +"onmouSEOut='closeUser()'>{0}</span>" +"<a href='Menbership/UserExit.aspx'>【注销】</a>",Session["loginid"].ToString() ); } }
显示用户信息的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浏览器!!!结果如图:
原文链接:https://www.f2er.com/ajax/166016.html