1. Provide a data source for good XML files:
<?xml version= "1.0" encoding= "UTF-8"? ><catalog><cd><title>empire burlesque</title> <artist>bob dylan</artist><country>usa</country><company>columbia</company> <PRICE>10.90</PRICE><YEAR>1985</YEAR></CD>...</CATALOG>
2. A table that writes the display data for an HTML page
<table border= "1px" > <tr> <td> title: </td> <td id= "title" > </td> </tr> <tr> <td> artist: </td> <td id= "Artist" > </td> </tr> <tr> <td> Country: </td> <td id= " Country "> </td> </tr> <tr> <td> Company: </td> <TD id= "Company" > </td> </tr> <tr> <td> Price: </td > <td id= "Price" > </td> </tr> <tr> <td> Year: </td> <td id= "Year" > </td> </tr> <tr> <td colspan= "2" > <button onclick= "pre ()" > Previous </button> <button onclick= "next ()" > next page </button> </td> </tr> </table>
3. Writing JavaScript script files
<script type= "Text/javascript" >//Load XMLHttpRequest Object if (window. XMLHttpRequest) {xmlhttp = new XMLHttpRequest (); }else{xmlhttp = new ActiveXObject ("Microsoft.XMLHTTP"); } xmlhttp.open ("GET", "Newfile.xml", false);//Open link xmlhttp.send ();//Send data var xmldoc = xmlhttp.responsexml;//Get xmldoc piece var x = xmldoc.getelementsbytagname ("CD"), var i = 0;var title = document.getElementById ("title"); var artist = Document.ge Telementbyid ("artist"), var country = document.getElementById ("country"); var company = document.getElementById (" Company "), var price = document.getElementById (" price "), var year = document.getElementById (" year ");//Load Data function DISPLAYCD () {title.innerhtml = Xmldoc.getelementsbytagname ("title") [i].childnodes[0].nodevalue;artist.innerhtml = Xmldoc.getelementsbytagname ("ARTIST") [i].childnodes[0].nodevalue;country.innerhtml = Xmldoc.getelementsbytagname ("Country") [i].childnodes[0].nodevalue;company.innerhtml = Xmldoc.getelementsbytagname ("Company") [I].childnodes[0]. NodeValue;price.innerhtml = Xmldoc.getelementsbytagname ("Price") [i].childnodes[0].nodevalue;year.innerhtml = Xmldoc.getelementsbytagname ("Year") [I].childnodes[0].nodevalue;} Previous page, index minus one, if less than 0 equals zero function pre () {i--;if (i < 0) {i = 0;} DISPLAYCD ();} Next function Next () {i++;d isplaycd ();} </script>
4. Load data after page load is complete
<body onload= "DISPLAYCD ()" >
JavaScript controls XML File data