Ajax中的XML

前端之家收集整理的这篇文章主要介绍了Ajax中的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;
        }
    }

}
生成的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浏览器!!!结果如图:

猜你在找的Ajax相关文章