Fifth Chapter: XML instance Analysis
Outline:
One: Instance effect
Two: Example analysis
1. Define a new identity.
2. Create an XML document.
3. Create the corresponding HTML file.
XML is widely used in different fields, such as MathML in science and technology, WML in wireless communication applications, SVG in network image, etc., we focus on the application of XML on the Web. The application of XML to the Web is mainly based on its powerful data manipulation capabilities. Generally use XML with JavaScript and ASP server-side programs, can achieve almost all the network application requirements.
For the convenience of explanation, we introduce a simple example below that does not include a server-side program. The goal is to give you an intuitive understanding of the data manipulation capabilities of XML.
OK, let's first [click here] to see the effect of the example. (Please open in IE5.0 above version browser)
This is a simple CD recording data retrieval function. You can see the information about a single CD by clicking on the "previous" and "Next". We used two methods to achieve this effect:
1. Using DHTML, the data is hidden in different layers and displayed in sequence by mouse events;
2. Use background programs (such as asp,cgi,php,jsp, etc.) to invoke server-side data.
But in this case, we open the page's original code and see that there is no DHTML Div, no action on the form, it's completely XML. Now let's analyze the process of making it:
First step: Define the new identity.
According to the actual CD data, first create a new logo named <CD>, and then establish its related data identification, respectively: CD name <title>, singer <artist>, publishing age <year>, country < Country>, issuing company <Company> and price <Price>; Finally, a logo named directory <CATALOG> will be established. Why build a <CATALOG> logo again? Because the XML document stipulates that there must and can only be one root element (identity), we have multiple CD data, which is a side-by-side relationship, so we need to create a root element for these parallel elements.
The definitions and relationships of the above elements are fully compliant with the XML standard and do not require a special DTD file to define, so you can omit the DTD definition. If we want to use DTDs to define, the above procedure can be expressed as:
<! ELEMENT CATALOG (CD) *>
<! ELEMENT CD (Title,artist,year,country,company,price) >
<! ELEMENT Title (#PCDATA) >
<! ELEMENT Artist (#PCDATA) >
<! ELEMENT year (#PCDATA) >
<! ELEMENT Country (#PCDATA) >
<! ELEMENT Company (#PCDATA) >
<! ELEMENT Price (#PCDATA) >
This code indicates that the element catalog contains multiple CD child elements, and the child element CD contains the title, Artist, year, Country, company, and price six child elements, all of which are defined as text (characters, numbers, text). (Note: Specific syntax notes can be described in a chapter on the introduction of DTDs)
Step Two: Create an XML document.
<?xml version= "1.0"?>
<CATALOG>
<CD>
<title>empire burlesque</title>
<artist>bob dylan</artist>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
<CD>
<title>hide your heart</title>
<artist>bonnie tylor</artist>
<COUNTRY>UK</COUNTRY>
<company>cbs records</company>
<PRICE>9.90</PRICE>
<YEAR>1988</YEAR>
</CD>
<CD>
<title>greatest hits</title>
<artist>dolly parton</artist>
<COUNTRY>USA</COUNTRY>
<COMPANY>RCA</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1982</YEAR>
</CD>
<CD>
<title>still got the Blues</title>
<artist>gary more</artist>
<COUNTRY>UK</COUNTRY>
<company>virgin redords</company>
<PRICE>10.20</PRICE>
<YEAR>1990</YEAR>
</CD>
<CD>
<TITLE>Eros</TITLE>
<artist>eros ramazzotti</artist>
<COUNTRY>EU</COUNTRY>
<COMPANY>BMG</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1997</YEAR>
</CD>
</CATALOG>
The above code first uses the <?xml version= "1.0"?> declaration statement to indicate that this is an XML document, and its format complies with the XML 1.0 standard specification. Then the document content, the structure tree is very clear:
<CATALOG>
<CD>
......
</CD>
<CD>
......
</CD>
</CATALOG>
5 sets of data are defined altogether. We save the above code as a cd.xml file for the call.
Step three: Create the corresponding HTML file.
1. Import XML data.
We know that in the current popular browsers, only Microsoft's IE5.0 version of the browser supports XML for the time being. IE supports inserting XML by object object in HTML, and imports data through the XmlDocument.Load () method of JS. We look at the code: <object width= "0" height= "0"
Classid= "clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39" id= "Xmldso" >
</object>
Defines a object,id named Xmldso. Then use JS in the head area to introduce XML data:
<script for= "window" event= "onload" >
Xmldso. XmlDocument.Load ("Cd.xml");
</script>
2. Bundle of data.
The XML data is then bound to the table using the <SPAN> identity. Where id,datasrc,dtatfld are the properties of <SPAN>. The code is as follows:
<table>
<tr><td>title:</td><td><span id= "title" datasrc= #xmldso datafld= "title" ></span ></td></tr>
<tr><td>artist:</td><td><span id= "Artist" datasrc= #xmldso datafld= "Artist" ></ Span></td></tr>
<tr><td>year:</td><td><span id= "Year" datasrc= #xmldso datafld= "year" ></SPAN> </td></tr>
<tr><td>country:</td><td><span id= "Country" datasrc= #xmldso datafld= "Country" ></ Span></td></tr>
<tr><td>company:</td><td><span id= "Company" Datasrc= #xmldso datafld= "Company" ></ Span></td></tr>
<tr><td>price:</td><td><span id= "Price" datasrc= #xmldso datafld= ' price ' ></span ></td></tr>
</table>
3. Action operation.
Finally, provide the browse button for the data:
<input Type=button value= "Previous CD" onclick= "MovePrevious ()" >
<input Type=button value= "next CD" onclick= "MoveNext ()" >
and use JS to complete the two mouse clicks: MoveNext () and MovePrevious (). Add the following code to the head area:
<script language= "JavaScript" >
function MoveNext ()
{
if (Xmldso.recordset.absoluteposition < Xmldso.recordset.recordcount)
{
Xmldso.recordset.movenext ();
}
}
function MovePrevious ()
{
if (Xmldso.recordset.absoluteposition > 1)
{
Xmldso.recordset.moveprevious ();
}
}
</script>
OK, let's look at all the original code for the HTML file:
<script for= "window" event= "onload" >
Xmldso. XmlDocument.Load ("Cd.xml");
</script>
<script language= "JavaScript" >
function MoveNext ()
{
if (Xmldso.recordset.absoluteposition < Xmldso.recordset.recordcount)
{
Xmldso.recordset.movenext ();
}
}
function MovePrevious ()
{
if (Xmldso.recordset.absoluteposition > 1)
{
Xmldso.recordset.moveprevious ();
}
}
</script>
<TITLE>CD navigate</title>
<body>
<p>
<object width= "0" height= "0"
Classid= "clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39" id= "Xmldso" >
</object>
<table>
<tr><td>title:</td><td><span id= "title" datasrc= #xmldso datafld= "title" ></span ></td></tr>
<tr><td>artist:</td><td><span id= "Artist" datasrc= #xmldso datafld= "Artist" ></ Span></td></tr>
<tr><td>year:</td><td><span id= "Year" datasrc= #xmldso datafld= "year" ></SPAN> </td></tr>
<tr><td>country:</td><td><span id= "Country" datasrc= #xmldso datafld= "Country" ></ Span></td></tr>
<tr><td>company:</td><td><span id= "Company" Datasrc= #xmldso datafld= "Company" ></ Span></td></tr>
<tr><td>price:</td><td><span id= "Price" datasrc= #xmldso datafld= ' price ' ></span ></td></tr>
</table>
<p>
<input Type=button value= "Previous CD" onclick= "MovePrevious ()" >
<input Type=button value= "next CD" onclick= "MoveNext ()" >
</p>
</body>
Save the above code as a cd.htm file and put it together in the second step of the Cd.xml file. Open the Cd.htm file and you'll see the same effect as the example above.
Well, so far, we've learned a lot about XML, so let's summarize the first five chapters, which are XML QuickStart, the concept of XML, XML terminology, XML syntax, and example parsing in this chapter. Here, the tutorial section is over. In the process of writing, Atzie do our best to the concept of XML to speak easily understandable, as far as possible their understanding to tell everyone, but because I learn XML time is not long, the entire XML technology is not enough to grasp the system and in-depth, so it is inevitable that there are omissions, please correct and understanding, thank you!