--XML文件（ExchangeRates.xml）
<?xml version="1.0" encoding="utf-8" ?>
<!-- List of Exchange Rates -->
<ExchangeRates>
<currency> <name>British Pounds</name> <rate>1.95</rate> </currency> <currency> <name>Canadian Dollars</name> <rate>0.85</rate> </currency> <currency> <name>Japanese Yen</name> <rate>1.95</rate> </currency> <currency> <name>Euro</name> <rate>1.31</rate> </currency></ExchangeRates>
--页面
<?xml version="1.0" encoding="utf-8" ?>
<html><head> <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" /> <title>Exchange Rate</title> <script language="javascript"> <!-- // This example web page loads an XML file of currency information, and uses it // to dynamically define elements in a pull-down menu. // The XML file must be on the same server as the HTML file, and could be updated // by a secondary application running on the server. var req; // The XML request object var max_currencies = 10; // A maxmimun number of currencies supported. // Declare two arrays to store country names and exchange rates. var country = new Array(max_currencies); var rate = new Array(max_currencies); // Asynchronously load the XML file containing currencies.function getXmlFile() { req = new ActiveXObject("Msxml2.XMLHTTP"); req.onreadystatechange = processXmlFile; req.Open("GET", "ExchangeRates.xml", true); req.Send();} // Once the XML file has loaded, this callback function parses it and places// values into the country name and rate arrays. The pull-down menu// options are then cleared and updated.function processXmlFile() { // Continue only if req status "complete" if (req.readyState == 4) { // and status is "OK" if (req.status == 200) { // Access the loaded XML file var ratedoc = req.responseXML; // Process the XML file to get currency nodes containing name and rate. // Get the list of countries and rates in the file. var items = ratedoc.getElementsByTagName('currency'); // Make sure there aren't too many. if (items.length>max_currencies) alert("Error: There are too many entries in the XML file"); // Assign each element in the array to the country name and currency rate for (i=0; i<items.length; i++) { country[i]=items[i].getElementsByTagName('name')[0].firstChild.data; rate[i]=items[i].getElementsByTagName('rate')[0].firstChild.data; } // Update the drop-down selection button // First clear any existing options var control = document.forms[0]; control[2].length=0; // The menu control is #2 in the form // Now add the countries from our array. for (i=0; i<items.length; i++) { control[2].add(new Option(country[i])); } } else { alert("Error: There was a problem retrieving the XML file \n" + req.statusText + " " + req.status + ":" + req.responseXML.xml); } }} function getRate(selected_country){ // Display the exchange rate of the selected country. var control = document.forms[0]; // Perform some basic validation: only numeric values should be entered. if (1!=(control[0].value/control[0].value)) { alert("Please enter a non-zero, numeric value"); return; } // Display the calculated rate in the appropriate text box control[1].value = Math.round((control[0].value / rate[selected_country])*100)/100; // Also display the exchange rate. rateresults.innerText="1 US dollar is worth " + rate[selected_country] + " " + country[selected_country] + "."; } //--> </script></head>
<!-- The HTML that defines the web page. -->
<body οnlοad="getXmlFile()"><form>
<h2>Exchange Rate Calculator</h2> <p><label for="dollar_amount">US Dollars: <input type="text" size="8" id="dollar_amount" value="1" /> is worth</label></p> <input type="text" size="8" id="other_amount" value="?" READONLY=true/> <select id="currency" οnchange="getRate(this.form.currency.selectedIndex)"/> </label></p> <!-- The button that calculates the rate --> <input type="button" value="Calculate" οnclick="getRate(this.form.currency.selectedIndex)"/> </form> <p><div id="rateresults"/></p> </body></html> posted on 2011-08-17 09:34 阅读( ...) 评论( ...)