asp.net中jquery $.ajax實現資料調用實現

最近在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="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>

 

總結:
有了jquery的ajax外掛程式後我們就不需要像原產生的js ajax一樣來建立xmlhttp對象和考慮是否相容不同瀏覽器了，這個外掛程式全部為我們想好了，我們只要簡單的使用就行了。