原生AJAX访问xml

汤永红

于 2022-01-24 09:07:47 发布

阅读量122

点赞数

文章标签： xml ajax linq

本文链接：https://blog.csdn.net/mtm001/article/details/122660884

版权

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE comparisons [

<!ELEMENT comparisons (hotel*)>
<!ELEMENT hotel (name, stars, reviews, score)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT stars (#PCDATA)>
<!ELEMENT reviews (#PCDATA)>
<!ELEMENT score (#PCDATA)>

<!ATTLIST comparisons
          dated CDATA #REQUIRED
          location CDATA #REQUIRED
          company CDATA #REQUIRED
          url CDATA #REQUIRED>

]>

<comparisons dated="2021-10-15" location="Sydney CBD" company="Trivago" url="https://www.trivago.com.au/">

  <hotel>
    <name>Four Seasons Hotel Sydney</name>
    <stars>5</stars>
    <reviews>3389</reviews>
    <score>9.2</score>
  </hotel>

  <hotel>
    <name>Shangri-La Hotel Sydney</name>
    <stars>5</stars>
    <reviews>3874</reviews>
    <score>8.8</score>
  </hotel>


</comparisons>

<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Insert title here</title>
		<style>
			*{
				margin: 0 auto;
				padding: 0;
				text-align: center;
			}
			
			table,tr,th,td{
				border: 1px solid #808080;
				border-collapse: collapse;
			}
			.app{
				margin: 0 auto;
				
			}
			#hotel{
				margin: 0 auto;
			}
			#hotelData{
				margin: 0 auto;
			}
			.myBtn{
				width: 100px;/*a width value of 100px*/
				padding: 10px;
				background-color: #ecf2f4;
				margin-top: 15px;
			}
			.myCaption{
				font-size: 21px;
				font-weight: bold;
				padding-top: 30px;
				padding-bottom: 10px;
			}
			th{
				background-color: #a8a8a8;
			}
			th,td{
				padding: 10px;
				font-size: 20px;
			}
			/*nth-child() pseudo-class must be applied to shade even table rows (see “Design Resources”)*/
			 table tr:nth-child(even){
		        background-color: #e0e0e0;
		    }
		    #leftAlign{
		    	text-align: left;
		    }
		</style>
		<script>
			function loadXMLDoc(url) {

				var xmlhttp;
				var txt, x, xx, i;
				if(window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
					xmlhttp = new XMLHttpRequest();
				} else { // code for IE6, IE5
					xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
				}

				xmlhttp.open("GET", url, true);
				xmlhttp.send();
				xmlhttp.onreadystatechange = function() {
					if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
						txt = "<table border='1'><caption class='myCaption'><a href=\"#\" target=\"_blank\">Trivago</a>:\"Sydney CBD\" Search Results</caption ><tr><th>Result#</th><th>Hotel Name</th><th>Star Rating</th><th>Total Reviews</th><th>Overall Score</th></tr>";
						x = xmlhttp.responseXML.documentElement.getElementsByTagName("hotel");
						for(i = 0; i < x.length; i++) {
							
							txt = txt + "<td> "+(i+1)+"</td>";
							xx = x[i].getElementsByTagName("name");
							try {
								txt = txt + "<td id='leftAlign'>" + xx[0].firstChild.nodeValue + "</td>";
							} catch(er) {
								txt = txt + "<td> </td>";
							}
							xx = x[i].getElementsByTagName("stars");
							try {
								switch(xx[0].firstChild.nodeValue){
									case '1':
									   startImage = "<img src='https://mywebspace.net.au/UOWC128/assignment_5/images/1_star.png'></img>";
									break;
									case '2':
									   startImage = "<img src='https://mywebspace.net.au/UOWC128/assignment_5/images/2_stars.png'></img>";
									break;
									case '3':
									   startImage = "<img src='https://mywebspace.net.au/UOWC128/assignment_5/images/3_stars.png'></img>";
									break;
									case '4':
									   startImage = "<img src='https://mywebspace.net.au/UOWC128/assignment_5/images/4_stars.png'></img>";
									break;
									case '5':
									   startImage = "<img src='https://mywebspace.net.au/UOWC128/assignment_5/images/5_stars.png'></img>";
									break;
								}
								txt = txt + "<td>" + startImage + "</td>";
							} catch(er) {
								txt = txt + "<td> </td>";
							}
							xx = x[i].getElementsByTagName("reviews");
							try {
								txt = txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
							} catch(er) {
								txt = txt + "<td> </td>";
							}
							xx = x[i].getElementsByTagName("score");
							try {
								let s = parseFloat(xx[0].firstChild.nodeValue);
								if(s < 8.5){
									txt = txt + "<td style='background:#ff9999'>" + s + "</td>";
								}else if(s < 9.0){
									txt = txt + "<td  style='background:#ffdb99'>" + s + "</td>";
								}else{
									txt = txt + "<td  style='background:#99cc99'>" + s + "</td>";
								}
								
							} catch(er) {
								txt = txt + "<td> </td>";
							}
							txt = txt + "</tr>";
							
							
						}
						txt = txt + "</table><h3 style='margin-top:10px'>This result set was last updated on 15/10/2021</h3>";
						document.getElementById('hotelData').innerHTML = txt;
					}

				}
			}

		</script>

	</head>

	<body>
	<div class="app">
		<div id="hotel">
			<h2 style="margin-top: 10px;">Task2:AJAX&XML</h2>
			<button class="myBtn" onclick="loadXMLDoc('A5_TASK1.xml')">Start</button>		
		</div>
		<div id="hotelData">
			
		</div>
	
	</div>
	</body>

</html>

汤永红

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
原生AJAX访问xml

<?xml version="1.0" encoding="utf-8"?><!DOCTYPE comparisons [<!ELEMENT comparisons (hotel*)><!ELEMENT hotel (name, stars, reviews, score)><!ELEMENT name (#PCDATA)><!ELEMENT stars (#PCDATA)><!ELEMENT reviews (#PC.
复制链接

扫一扫