ASP.NET中AJAX 调用实例代码


Posted in Javascript onMay 03, 2012

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/
Javascript 相关文章推荐
ie与ff下的event事件使用介绍
Nov 25 Javascript
异步动态加载JS并运行(示例代码)
Dec 13 Javascript
浅谈javascript中的闭包
May 13 Javascript
jQuery实现新消息在网页标题闪烁提示
Jun 23 Javascript
AngularJS 让人爱不释手的八种功能
Mar 23 Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
Apr 10 Javascript
Node.js使用gm拼装sprite图片
Jul 04 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
Jul 11 Javascript
vuex2中使用mapGetters/mapActions报错的解决方法
Oct 20 Javascript
解决layui的input独占一行的问题
Sep 10 Javascript
Vuex的热更替如何实现
Jun 05 Javascript
如何区分vue中的v-show 与 v-if
Sep 08 Javascript
javascript中将Object转换为String函数代码 (json str)
Apr 29 #Javascript
基于jquery ajax 用户无刷新登录方法详解
Apr 28 #Javascript
学习从实践开始之jQuery插件开发 对话框插件开发
Apr 26 #Javascript
再谈querySelector和querySelectorAll的区别与联系
Apr 20 #Javascript
js querySelector和getElementById通过id获取元素的区别
Apr 20 #Javascript
仿微博字符限制效果实现代码
Apr 20 #Javascript
javascript 另一种图片滚动切换效果思路
Apr 20 #Javascript
You might like
php构造函数实例讲解
2013/11/13 PHP
php实现可用于mysql,mssql,pg数据库操作类
2014/12/13 PHP
yii2 开发api接口时优雅的处理全局异常的方法
2019/05/14 PHP
关于 byval 与 byref 的区别分析总结
2007/10/08 Javascript
提升PHP安全:8个必须修改的PHP默认配置
2014/11/17 Javascript
Nodejs学习item【入门手上】
2016/05/05 NodeJs
使用jQuery的ajax方法向服务器发出get和post请求的方法
2017/01/13 Javascript
Node.js自定义实现文件路由功能
2017/09/22 Javascript
js实现手机web图片左右滑动效果
2017/12/29 Javascript
详解JavaScript的BUG和错误
2018/05/07 Javascript
vue+Element-ui实现分页效果
2020/11/15 Javascript
vue实现拖拽进度条
2021/03/01 Vue.js
[01:32]TI奖金增速竟因它再创新高!DOTA2勇士令状不朽珍藏Ⅰ饰品欣赏
2018/05/18 DOTA
Python中的Descriptor描述符学习教程
2016/06/02 Python
Python的Flask框架应用调用Redis队列数据的方法
2016/06/06 Python
Python中字典和集合学习小结
2017/07/07 Python
python使用threading获取线程函数返回值的实现方法
2017/11/15 Python
numpy中以文本的方式存储以及读取数据方法
2018/06/04 Python
Python K最近邻从原理到实现的方法
2019/08/15 Python
执行Django数据迁移时报 1091错误及解决方法
2019/10/14 Python
python将四元数变换为旋转矩阵的实例
2019/12/04 Python
Python序列化pickle模块使用详解
2020/03/05 Python
CSS3 实现弹幕的示例代码
2017/08/07 HTML / CSS
解决margin 外边距合并问题
2019/07/03 HTML / CSS
CSS3实现苹果手机解锁的字体闪亮效果示例
2021/01/05 HTML / CSS
给分销商的致歉信
2014/01/14 职场文书
大三学习计划书范文
2014/05/02 职场文书
音乐兴趣小组活动总结
2014/07/07 职场文书
交通局领导班子群众路线教育实践活动对照检查材料思想汇报
2014/10/09 职场文书
领导参观欢迎词
2015/01/26 职场文书
2015年度个人思想工作总结
2015/04/08 职场文书
2015小学教育教学工作总结
2015/07/21 职场文书
Python中相见恨晚的技巧
2021/04/13 Python
你真的了解PHP中的引用符号(&)吗
2021/05/12 PHP
css背景和边框标签实例详解
2021/05/21 HTML / CSS
Nginx静态压缩和代码压缩提高访问速度详解
2022/05/30 Servers