透過 jQuery 以 ajax 方式抓取後端回傳的 xml 資料

後端伺服器要回應 xml 資料給前端網頁，你可以用 aspx 來寫，但更好的選擇，則是用 ashx (泛型處理常式)。其中的差別，在於 aspx 所回傳的是網頁型態，但 ashx 則可以回傳更多樣的型別，如圖片、附件檔、或是目前所要實現的 ajax 結果。

當然，aspx 也是可以，只是要在輸出結果前，清掉原先 aspx 頁面上預設的所有標籤。你可以事先刪除 aspx 上的 HTML 標籤，或是在 .cs 裡面寫一行 Page.Controls.Clear();  都可以。

先寫一段 aspx 後端的程式：

using System.Xml;

protected void Page_Load(object sender, EventArgs e)
{
    //建立 XMLDOCUMENT 物件
    XmlDocument ObjXML = new XmlDocument();

    //建立 根節點 物件
    XmlElement root = ObjXML.CreateElement("people");
    //插入 根節點物件到 XMLDOCUMENT 物件
    ObjXML.AppendChild(root);
    //建立子節點物件
    XmlElement user = ObjXML.CreateElement("user");
    //插入 子節點物件 到 根節點物件
    root.AppendChild(user);

    //設定子節點屬性
    user.SetAttribute("name", null, "paladin");
    //設定子節點屬性
    user.SetAttribute("cname", null, "李志堅");

    XmlDeclaration xmldecl;
    xmldecl = ObjXML.CreateXmlDeclaration("1.0", null, null);
    xmldecl.Encoding = "UTF-8";
    ObjXML.InsertBefore(xmldecl, root);
    //插入XML類型標頭
    string myxml = ObjXML.InnerXml.ToString();    


    //清除頁面上的控制項，只回傳所需的 xml 資料
    Page.Controls.Clear();
    Response.ContentType="text/xml";
    Response.Write(myxml);

}

透過這段程式，可以回傳 xml 的測試結果。
這裡要注意的，是記得設定好 Response.ContentType ，讓他為 "text/xml"，如果你沒有設定，在 IE 瀏覽器可能會無法正確分辨。另外要做的，就是在輸出結果前，寫上一句： Page.Controls.Clear(); ，清除頁面上既有的HTML控制標籤。

比較推薦的方法(看起來比較專業一點啦)，是用 ashx 來撰寫，程式如下：

resultXml.ashx

using System.Xml;

public void ProcessRequest (HttpContext context) {
    context.Response.ContentType = "text/xml";

    //建立 XMLDOCUMENT 物件
    XmlDocument ObjXML = new XmlDocument();

    //建立 根節點 物件
    XmlElement root = ObjXML.CreateElement("people");
    //插入 根節點物件到 XMLDOCUMENT 物件
    ObjXML.AppendChild(root);
    //建立子節點物件
    XmlElement user = ObjXML.CreateElement("user");
    //插入 子節點物件 到 根節點物件
    root.AppendChild(user);

    //設定子節點屬性
    user.SetAttribute("name", null, "paladin");
    //設定子節點屬性
    user.SetAttribute("cname", null, "李志堅");

    XmlDeclaration xmldecl;
    xmldecl = ObjXML.CreateXmlDeclaration("1.0", null, null);
    xmldecl.Encoding = "UTF-8";
    ObjXML.InsertBefore(xmldecl, root);
    //插入XML類型標頭
    string myxml = ObjXML.InnerXml.ToString();    

    context.Response.Write(myxml);        
    
}

使用 ashx 唯一要注意的，就是要設定 context.Response.ContentType ，將他設成 "text/xml"，因為要回傳的結果是 xml 格式。

後端回傳結果：

<?xml version="1.0" encoding="UTF-8"?><people><user name="paladin" cname="李志堅" /></people>

最後，開始撰寫前端的 jQuery 叫用方法：

<script>
function DoAjax()
{   
   //{ name:"paladin" } 是用來傳到後端的參數，目前用不到   
   // $(xml).find("user") 會回傳每個 "user" 元素集合
   // 再透過 .each( ) 去取得 每個 user 元素 的屬性
   $.post("resultXml.ashx",{ name:"paladin" } ,function(xml){        
    $(xml).find("user").each(   
        function(){ 
        var _name = $(this).attr('name');
        var _cname=$(this).attr('cname');
        alert(_name);
        alert(_cname);
        $("input[id*=txt01]").val(_name+':'+_cname);        
    });
   } );
}
</script>

<asp:TextBox ID="txt01" runat="server"></asp:TextBox>
<input id="btnNoPostBack" type="button" value="NoPostBack" onclick="DoAjax()" />

如此，就有一個很完整的 jQuery 使用 ajax 傳遞 xml 的程式樣板可參考了。


ref:TIPS-神奇的jQuery XML查詢魔法