最近在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> |
|
总结:
有了jquery的ajax插件后我们就不需要像原生成的js ajax一样来创建xmlhttp对象和考虑是否兼容不同浏览器了，这个插件全部为我们想好了，我们只要简单的使用就行了。