ASP.NET中AJAX 調用執行個體代碼

1前言
最近在ASP.NET中做了一個AJAX調用 : Client端先從ASP.NET Server後台取到一個頁面模板，然後在頁面初始化時再從Server中取一些相關資料以實現頁面模板的動態顯示。具體實現為：
1) Client向 ASP.NET後台發送HTTP GET 請示
2) 後台給Client發送一個HTML模板,同時在記憶體中儲存一個XML String (包含頁面模板動態顯示所需的資料)
3) Client在初始化頁面時，發送AJAX請求，拿到XML String
4) 利用拿到的XML String,定製化HTMl模板，實現HTML頁面模板的動態顯示。
2幾個關鍵點的簡介與程式碼範例
2.1 ASP.NET Server端
2.1.1 用C#產生XML String
用System.Xmlnamespace下的幾個類就可以實現。下面是Code sample, 複製代碼 代碼如下:ArrayList steps = new ArrayList();
String errordiscription = "Not in position";
for (int i = 0; i < 5; i++)
{
steps.Add(new Step(@"images/1.jpg", "step21 description"));
}
XmlDocument doc = new XmlDocument();
XmlNode docNode = doc.CreateXmlDeclaration("1.0", "UTF-8", null);
doc.AppendChild(docNode);
//add the root
XmlNode rootNode = doc.CreateElement("Root");
doc.AppendChild(rootNode);
//add the error description node
XmlNode errorNode = doc.CreateElement("ErrorDescription");
errorNode.AppendChild(doc.CreateTextNode(errordiscription));
rootNode.AppendChild(errorNode);
//add the steps node
XmlNode productsNode = doc.CreateElement("Steps");
rootNode.AppendChild(productsNode);
for (int i = 0; i < steps.Count; i++)
{
XmlNode productNode = doc.CreateElement("step");
XmlAttribute productAttribute = doc.CreateAttribute("description");
productAttribute.Value = ((Step)steps[i]).description;
productNode.Attributes.Append(productAttribute);
//productNode.Value = ((Step)steps[i]).imagePath;
productNode.AppendChild(doc.CreateTextNode(((Step)steps[i]).imagePath));
productsNode.AppendChild(productNode);
}
Global.Repairsteps= doc.InnerXml;

產生的XML如下： 複製代碼 代碼如下:<?xml version="1.0" encoding="UTF-8" ?>
- <Root>
<ErrorDescription>Not in position</ErrorDescription>
- <Steps>
<step description="step21 description">images/1.jpg</step>
<step description="step21 description">images/1.jpg</step>
<step description="step21 description">images/1.jpg</step>
<step description="step21 description">images/1.jpg</step>
<step description="step21 description">images/1.jpg</step>
</Steps>
</Root>

2.1.2 響應Ajax請求，返回XML 流
這裡就只有一點需要注意，加個HTML Header，聲明 Content-Type. 複製代碼 代碼如下:Response.Clear();
Response.AddHeader("Content-Type", "text/xml");
Response.Write(Global.Repairsteps);
Response.End();

2.1.3 多個Request之間資料共用
實現多個Request之間資料共用的方法很簡單直觀，利用一個Global對象就可以了。 複製代碼 代碼如下:public class Global
{
/// <summary>
/// Global variable storing important stuff.
/// </summary>
static string _repairsteps;
/// <summary>
/// Get or set the static important data.
/// </summary>
public static string Repairsteps
{
get
{
return _repairsteps;
}
set
{
_repairsteps = value;
}
}
}

2.2 Client端
2.2.1 AJAX擷取 XML 複製代碼 代碼如下:$.ajax({
type: "GET",
url: "http://localhost:3153/WebSite2/",
cache: false,
dataType: "xml",
error:function(xhr, status, errorThrown) {
alert(errorThrown+'\n'+status+'\n'+xhr.statusText);
},
success: function(xml) {
//Here we can process the xml received via Ajax
}});

2.2.2 動態插入HTML List 元素
比較常見的方法是產生html stream,然後用append或html把Stream插入到DOM裡面去。這樣做有一個問題，如果Stream裡恰好有雙引號或單引號時，就要用 很多的“\”分隔字元，容易出錯，可讀性不太法，不太方便，事實上，JQuery有個create new element的功能。只要給$的輸入參數包含<tag ... >時，JQuery就不會把它理解成一個selector expression, 而是把它理解成一個產生新的DOM element 。以下是一個code sample. 複製代碼 代碼如下:$(xml).find("step").each(function(){
var stepimagepath=$(this).text();
var stepdescription=$(this).attr("description");
additem(stepimagepath, stepdescription);
});
function additem(stepimagepath, stepdescription){
$('.ad-thumbs ul').append(
$('<li>').append(
$('<a>').attr('href', stepimagepath).append(
$('<img>').attr('src', stepimagepath).attr('alt', stepdescription)
)));
}

產生的HTML section 如下： 複製代碼 代碼如下:<ul class="ad-thumb-list">
<li><a href="images/1.jpg"><img src="images/1.jpg" alt="step21 description"></a></li>
<li><a href="images/1.jpg"><img src="images/1.jpg" alt="step21 description"></a></li>
<li><a href="images/1.jpg"><img src="images/1.jpg" alt="step21 description"></a></li>
<li><a href="images/1.jpg"><img src="images/1.jpg" alt="step21 description"></a></li>
<li><a href="images/1.jpg"><img src="images/1.jpg" alt="step21 description"></a></li>
</ul>

3總結
本文介紹了在ASP.NET中使用Ajax可能會碰到的幾個關鍵點。 C#產生XML流，AJAX實現(Server端與Client端)， Global 變數，與及如果用一種比較好的方法動態插入HTML 元素.
4參考
http://www.dotnetperls.com/global-variables-aspnet
http://api.jquery.com/jQuery/