论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > Asp.net教程
Tag:静态页面,treeview,gridview,repeater,dataset,sqldatareader,ado.net,上传,三层,ajax,xml,留言本,新闻发布,商城,注入,存储过程,分页,安全,优化,xmlhttp,fso,jmail,application,session,防盗链,stream,无组件,组件,md5,乱码,缓存,加密,验证码,算法,cookies,ubb,正则表达式,水印,索引,日志,压缩,base64,url重写,控件,Web.config,JDBC,函数,内存,PDF,迁移,结构,破解,编译,配置,进程,分词,IIS,触发器,socket,form认证,登录,视频教程

ASP.NET教程:AJAX 调用案例

文章类别:Asp.net | 发表日期:2012-5-10 9:19:40

ASP.NET教程:AJAX 调用案例


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、几个关键点的简介与代码示例 
1) ASP.NET Server端 ;
2) 用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> 
 
响应Ajax请求,返回XML 流
   
这里就只有一点需要注意,加个HTML Header,声明 Content-Type.
. 代码如下:
Response.Clear();
Response.AddHeader("Content-Type", "text/xml");
Response.Write(Global.Repairsteps);
Response.End(); 

多个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;
}
}
}

3、Client端 

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) 动态插入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>

4、总结
这篇文章介绍了在ASP.NET中使用Ajax可能会碰到的几个关键点。 C#生成XML流,AJAX实现(Server端与Client端), Global 变量,与及如果用一种比较好的方法动态插入HTML 元素.

视频教程列表
文章教程搜索
 
Asp.net推荐教程
Asp.net热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058
处理 SSI 文件时出错