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 相关文章推荐
javascript中的几个运算符
Jun 29 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
Sep 06 Javascript
jquery Moblie入门—hello world的示例代码学习
Jan 08 Javascript
jquery实现控制表格行高亮实例
Jun 05 Javascript
javascript实现列表滚动的方法
Jul 30 Javascript
jQuery实现响应鼠标滚动的动感菜单效果
Sep 21 Javascript
JavaScript File API文件上传预览
Feb 02 Javascript
简述Matlab中size()函数的用法
Mar 20 Javascript
AngularJS中比较两个数组是否相同
Aug 24 Javascript
js eval函数使用,js对象和字符串互转实例
Mar 06 Javascript
node.js调用C++函数的方法示例
Sep 21 Javascript
Vue Object 的变化侦测实现代码
Apr 15 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
微信公众平台DEMO(PHP)
2016/05/04 PHP
PHP+MySQL实现输入页码跳转到指定页面功能示例
2018/06/01 PHP
如何让动态插入的javascript脚本代码跑起来。
2007/01/09 Javascript
图片上传即时显示缩略图的js代码
2009/05/27 Javascript
jQuery解决浏览器兼容性问题案例分析
2016/04/15 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
2016/06/06 Javascript
微信小程序网络请求的封装与填坑之路
2017/04/01 Javascript
vue实现百度搜索下拉提示功能实例
2017/06/14 Javascript
vue-resouce设置请求头的三种方法
2017/09/12 Javascript
详解开源的JavaScript插件化框架MinimaJS
2017/10/26 Javascript
JS使用正则表达式找出最长连续子串长度
2017/10/26 Javascript
基于JavaScript中字符串的match与replace方法(详解)
2017/12/04 Javascript
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
2020/07/11 Javascript
[03:42]2018完美盛典-《加冕》
2018/12/16 DOTA
[33:19]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第一场 11.26
2020/11/30 DOTA
Python selenium文件上传方法汇总
2020/11/19 Python
浅谈Python使用Bottle来提供一个简单的web服务
2017/12/27 Python
解决pycharm界面不能显示中文的问题
2018/05/23 Python
python使用wxpy实现微信消息防撤回脚本
2019/04/29 Python
使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件及出现问题解决方法
2019/09/06 Python
Pytorch自己加载单通道图片用作数据集训练的实例
2020/01/18 Python
解决tensorflow训练时内存持续增加并占满的问题
2020/01/19 Python
Biblibili视频投稿接口分析并以Python实现自动投稿功能
2021/02/05 Python
css3 transform及原生js实现鼠标拖动3D立方体旋转
2016/06/20 HTML / CSS
印度首选时尚目的地:Reliance Trends
2018/01/17 全球购物
瑞典轮胎在线:Tirendo.se
2018/06/21 全球购物
PHP如何对用户密码进行加密
2014/07/31 面试题
党员的自我评价范文
2014/01/02 职场文书
幼儿园教师辞职信
2014/01/18 职场文书
《月亮湾》教学反思
2014/04/14 职场文书
求职信内容怎么写
2014/05/26 职场文书
教师师德表现自我评价
2015/03/05 职场文书
计划生育目标责任书
2015/05/09 职场文书
二手房购房意向书
2015/05/09 职场文书
Java集成swagger文档组件
2021/06/28 Java/Android
使用python绘制分组对比柱状图
2022/04/21 Python