XML示例

最新推荐文章于 2024-04-18 20:24:08 发布

无知的小菜鸡

最新推荐文章于 2024-04-18 20:24:08 发布

阅读量1.5k

点赞数

本文链接：https://blog.csdn.net/weixin_41897680/article/details/106221561

版权

异步加载XML数据

示例1： 加载一个 XML 文件 - 跨浏览器实例
note.xml

<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>

html

<body>
	<div>
		<b>To:<span id="to"></span></b><br />
		<b>From:<span id="from"></span></b><br />
		<b>Message:<span id="message"></span></b>
	</div>
	<script type="text/javascript">
		function createRequest(url) {
			var xmlhttp = null
			if (window.createRequest) { //IE7+, Firefox, Chrome, Opera, Safari
				xmlhttp = new XMLHttpRequest()
			} else { // IE6, IE5
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")
			}
			if (!xmlhttp) {
				alert("不能创建XMLHTTP实例")
				return false
			}
			xmlhttp.open("GET", url, false)
			xmlhttp.send(null)
			return xmlhttp.responseXML
		}
		var xmlDoc = createRequest("./note.xml")
		document.getElementById("to").innerHTML =
			xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue
		document.getElementById("from").innerHTML =
			xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue
		document.getElementById("message").innerHTML =
			xmlDoc.getElementsByTagName("message")[0].childNodes[0].nodeValue
	</script>
</body>

在这里插入图片描述
示例2： 异步加载XML数据，并将数据添加到表格中
goodss.xml

<?xml version="1.0" encoding="utf-8"?>
<goodss>
	<goods name="数码相机">
		<type>IT数码</type>
		<goodsunit>台</goodsunit>
		<price>6306(元)</price>
	</goods>
	<goods name="洗衣机">
		<type>家用电器</type>
		<goodsunit>台</goodsunit>
		<price>3240(元)</price>
	</goods>
	<goods name="笔记本">
		<type>IT数码</type>
		<goodsunit>台</goodsunit>
		<price>5600(元)</price>
	</goods>
</goodss>

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
       table{
		   border: 1px solid red;
		   width: 400px;
		   height: 120px;
	   }
	   td{
		   border: 1px solid red;
			text-align: center;
	   }
		</style>
		<script type="text/javascript">
			/**
			 *  (3)自定义JavaScript函数createTable()，用于将载入到DOM中的XML取出并以表格的形式显示在页面中 。
			 *  该函数只包括一个参数xmldoc，用于指定载入到DOM中的XML，无返回值
			 */
			function createTable(xmldoc) {
				var table = document.createElement("table")
				var parentTd = document.getElementById("parentTd")
				parentTd.appendChild(table)
				var header = table.createTHead()
				var headerrow = header.insertRow(0)
				headerrow.height = "27" //设置表头高度
				headerrow.insertCell(0).appendChild(document.createTextNode("商品名称"))
				headerrow.insertCell(1).appendChild(document.createTextNode("类别"))
				headerrow.insertCell(2).appendChild(document.createTextNode("单位"))
				headerrow.insertCell(3).appendChild(document.createTextNode("单价"))
				var goodss = xmldoc.getElementsByTagName("goods") //获取xml文件中的商品信息
				for (var i = 0; i < goodss.length; i++) {
					var g = goodss[i]
					var name = g.getAttribute("name")
					var type = g.getElementsByTagName("type")[0].firstChild.data
					var goodsunit = g.getElementsByTagName("goodsunit")[0].firstChild.data
					var price = g.getElementsByTagName("price")[0].firstChild.data
					//将商品信息输入到表格中
					var row = table.insertRow(i + 1)
					row.insertCell(0).appendChild(document.createTextNode(name))
					row.insertCell(1).appendChild(document.createTextNode(type))
					row.insertCell(2).appendChild(document.createTextNode(goodsunit))
					row.insertCell(3).appendChild(document.createTextNode(price))
				}
			}

			//(4)搭建Ajax技术框架
			var http_request = false

			function createRequest(url) {
				http_request = false
				if (window.XMLHttpRequest) { //标准浏览器
					http_request = new XMLHttpRequest()
					if (http_request.overrideMimeType) {
						http_request.overrideMimeType("text/xml")
					}
				} else if (window.ActiveXObject) {
					//IE
					try {
						http_request = new ActiveXObject("Msxml2.XMLHTTP")
					} catch (e) {
						try {
							http_request = new ActiveXObject("Microsoft.XMLHTTP")
						} catch (e) {
							//TODO handle the exception
						}
					}
				}
				if (!http_request) {
					alert("不能创建XMLHTTP实例")
					return false
				}
				http_request.onreadystatechange = function() { //处理服务器返回的信息
					if (http_request.readyState == 4) {
						if (http_request.status == 200) {
							var xmldoc = http_request.responseXML
							createTable(xmldoc)
						} else {
							alert("你请求的页面发现错误")
						}
					}
				}
				//发出HTTP请求
				http_request.open("GET", url, true)
				http_request.send(null)
			}
			window.onload = function() {
				createRequest("goodss.xml")
			}
		</script>
	</head>
	<body>
		<!-- (5)将用于显示新创建表格的单元的id属性设置为parentTd -->
		<div id="parentTd"></div>
	</body>
</html>

在这里插入图片描述

无知的小菜鸡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
XML示例

异步加载XML数据示例1：加载一个 XML 文件 - 跨浏览器实例note.xml<note><to>Tove</to><from>Jani</from><heading>Reminder</heading><body>Don't forget me this weekend!</body></note>html<body> <div>
复制链接

扫一扫