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" ?>

　　-

　　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

　　{

　　///

　　static string _repairsteps;

　　///

　　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+'

　　'+status+'

　　'+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(

　　$('