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 面向对象的 私有成员和公开成员
May 13 Javascript
基于jquery的网站幻灯片切换效果焦点图代码
Sep 15 Javascript
Javascript中封装window.open解决不兼容问题
Sep 28 Javascript
jQuery中ajax的post()方法用法实例
Dec 26 Javascript
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
Jun 12 jQuery
详解在Angular项目中添加插件ng-bootstrap
Jul 04 Javascript
js图片放大镜实例讲解(必看篇)
Jul 17 Javascript
关于Angularjs中跨域设置白名单问题
Apr 17 Javascript
深入理解js 中async 函数的含义和用法
May 13 Javascript
浅谈在vue中使用mint-ui swipe遇到的问题
Sep 27 Javascript
JS使用数组实现的队列功能示例
Mar 04 Javascript
vue实现表单录入小案例
Sep 27 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 导出数据到淘宝助手CSV的方法分享
2010/02/27 PHP
PHPStrom中实用的功能和快捷键大全
2015/09/23 PHP
PHP实现针对日期,月数,天数,周数,小时,分,秒等的加减运算示例【基于strtotime】
2017/04/19 PHP
PHP基于array_unique实现二维数组去重
2020/07/14 PHP
JQuery操作三大控件(下拉,单选,复选)的方法
2013/08/06 Javascript
javascript使用onclick事件改变选中行的颜色
2013/12/30 Javascript
js判断是否为ie的方法小结
2014/01/13 Javascript
深入理解Javascript中this的作用域
2014/08/12 Javascript
Nodejs极简入门教程(一):模块机制
2014/10/25 NodeJs
node-sass安装失败的原因与解决方法
2017/09/04 Javascript
react-native使用react-navigation进行页面跳转导航的示例
2017/09/07 Javascript
Vue中的Vux配置指南
2017/12/08 Javascript
详解如何在vue项目中使用eslint+prettier格式化代码
2018/11/10 Javascript
微信小程序dom操作的替代思路实例分析
2018/12/06 Javascript
微信小程序+腾讯地图开发实现路径规划绘制
2019/05/22 Javascript
react实现antd线上主题动态切换功能
2019/08/12 Javascript
JavaScript监听一个DOM元素大小变化
2020/04/26 Javascript
python多重继承新算法C3介绍
2014/09/28 Python
Python采用socket模拟TCP通讯的实现方法
2014/11/19 Python
python中enumerate函数遍历元素用法分析
2016/03/11 Python
详解python中递归函数
2019/04/16 Python
python将字符串转变成dict格式的实现
2019/11/18 Python
CSS3 media queries + jQuery实现响应式导航
2016/09/30 HTML / CSS
CSS3制作缩略图的详细过程
2016/07/08 HTML / CSS
S’well Bottle保温杯官网:绝缘不锈钢水瓶
2018/05/09 全球购物
英国川宁茶官方网站:Twinings茶
2019/05/21 全球购物
全球最大的瓷器、水晶和银器零售商:Replacements
2020/06/15 全球购物
四年的大学生生活自我评价
2013/12/09 职场文书
人事档案接收函
2014/01/12 职场文书
光信息科学与技术专业职业生涯规划
2014/03/13 职场文书
大二学年个人总结
2015/03/03 职场文书
2016幼儿园教师年度考核评语
2015/12/01 职场文书
Python开发工具Pycharm的安装以及使用步骤总结
2021/06/24 Python
MongoDB日志切割的三种方式总结
2021/09/15 MongoDB
MySQL查询日期时间
2022/05/15 MySQL
ubuntu端向日葵键盘输入卡顿问题及解决
2022/12/24 Servers