ASP.NET中AJAX 调用实例代码_jquery-js-Tutorial-php.cn

ASP.NET中AJAX 调用实例代码_jquery

WBOY

Freigeben： 2016-05-16 17:53:58

Original

1288 Leute haben es durchsucht

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 { 
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 { 
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如下：

复制代码代码如下:

 
 
-  
Not in position 
-  
images/1.jpg 
images/1.jpg 
images/1.jpg 
images/1.jpg 
images/1.jpg 
 
 

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 
{ 
///  
/// Global variable storing important stuff. 
///  
static string _repairsteps; 
///  
/// Get or set the static important data. 
///  
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的功能。只要给$的输入参数包含时，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(
$('

').append(
$('').attr('href', stepimagepath).append(
$(' ASP.NET中AJAX 调用实例代码_jquery

').attr('src', stepimagepath).attr('alt', stepdescription)
)));
}

生成的HTML section 如下：

复制代码代码如下:

3总结
本文介绍了在ASP.NET中使用Ajax可能会碰到的几个关键点。 C#生成XML流，AJAX实现(Server端与Client端)， Global 变量，与及如果用一种比较好的方法动态插入HTML 元素.
4参考
http://www.dotnetperls.com/global-variables-aspnet
http://api.jquery.com/jQuery/