黑馬程式員_Ajax中使用XML（從伺服器端輸出XML格式資料，在模版頁接收資料）

 　------- 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培訓、期待與您交流！ -------