利用AJAX與數(shù)據(jù)島實現(xiàn)無刷新綁定_Xml教程
推薦:網(wǎng)絡編程:如何生成XML數(shù)據(jù) 一、必須弄清楚最終需要的是什么 我們通過asp或其他動態(tài)編程語言,最終需要的是XML格式的數(shù)據(jù),這點和XML數(shù)據(jù)所在的文件載體無關,它可以是實實在在的XML文件,比如:http://www.dw8
首先我們今天要用到的是Ajax.NET Professional ,您可以從http://www.schwarz-interactive.de/ 獲取關于AJAX.NET的相關信息。其次還需要知道XML數(shù)據(jù)島的相關知識。下面我們先來看一個簡單的綁定例子:
第一步先確定XML數(shù)據(jù)源
| 以下為引用的內(nèi)容: <xml ID="xmlData" name="xmlData"> <root> �。糓ETADATA> <AUTHOR>John Smith</AUTHOR> �。糋ENERATOR>Visual Notepad</GENERATOR> �。糚AGETYPE>Reference</PAGETYPE> �。糀BSTRACT>Specifies a data island</ABSTRACT> �。�/METADATA> �。糓ETADATA> <AUTHOR>John Smith2</AUTHOR> �。糋ENERATOR>Visual Notepad2</GENERATOR> <PAGETYPE>Reference2</PAGETYPE> �。糀BSTRACT>Specifies a data island2</ABSTRACT> �。�/METADATA> �。糓ETADATA> �。糀UTHOR>John Smith3</AUTHOR> �。糋ENERATOR>Visual Notepad3</GENERATOR> <PAGETYPE>Reference3</PAGETYPE> �。糀BSTRACT>Specifies a data island3</ABSTRACT> </METADATA> �。�/root> </xml> |
第二步確定綁定容器,在這里我們使用Table
| 以下為引用的內(nèi)容: <TABLE dataSrc="#xmlData" border=1> �。糡R> �。糡D><span dataFld="AUTHOR">loading...</span></TD> �。糡D><span dataFld="GENERATOR">loading...</span></TD> �。糡D><span dataFld="PAGETYPE">loading...</span></TD> �。糡D><span dataFld="ABSTRACT">loading...</span></TD> �。�/TR> </TABLE> |
把這兩段代碼Copy到您的HTMl頁面運行既可看到效果。
第一段是我們的XML數(shù)據(jù)源,也就是要綁定的數(shù)據(jù),METADATA結點相當于表名, AUTHOR、GENERATOR、PAGETYPE、ABSTRACT相當于列名,下面的Table是用來顯示數(shù)據(jù)的容器。<TABLE dataSrc="#xmlData" border=1>是指定Table的數(shù)據(jù)源,<span dataFld="AUTHOR">loading...</span>綁定字段名。
好了,知道這些之后就再來看如何結合Ajax實現(xiàn)無刷新綁定。
第一步:配置Ajax,在Web.config文件中加入配置節(jié):
| 以下為引用的內(nèi)容: <httpHandlers> <add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro"/> </httpHandlers> |
第二步,編寫返回數(shù)據(jù)集的代碼:
| 以下為引用的內(nèi)容: public class MyClass { [AjaxMethod] public string GetDataSet() { DataSet dst = new DataSet(); DataTable dt = new DataTable(); dt.Columns.Add("Text"); dt.Columns.Add("Number"); Random random = new Random(Guid.NewGuid().GetHashCode()); for (int i = 0; i < random.Next(10,20); i ) { DataRow row = dt.NewRow(); row["Text"] = Guid.NewGuid().ToString("N"); row["Number"] = random.Next(100); dt.Rows.Add(row); } dst.Tables.Add(dt); string text = ""; using(MemoryStream ms = new MemoryStream()) { dst.WriteXml(ms); ms.Position = 0; StreamReader sr = new StreamReader(ms); text = sr.ReadToEnd(); } return text; } } |
第三步:在Page_Load中注冊該方法,AjaxPro.Utility.RegisterTypeForAjax(typeof(WebTest1.AjaxTest1));(WebTest1是名稱空間的名字)
第四步:添加客戶端綁定
| 以下為引用的內(nèi)容: <INPUT onclick="WebTest1.MyClass.GetDataSet(callback)" type="button" value="GetDataSet"> <div id="oDataPanel"> </div> <TABLE datasrc="#xmlData" WIDTH="500" BORDER="1" CELLSPACING="1" CELLPADDING="1"> �。紅head> �。紅r> �。紅h width="70%">姓名</th> �。紅h width="30%">年齡</th> �。�/tr> �。�/thead> �。糡R> �。糡D><span datafld="Text"></span></TD> �。糡D><span datafld="Number"></span></TD> </TR> </TABLE><div id="oDataPanel">是準備用來存放Xml數(shù)據(jù)源的容器 |
第五步:編定加載數(shù)據(jù)的JavaScript代碼
| 以下為引用的內(nèi)容: function callback(res) |
分享:XQuery 初學者入門教程:XQuery簡介解釋 XQuery 的最佳方式是:XQuery 相對于 XML,等同于 SQL 相對于數(shù)據(jù)庫。 XQuery 被設計用來查詢 XML 數(shù)據(jù)。 XQuery 也被稱為 XML Query。 XQuery 參考手冊 在W3School,我們提供XQue
- 相關鏈接:
- 教程說明:
Xml教程-利用AJAX與數(shù)據(jù)島實現(xiàn)無刷新綁定
。