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 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!
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 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!