首页 / 脚本样式 / JavaScript / 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+" "+status+" "+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/