基於以上的考量,我並不打算全部前端動態處理的東西都用UpdatePanel打死,除非是被呼叫的頻率不算高或以UpdatePanel可以讓程式簡化很多,有許多時候(尤其是得注意效能的場合),我還是會考慮採取HttpRequest Call另一隻ASPX程式的做法(連Web Service都不太想用,SOAP的Overhead也是挺可觀的)。不過,以前大家寫HttpRequest都是自己找Library、Code Sample,現在有了ASP.NET AJAX,理論上,就該借用它相關的Client-Side Function,避免各吹各的調。
function testXml() { var wRequest = new Sys.Net.WebRequest();
//指定URL
wRequest.set_url("WebReqXml.aspx"); //非同步式呼叫,指定資料回傳的接收函數
wRequest.add_completed(xmlCallback);
//發射
wRequest.invoke();
}
function xmlCallback(executor, eventArgs) { if(executor.get_responseAvailable())
{ //由Response中取出XML
var xd=executor.get_xml();
//用ASP.NET AJAX新推出的StringBuilder來接字串
var sb = new Sys.StringBuilder("User Info:"); sb.append("<br />Name="+xd.selectSingleNode("/Player/Name").text); sb.append("<br />Skills="+xd.selectSingleNode("/Player/Skills").text); //FireFox時,要用getElementById代替docuemnt.all,索性用$get較省事
$get("spnPlayerInfo").innerHTML=sb.toString(); }
else
{ if (executor.get_timedOut())
alert("Timed Out"); else if (executor.get_aborted())
alert("Aborted"); }
}
protected void Page_Load(object sender, EventArgs e)
{ XmlDocument xd = new XmlDocument();
xd.LoadXml("<Player></Player>"); XmlNode xn = xd.CreateElement("Name"); xn.InnerText = "Jeffrey";
xd.DocumentElement.AppendChild(xn);
xn = xd.CreateElement("Skills"); xn.InnerText = "Hoyucan";
xd.DocumentElement.AppendChild(xn);
Response.ContentType = "text/xml";
Response.Write(xd.OuterXml);
Response.End();
}
JSON有什麼神奇呢? 舉個例子來說,假設我們在.NET程式裡有個PlayerInfo物件(假設它有Name, Skills兩個Property),序列化成JSON字串後Response.Write回Client端,Client端可以把字串還原回後物件,接著在Javascript中一樣可以用player.Name, player.Skills去讀屬性值,酷吧?
先來看ASPX裡如何實作JSON的傳送端: 我們建立一個PlayerInfo Structure,直接將物件丟給System.Web.Script.Serialization.JavaScriptSerializer.Serialize(讓我想到變蠅人裡那台神奇的物質傳送器)後得到一個字串,將字串送給呼叫它的Javascript程式就完成了Server端的工作。
//一個簡單的玩家資料結構
public struct PlayerInfo
{ public string Name;
public string Skills;
public PlayerInfo(string name, string skills)
{ this.Name = name;
this.Skills = skills;
}
}
protected void Page_Load(object sender, EventArgs e)
{ PlayerInfo p = new PlayerInfo("Keroro", "Kero Ball"); System.Web.Script.Serialization.JavaScriptSerializer jss
= new System.Web.Script.Serialization.JavaScriptSerializer();
Response.Write(jss.Serialize(p));
Response.End();
}
Client端呼叫跟接收的程式跟處理XML差不多,我們用Sys.Serialization.JavaScriptSerializer.deserialize這個神奇函數,取代了原本的XMLDOM,就可以讓.NET Object在Javascript裡復活。
function testJson() { var wRequest = new Sys.Net.WebRequest();
wRequest.set_url("WebReqJson.aspx"); wRequest.add_completed(jsonCallback);
wRequest.invoke();
}
function jsonCallback(executor, eventArgs) { if(executor.get_responseAvailable())
{ //將其還原回Object, COOL!!
var player=
Sys.Serialization.JavaScriptSerializer.deserialize(
executor.get_responseData()); var sb = new Sys.StringBuilder("User Info:"); //可以直接引用Name屬性
sb.append("<br />Name="+player.Name); sb.append("<br />Skills="+player.Skills); $get("spnPlayerInfo").innerHTML=sb.toString(); }
else
{ if (executor.get_timedOut())
alert("Timed Out"); else if (executor.get_aborted())
alert("Aborted"); }
}
是不是很酷呀? 不過大家也別想太多,以為這樣就可以把SqlDataRreader傳到Javascript World把玩。JSON的目的主要是用來傳遞物件的資料結構,程式碼並不在其涵蓋範圍內。想要變成AJAX高手,還是乖乖學好JavaSript JavaScript(Update 2007-04-23 謝謝elleryq指正)吧!