利用AJAX與數(shù)據(jù)島實(shí)現(xiàn)無(wú)刷新綁定_Xml教程
推薦:網(wǎng)絡(luò)編程:如何生成XML數(shù)據(jù) 一、必須弄清楚最終需要的是什么 我們通過(guò)asp或其他動(dòng)態(tài)編程語(yǔ)言,最終需要的是XML格式的數(shù)據(jù),這點(diǎn)和XML數(shù)據(jù)所在的文件載體無(wú)關(guān),它可以是實(shí)實(shí)在在的XML文件,比如:http://www.dw8
首先我們今天要用到的是Ajax.NET Professional ,您可以從http://www.schwarz-interactive.de/ 獲取關(guān)于A(yíng)JAX.NET的相關(guān)信息。其次還需要知道XML數(shù)據(jù)島的相關(guān)知識(shí)。下面我們先來(lái)看一個(gè)簡(jiǎn)單的綁定例子:
第一步先確定XML數(shù)據(jù)源
| 以下為引用的內(nèi)容: <xml ID="xmlData" name="xmlData"> �。紃oot> <METADATA> �。糀UTHOR>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> �。糚AGETYPE>Reference2</PAGETYPE> <ABSTRACT>Specifies a data island2</ABSTRACT> </METADATA> �。糓ETADATA> �。糀UTHOR>John Smith3</AUTHOR> �。糋ENERATOR>Visual Notepad3</GENERATOR> �。糚AGETYPE>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頁(yè)面運(yùn)行既可看到效果。
第一段是我們的XML數(shù)據(jù)源,也就是要綁定的數(shù)據(jù),METADATA結(jié)點(diǎn)相當(dāng)于表名, AUTHOR、GENERATOR、PAGETYPE、ABSTRACT相當(dāng)于列名,下面的Table是用來(lái)顯示數(shù)據(jù)的容器。<TABLE dataSrc="#xmlData" border=1>是指定Table的數(shù)據(jù)源,<span dataFld="AUTHOR">loading...</span>綁定字段名。
好了,知道這些之后就再來(lái)看如何結(jié)合Ajax實(shí)現(xiàn)無(wú)刷新綁定。
第一步:配置Ajax,在Web.config文件中加入配置節(jié):
| 以下為引用的內(nèi)容: <httpHandlers> <add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro"/> </httpHandlers> |
第二步,編寫(xiě)返回?cái)?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中注冊(cè)該方法,AjaxPro.Utility.RegisterTypeForAjax(typeof(WebTest1.AjaxTest1));(WebTest1是名稱(chēng)空間的名字)
第四步:添加客戶(hù)端綁定
| 以下為引用的內(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> <th width="30%">年齡</th> �。�/tr> �。�/thead> �。糡R> <TD><span datafld="Text"></span></TD> �。糡D><span datafld="Number"></span></TD> �。�/TR> </TABLE><div id="oDataPanel">是準(zhǔn)備用來(lái)存放Xml數(shù)據(jù)源的容器 |
第五步:編定加載數(shù)據(jù)的JavaScript代碼
| 以下為引用的內(nèi)容: function callback(res) |
分享:XQuery 初學(xué)者入門(mén)教程:XQuery簡(jiǎn)介解釋 XQuery 的最佳方式是:XQuery 相對(duì)于 XML,等同于 SQL 相對(duì)于數(shù)據(jù)庫(kù)。 XQuery 被設(shè)計(jì)用來(lái)查詢(xún) XML 數(shù)據(jù)。 XQuery 也被稱(chēng)為 XML Query。 XQuery 參考手冊(cè) 在W3School,我們提供XQue
- xml創(chuàng)建節(jié)點(diǎn)(根節(jié)點(diǎn)、子節(jié)點(diǎn))
- WML開(kāi)發(fā)教程之 WAP網(wǎng)站服務(wù)器配置方法
- WMLScript的語(yǔ)法基礎(chǔ)
- 收集的WML Script標(biāo)準(zhǔn)函數(shù)庫(kù)
- WML教程之文本框控件Input
- 無(wú)線(xiàn)標(biāo)記語(yǔ)言(WML)基礎(chǔ)之WMLScript 基礎(chǔ)
- xml文件的結(jié)構(gòu)解讀
- 關(guān)于XSL - XSL教程
- 選擇模式 - XSL教程 - 2
- XPath入門(mén) - XSL教程 - 3
- 匹配模式 - XSL教程 - 4
- 測(cè)試模式 - XSL教程 - 5
- 相關(guān)鏈接:
- 教程說(shuō)明:
Xml教程-利用AJAX與數(shù)據(jù)島實(shí)現(xiàn)無(wú)刷新綁定
。