时间:2014-01-29 来源:

ASP.NET中AJAX调用实例代码

1前言
最近在ASP.NET中做了一个AJAX调用 : Client端先从ASP.NET Server后台取到一个页面模板web外包,然后在页面初始化时再从Server中取一些相关数据以实现页面模板的动态显示.具体实现为:
1) Client向 ASP.NET后台发送HTTP GET 请示
2) 后台给Client发送一个HTML模板,web外包同时在内存中存储一个XML String (包含页面模板动态显示所需的数据)
3) Client在初始化页面时,html前端制作发送AJAX请求,div页面定制化HTMl模板网页html切图排版, 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请求web外包,返回XML 流
这里就只有一点需要注意,web外包加个HTML Header, "text/xml");
Response.Write(Global.Repairsteps);
Response.End();

2.1.3 多个Request之间数据共享
实现多个Request之间数据共享的方法很简单直观div+css+js切图,
url: "http://localhost:3153/WebSite2/",
dataType: "xml", status,
success: function(xml) {
//Here we can process the xml received via Ajax
}});

2.2.2 动态插入HTML List 元素
比较常见的方法是生成html stream,然后用append或html把Stream插入到DOM里面去.这样做有一个问题,网页切图制作如果Stream里恰好有双引号或单引号时div+css+js切图,就要用 很多的“\”分隔符,手机网页外包容易出错承接网站前端,可读性不太法,页面div重构不太方便psd切图html,事实上,psd切图htmlJQuery有个create new element的功能.只要给$的输入参数包含<tag ... >时web外包, 而是把它理解成一个生成新的DOM element .以下是一个code sample.
复制代码 代码如下:

$(xml).find("step").each(function(){
var stepimagepath=$(this).text();
var stepdescription=$(this).attr("description");
additem(stepimagepath, stepdescription){
$('.ad-thumbs ul').append(
$('<li>').append(
$('<a>').attr('href', 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/ 点击次数:4547
作者:

其它web前端开发资讯

Hive元数据存储 【系统运维】2018年01月19日使用SVG画猫咪 【综合】2018年01月19日【CSDN_Markdown】使用数学公式 【互联网】2018年01月19日ubuntu12.04删除文件或文件夹 【综合】2018年01月19日XMLPubliserForExcelTemplate【架构设计】2018年01月19日【D3.js数据可视化实战】--(1)绘制网格线 【云计算】2018年01月19日【ZJOI2013】【BZOJ3110】K大数查询 【综合】2018年01月19日HDU2546:饭卡【01背包】 【移动开发】2018年01月19日办公室养生小动作 【综合】2018年01月19日低碳生活手机迅雷实现脱机高速下载2018年01月19日RabbitMQ官网教程---主题 【编程语言】2018年01月19日LeetCode---CountAndSay【编程语言】2018年01月19日【3C认证】安防产品3C认证 【编程语言】2018年01月19日ViewPager实现图片轮翻效果【Web前端】2018年01月19日将十进制数转成任何指定的进制数【编程语言】2018年01月19日自我理解的KMP算法模式匹配【系统运维】2018年01月19日
web前端行业资讯
Web new NewsList
微软发布WindowsServerBuild17074更新 ,,2018年01月18日凭借一个AI小功能,这款Google应用冲上苹果AppStore榜首 ,,2018年01月18日百度数据可视化实验室正式成立,发布深度学习可视化平台VisualDL ,,2018年01月18日OpenAI开源最新工具包,模型增大10倍只需额外增加20%计算时间 ,,2018年01月18日百度手机输入法8.0正式发布:支持多人语音速记 ,,2018年01月18日CSDN宣布收购TinyMind团队并升级为AI社区 ,,2018年01月18日甲骨文发布补丁修复英特尔芯片漏洞造成的问题 ,,2018年01月18日权威!官方发布CPU熔断和幽灵漏洞防范指引:附补丁下载 ,,2018年01月18日Oracle宣布新的JavaChampions ,,2018年01月18日腾讯加码区块链项目已悄然注册“以太锁”商标 ,,2018年01月18日Fedora28壁纸征集活动现已开幕:将持续至2月13日 ,,2018年01月18日苹果WebKit团队发布Speedometer2.0网页响应测试工具 ,,2018年01月18日百度输入法8.0后天发布:全感官AI输入 ,,2018年01月18日腾讯和乐高合作:共同研发智能玩具、游戏 ,,2018年01月18日HomePod上市日益临近智能音箱市场吸引力越来越大 ,,2018年01月18日3D打印脑组织?科学家正在向这一目标正在前进 ,,2018年01月18日英特尔公布修补漏洞后PC性能数据:8代CPU影响最小 ,,2018年01月18日云存储公司Dropbox秘密提交IPO申请估值超百亿美元 ,,2018年01月18日iPod之父:防手机上瘾无技术难度苹果谷歌应承担责任 ,,2018年01月18日芯片不安全英特尔云客户考虑转用AMD等对手处理器 ,,2018年01月18日2018年Java展望 ,,2018年01月18日区块链有多火?快播流量矿石遭20多万人疯抢 ,,2018年01月18日Intel搞定神经拟态芯片:模拟人类大脑、自主学习 ,,2018年01月18日阿里巴巴发布IoTConnect开放连接协议,盼推动语音互动入口普及 ,,2018年01月18日区块链火了,全球大佬们怎么看? ,,2018年01月18日Facebook正测试新功能主推本地新闻资讯 ,,2018年01月18日在GooglePlay中发现使用Kotlin开发的安卓恶意软件 ,,2018年01月18日VisualStudio201715.6预览版本2,增加新功能 ,,2018年01月18日百度陆奇:AI是5G最好的加速器 ,,2018年01月18日PinterestCEO:不同于谷歌和Facebook,我们走了第三条路 ,,2018年01月18日AT&T学习笔记汇编之内联c语言 【编程语言】2015年04月07日ImageButton单击切换图片效果 【Web前端】2015年05月13日C#索引器【综合】2015年05月07日vijos1132求二叉树的先序序列【综合】2015年05月05日嵌入式应用开发协作系统Yocto1.1版本发布 ,,2016年06月29日通过js判断访客显示器屏幕分辨率并给出提示2014年01月29日BZOJ-1934-Vote善意的投票-SHOI2007 【综合】2015年03月24日opencv学习笔记(3)背景分离-平均背景法2016年11月15日swiftUI专项训练40用swift实现打电话和发短信功能 【编程语言】2015年03月24日输入字符串反序输出2015年07月10日梯度算子用于图像处理及其数学基础【综合】2015年08月16日Linux可插拔认证模块的基本概念与架构 ,,2016年06月23日设置TableViewer中的高度和宽度【架构设计】2014年11月06日Java基础之hashCode方法详解 【云计算】2015年06月11日得到jQuerydetach()后节点中的某个值实现代码2014年01月29日iOS百度地图SDK使用小结【架构设计】2015年04月24日Android自定义控件之基本原理(一)2016年07月27日phparray的学习笔记2014年01月29日老板有事找你——如何在HiWork中进行私聊 【编程语言】2015年06月17日特殊数据的js四舍五入问题2014年01月29日hdoj-1875-畅通工程再续【编程语言】2015年04月01日收藏了很久的CSS的十八般技巧2014年01月29日CDR制作奇特文字效果2014年01月28日Java开源内容系统Kgcms 1,收藏 ,,2016年06月23日poj_2533_LongestOrderedSu... poj_1260_Pearls hdu_1025_ConstructingRoa...poj_2533_LongestOrdered 【移动开发】2014年11月04日关于Thread的那些事 【编程语言】2015年08月24日jQueryAjaxQueue改进步骤2014年01月29日XML概述【编程语言】2015年03月30日UVa118-MutantFlatworldExplorers【Web前端】2015年04月17日RHEL6.5安装DRBD 【移动开发】2015年07月28日
我们保证
We guarantee
> psd效果文件手工切图,保证图片效果最好体积最小利于传输
> 100%手写的HTML(DIV+CSS)编码,绝对符合W3C标准
> 代码精简、css沉余量小、搜索引擎扫描迅速,网页打开快捷
> 应用Css Sprite能够减少HTTP请求数,提高网页性能
> 跨浏览器兼容(IE6、7、8、9,Firefox火狐,Chrome谷歌)