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 相关文章推荐
jquery div 居中技巧应用介绍
Nov 24 Javascript
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
Jan 11 Javascript
js实现黑色简易的滑动门网页tab选项卡效果
Aug 31 Javascript
搭建Bootstrap离线文档的方法
Dec 02 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
Aug 18 Javascript
vue-resource + json-server模拟数据的方法
Nov 02 Javascript
promise和co搭配生成器函数方式解决js代码异步流程的比较
May 25 Javascript
Bootstrap Table列宽拖动的方法
Aug 15 Javascript
微信小程序带动画弹窗组件使用方法详解
Nov 27 Javascript
koa-router路由参数和前端路由的结合详解
May 19 Javascript
Vue 前端实现登陆拦截及axios 拦截器的使用
Jul 17 Javascript
jquery实现上传文件进度条
Mar 26 jQuery
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
Search Engine Friendly的URL设计
2006/10/09 PHP
转PHP手册及PHP编程标准
2006/12/17 PHP
PHP获取mysql数据表的字段名称和详细信息的方法
2014/09/27 PHP
php mysql like 实现多关键词搜索的方法
2016/10/29 PHP
Javascript 自适应高度的Tab选项卡
2011/04/05 Javascript
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
2012/07/31 Javascript
使用jquery mobile做幻灯播放效果实现步骤
2013/01/04 Javascript
JavaScript中使用自然对数ln的方法
2015/06/14 Javascript
javascript实现检验的各种规则
2015/07/31 Javascript
Bootstrap每天必学之导航条
2015/11/27 Javascript
canvas实现图像放大镜
2017/02/06 Javascript
从vue源码解析Vue.set()和this.$set()
2018/08/30 Javascript
详解React之key的使用和实践
2018/09/29 Javascript
记一次vue去除#问题处理经过小结
2019/01/24 Javascript
ES6 如何改变JS内置行为的代理与反射
2019/02/11 Javascript
python练习程序批量修改文件名
2014/01/16 Python
Python实现的下载8000首儿歌的代码分享
2014/11/21 Python
Python中使用第三方库xlrd来写入Excel文件示例
2015/04/05 Python
scrapy-redis源码分析之发送POST请求详解
2019/05/15 Python
django 实现将本地图片存入数据库,并能显示在web上的示例
2019/08/07 Python
Python 整行读取文本方法并去掉readlines换行\n操作
2020/09/03 Python
Html5剪切板功能的实现代码
2018/06/29 HTML / CSS
HTML5的结构和语义(1):前言
2008/10/17 HTML / CSS
HTML5 canvas 基本语法
2009/08/26 HTML / CSS
S’well Bottle保温杯官网:绝缘不锈钢水瓶
2018/05/09 全球购物
NULL是什么,它是怎么定义的
2015/05/09 面试题
一篇.NET面试题
2014/09/29 面试题
金额转换,阿拉伯数字的金额转换成中国传统的形式如:(¥1011)-> (一千零一拾一元整)输出
2015/05/29 面试题
求职意向书范文
2014/04/01 职场文书
倡议书的写法
2014/08/30 职场文书
2014年纪检部工作总结
2014/11/12 职场文书
奖学金个人总结
2015/03/04 职场文书
个人年终总结怎么写
2015/03/09 职场文书
2015年社区关工委工作总结
2015/04/03 职场文书
交通事故调解协议书
2015/05/20 职场文书
校运会新闻稿
2015/07/17 职场文书