I am trying to grab external xml data and display it in my html page
I am trying to grab any xml tag in this sample. But if I try grabbing anything other than the data in the first record in IE I cannot do it. What kind of javascript can I write to correct this?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Get Any XML Tag</title>
<script type='text/javascript' src='http://imaginationeverywhere.info/jslib//dev/jquery-1.5.1.js'>
</script>
<script type="text/ecmascript">
function getData() {
var XMLHTTPRequestObject = false;
if (window.XMLHTTPRequest) {
XMLHTTPRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHTTPRequestObject = new ActiveXObject('Microsoft.XMLHTTP');
}
if (XMLHTTPRequestObject) {
XMLHTTPRequestObject.open('GET', 'http://imaginationeverywhere.info/xml/cd_catalog.xml', true);
XMLHTTPRequestObject.onreadystatechange = function () {
if (XMLHTTPRequestObject.readyState == 4 && XMLHTTPRequestObject.status == 200) {
var xmlDocument = XMLHTTPRequestObject.responseXML;
displayArtist(xmlDocument);
}
}
XMLHTTPRequestObject.send(null);
}
}
function displayArtist(xmldoc) {
titleName = xmldoc.getElementsByTagName('TITLE');
artistName = xmldoc.getElementsByTagName('ARTIST');
countryName = xmldoc.getElementsByTagName('COUNTRY');
companyName = xmldoc.getElementsByTagName('COMPANY');
priceName = xmldoc.getElementsByTagName('PRICE');
yearName = xmldoc.getElem开发者_Go百科entsByTagName('YEAR');
displayTitle = "The name of this song title is " + titleName[0].firstChild.nodeValue + ".";
displayArtist = "The name of the artist is " + artistName[0].firstChild.nodeValue + ".";
displayCountry = "The name of the artist country is " + countryName[0].firstChild.nodeValue + ".";
displayCompany = "The name of the artist company is " + companyName[0].firstChild.nodeValue + ".";
displayPrice = "This song costs $" + priceName[0].firstChild.nodeValue + ".";
displayYear= "The year this song was released " + yearName[0].firstChild.nodeValue + ".";
var target = document.getElementById('targetDiv');
target.innerHTML = displayTitle + "<br/>" + displayArtist + "<br/>" + displayCountry + "<br/>" + displayCompany + "<br/>" + displayPrice + "<br/>" + displayYear;
}
</script>
</head>
<body>
<h3>Get Tag Value</h3>
<form action="#">
<input type="button" value='Get the name of the artist' onclick="getData()" />
</form>
<div id="targetDiv" style="width:300px; height:20px">
</div>
</body>
</html>
I'd suggest using jQuery - it's practically all browser compatible.
Try this:
function getData() {
$.ajax({
url: 'ajax/test.html',
dataType : 'xml',
success: function(data) {
displayArtist(data);
});
}
加载中,请稍侯......
精彩评论