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 {
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 {
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如下：
复制代码 代码如下:
-
not in position
-
images/1.jpg
images/1.jpg
images/1.jpg
images/1.jpg
images/1.jpg
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
{
///
/// global variable storing important stuff.
///
static string _repairsteps;
///
/// get or set the static important data.
///
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的功能。只要给$的输入参数包含时，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(
$('').append(
$('').attr('href', stepimagepath).append(
$('').attr('src', stepimagepath).attr('alt', stepdescription)
)));
}
生成的html section 如下：
复制代码 代码如下:
3总结
本文介绍了在asp.net中使用ajax可能会碰到的几个关键点。 c#生成xml流，ajax实现(server端与client端)， global 变量，与及如果用一种比较好的方法动态插入html 元素.
4参考
http://www.dotnetperls.com/global-variables-aspnet
http://api.jquery.com/jquery/