Xml data island Technology

Last Update:2018-12-05 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Microsoft introduced data island technology into browsers from ie5. By using data islands, you can easily bind Xml data to HTML, saving the trouble of manual data filling. In addition, when the Xml data is changed, the bound data also changes with the Xml data.

1. Introduce Xml data island in HTML

There are two ways to use Xml Data Islands: one is to embed XML directly in HTML, and the other is to introduce Xml data externally.

Directly embed the content of the Xml document in the <Xml> tag. The method is as follows:

<Html>
<Head> <Body>
<Xml>
<? Xml version = "1.0" encoding = "UTF-8"?>
<Book>
<Name> Xml application series </name>
<Auhtor> learner </auhtor>
<Date> 2009-03-23 </date>
</Book>
</Xml>
</Body>
</Html>

Xml data is imported externally by specifying the src attribute of the <xml> tag. For example:

2. Bind data to HTML tags

To bind data in data island to HTML, you must specify two attributes of the HTML Tag: datasrc and dataworks. Datasrc indicates the data source, that is, the data source to be bound, and dataworks indicates the field to be bound. When both attributes are correctly specified, HTML displays the data in Xml. The following is an example:

The original Xml document is introduced to HTML externally, and then the data in Xml is displayed by binding to the span tag. The Code is as follows:

<Html>
<Head>
<Title> data island test </title>
<Script type = "text/javascript">
Function btnOnclick ()
{
Var xmlDoc = document. getElementById ("XmlData ");

XmlDoc.doc umentElement. selectSingleNode ("name"). text = "abc ";
}
</Script>
</Head>
<Body>
<Xml src = "book. xml" id = "XmlData"> </xml>

<Div>
<Span> title: </span>
<Span datasrc = "# XmlData" dataworkflow = "name"> </span>
<Br/>

<Span> author: </span>
<Span datasrc = "# XmlData" dataworkflow = "author"> </span>
<Br/>

<Span> date: </span>
<Span datasrc = "# XmlData" dataworkflow = "date"> </span>
</Div>

<Input type = "button" value = "change XML value" onclick = "btnOnclick ()"/>

</Body>
</Html>

The effect of this HTML code in IE is as follows:

After you click the button "change XML value", the xml data value is changed by executing the JavaScript code. The data in HTML is automatically updated,

The Xml data island can be bound to not only the span tag, but also the table tag, and can be displayed in multiple rows. In addition, when bound to span, if Xml contains multiple data records, you can use JavaScript to control which data is displayed. The specific JavaScript code is: moveFirst () displays the first record, movePrevious () displays the previous record, moveNext () displays the next record, moveLast () displays the last record, move (n) the Nth record is displayed, and n starts from 0. You can also use BOF and EOF to determine whether it is the first record and the last record. These methods and attributes are XmlData. provided by the recordset attribute. XmlData is the ID of the data island.

To display Xml data, you can add CSS styles or XSL documents to the Xml file to render the data in the browser. Next I will introduce how to display data through CSS and XSL. Follow up.

Statement

Author: Qi FeiEmail: youring2@gmail.com
You are welcome to reprint this paragraph, but please keep this paragraph information!

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

Xml data island Technology

Contact Us

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support