Chapter 5: XML instance analysis Outline: 1: Example effect Two: Example analysis
1. Define a new logo.
2. Create an XML document.
3. Create the corresponding HTML file. XML has a wide range of applications in different fields, such as MathML in the field of technology, WML in wireless communication applications, SVG in network graphics, etc. Here we focus on the application of XML on the web. XML is mainly used to utilize its powerful data operation capabilities. Generally, XML is used to cooperate with server-side programs such as javascript and asp, which can achieve almost all application requirements on the network. Considering the convenience of explanation, we will introduce a simple example below, which does not include server-side programs. The purpose is to give you a perceptual understanding of the data manipulation capabilities of XML. OK, let's first [click here] to see the effect of the example. (Please open it with IE5.0 or above version) This is a simple CD record data retrieval function. You can see the information about a single CD by clicking "Previous" and "Next". We used two methods to achieve this effect: 1. Use DHTML to hide the data in different layers and display it in sequence through mouse events; 2. Use background programs (such as ASP, CGI, PHP, JSP, etc.) to call server-side data. But in this example, when we open the original code of the page, we can see that there is no DIV using DHTML, and there is no action of form. It is completely implemented in XML. Let's analyze its production process: Step 1: Define the new logo.
According to the actual CD data, first create a new logo named <CD>; secondly, create its relevant data identifiers, namely: CD name <Title>, singer <Artist>, publishing year <Year>, country <Country>, issue company <Company> and price <Price>; finally, create a logo named directory <CATALOG>. Why create another <CATALOG> logo? Because it is stipulated in the XML document that there must and can only be one root element (identification), we have multiple CD data, and these data are parallel relationships, so we need to establish a root element for these parallel elements.
The definitions and relationships of the above elements are fully in line with the XML standard and do not require a special DTD file to define, so the DTD definition can be omitted. If we want to use DTD to define, the above process 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 six child elements: Title, Artist, Year, Country, Company, Price, and their contents are all defined as text (characters, numbers, text). (Note: For specific syntax instructions, please read the introduction of DTD in the previous chapter) Step 2: 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 there is the document content, the structure tree is very clear:
<CATALOG>
<CD>
......
</CD>
<CD>
......
</CD>
</CATALOG>
A total of 5 sets of data are defined. We save the above code as a file for call. Step 3: Create the corresponding HTML file.
1. Import XML data.
We know that among the popular browsers, only Microsoft's IE5.0 or above browsers support XML. IE supports inserting XML through object objects in HTML, and imports data through js() method. Let's look at the code:
<object WIDTH="0" HEIGHT="0"
CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39" ID="xmldso">
</object>
Define an object with the ID name xmldso. Then use js to import xml data in the head area:
<script for="window" event="onload">
("");
</script>
2. Bundle data.
The XML data will then be bound to the table with the <SPAN> identifier. Among them, ID, DATASRC, and DTATFLD are all attributes 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 a browsing 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 two mouse click functions: movenext() and moveprevious(). Add the following code to the head area:
<script language="JavaScript">
function movenext()
{
if ( < )
{
();
}
}
function moveprevious()
{
if ( > 1)
{
();
}
}
</script>
OK, let's look at the entire original code of the HTML file first:
<html>
<head>
<script for="window" event="onload">
("");
</script>
<script language="JavaScript">
function movenext()
{
if ( < )
{
();
}
}
function moveprevious()
{
if ( > 1)
{
();
}
}
</script>
<TITLE>CD Navigate</TITLE>
</head>
<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>
</html>
Save the above code as a file and put the files in the second step together. Open the file and you will see the same effect as the above example.
OK, so far, we have learned a lot of knowledge about XML. Let’s summarize the first five chapters, namely, the XML Quick Start, the concept principles of XML, the terminology of XML, the syntax of XML and the example analysis of this chapter. At this point, the tutorial part is over. During the writing process, Ajie tried his best to explain the concept of XML in a simple and easy-to-understand manner and try to tell everyone his understanding. However, because I have not been learning XML for a long time and I am not systematic and in-depth enough in the technology of the entire XML, so there are inevitably omissions. Please correct and understand. Thank you!
At the end of the tutorial, there is a chapter "Related Resources for XML", which provides many very good learning websites and resource connections. We recommend you to save them. Please continue browsing: XML related resources.
(Source: eNet Academy)