快捷導(dǎo)航

ASP.NET中AJAX 調(diào)用實(shí)例代碼

更新時(shí)間：2012年05月03日 19:31:46 作者：

最近在ASP.NET中做了一個(gè)AJAX調(diào)用 : Client端先從ASP.NET Server后臺(tái)取到一個(gè)頁(yè)面模板，然后在頁(yè)面初始化時(shí)再?gòu)腟erver中取一些相關(guān)數(shù)據(jù)以實(shí)現(xiàn)頁(yè)面模板的動(dòng)態(tài)顯示

1前言
最近在ASP.NET中做了一個(gè)AJAX調(diào)用 : Client端先從ASP.NET Server后臺(tái)取到一個(gè)頁(yè)面模板，然后在頁(yè)面初始化時(shí)再?gòu)腟erver中取一些相關(guān)數(shù)據(jù)以實(shí)現(xiàn)頁(yè)面模板的動(dòng)態(tài)顯示。具體實(shí)現(xiàn)為：
1) Client向 ASP.NET后臺(tái)發(fā)送HTTP GET 請(qǐng)示
2) 后臺(tái)給Client發(fā)送一個(gè)HTML模板,同時(shí)在內(nèi)存中存儲(chǔ)一個(gè)XML String (包含頁(yè)面模板動(dòng)態(tài)顯示所需的數(shù)據(jù))
3) Client在初始化頁(yè)面時(shí)，發(fā)送AJAX請(qǐng)求，拿到XML String
4) 利用拿到的XML String,定制化HTMl模板，實(shí)現(xiàn)HTML頁(yè)面模板的動(dòng)態(tài)顯示。
2幾個(gè)關(guān)鍵點(diǎn)的簡(jiǎn)介與代碼示例
2.1 ASP.NET Server端
2.1.1 用C#生成XML String
用System.Xmlnamespace下的幾個(gè)類(lèi)就可以實(shí)現(xiàn)。下面是Code sample,

復(fù)制代碼代碼如下:

 
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如下：

復(fù)制代碼代碼如下:

 
<?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 響應(yīng)Ajax請(qǐng)求，返回XML 流
這里就只有一點(diǎn)需要注意，加個(gè)HTML Header，聲明 Content-Type.

復(fù)制代碼代碼如下:

 
Response.Clear(); 
Response.AddHeader("Content-Type", "text/xml"); 
Response.Write(Global.Repairsteps); 
Response.End(); 

2.1.3 多個(gè)Request之間數(shù)據(jù)共享
實(shí)現(xiàn)多個(gè)Request之間數(shù)據(jù)共享的方法很簡(jiǎn)單直觀，利用一個(gè)Global對(duì)象就可以了。

復(fù)制代碼代碼如下:

 
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

復(fù)制代碼代碼如下:

 
$.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 動(dòng)態(tài)插入HTML List 元素
比較常見(jiàn)的方法是生成html stream,然后用append或html把Stream插入到DOM里面去。這樣做有一個(gè)問(wèn)題，如果Stream里恰好有雙引號(hào)或單引號(hào)時(shí)，就要用很多的“\”分隔符，容易出錯(cuò)，可讀性不太法，不太方便，事實(shí)上，JQuery有個(gè)create new element的功能。只要給$的輸入?yún)?shù)包含<tag ... >時(shí)，JQuery就不會(huì)把它理解成一個(gè)selector expression, 而是把它理解成一個(gè)生成新的DOM element 。以下是一個(gè)code sample.

復(fù)制代碼代碼如下:

 
$(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 如下：

復(fù)制代碼代碼如下:

 
<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總結(jié)
本文介紹了在ASP.NET中使用Ajax可能會(huì)碰到的幾個(gè)關(guān)鍵點(diǎn)。 C#生成XML流，AJAX實(shí)現(xiàn)(Server端與Client端)， Global 變量，與及如果用一種比較好的方法動(dòng)態(tài)插入HTML 元素.
4參考
http://www.dotnetperls.com/global-variables-aspnet
http://api.jquery.com/jQuery/