黑马程序员_Ajax中使用XML(从服务器端输出XML格式数据,在模版页接收数据)

来源:互联网 发布:ubuntu 服务器下载 编辑:程序博客网 时间:2024/05/14 13:47


  ------- 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培训、期待与您交流! -------

 

 

原创粉丝点击