欢迎您访问我爱IT技术网，今天小编为你分享的javascript教程：【ASP.NET中AJAX 调用实例代码】，下面是详细的讲解！
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几个关键点的简介与代码示例
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="http://www.jb51.net/article/images/1.jpg"><img src="http://www.jb51.net/article/images/1.jpg" alt="step21 description"></a></li>
<li><a href="http://www.jb51.net/article/images/1.jpg"><img src="http://www.jb51.net/article/images/1.jpg" alt="step21 description"></a></li>
<li><a href="http://www.jb51.net/article/images/1.jpg"><img src="http://www.jb51.net/article/images/1.jpg" alt="step21 description"></a></li>
<li><a href="http://www.jb51.net/article/images/1.jpg"><img src="http://www.jb51.net/article/images/1.jpg" alt="step21 description"></a></li>
<li><a href="http://www.jb51.net/article/images/1.jpg"><img src="http://www.jb51.net/article/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/
关于ASP.NET中AJAX 调用实例代码的用户互动如下：
相关问题：asp.net如何用ajax调用后台代码
答：js中代码 $.ajax({ type: "Post", //contentType: "application/json",// url:"Post.aspx", dataType: "xml", //返回格式 data:"" ,//"格式{paraName:paraValue}", success: function(result) { var ID="Post"; $(result).find("Table").each(fu... >>详细
相关问题：在ASP.net中用Ajax实现客户端控件调用后台代码，应...
答：如何在客户端直接调用WebService中的方法？ 1.Web.config中需要配置好运行ASP.NET AJAX框架相应的配置项，当然，建立一个ASP.NET AJAX Enabled Web Site项目时，Web.config已经配置好了。 2.想让某个WebService可以被JS调用，需要做一下几步： I... >>详细
相关问题：asp.net中ajax调用
答： ajax page function callAjax() { var lastname = "John"; var url = "WebForm1.aspx"; var data = { lastname: lastname }; $.get(url, data, function (e) { $('#div1').html(e); }); } start用jquery 吧 如果你一定要用原生的 再告诉我 我给... >>详细
- 【firefox】firefox浏览器不支持innerText的解决
- 【Extjs】Extjs学习过程中新手容易碰到的低级错误
- 【clearInterval】js clearInterval()方法的定义
- 【ComboBox】ComboBox 和 DateField 在IE下消失的
- 【ajax】用js来解决ajax读取页面乱码-页面乱码
- 【addEventListener】addEventListener和attachEv
- 【dom】javascript dom追加内容实现示例-追加内容
- 【has】基于jquery的has()方法以及与find()方法以
- 【extjs】Extjs入门之动态加载树代码-动态加载树
- 【AngularJS】AngularJS语法详解-语法
- 评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
-