後端伺服器要回應 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查詢魔法