动态获得xml格式的数据 dynamicContent.html

最新推荐文章于 2024-03-28 14:52:33 发布

iteye_9891

最新推荐文章于 2024-03-28 14:52:33 发布

阅读量208

点赞数

分类专栏： JavaScript 文章标签： XML HTML Ajax Microsoft

本文链接：https://blog.csdn.net/iteye_9891/article/details/81692309

版权

JavaScript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

dynamicContent.html

例子来源：《Ajax 基础教程》金灵等译这本书非常不错


<html>
<head>
<title>Dynamically Editing Page Content</title>
<script>
var xmlHttp;
function createXMLHttpRequest() {
	if (window.ActiveXObject) {
		xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	else if (window.XMLHttpRequest) {
		xmlHttp = new XMLHttpRequest();
	}
}

function doSearch() {
	createXMLHttpRequest();
	xmlHttp.onreadystatechange = handleStateChange;
	xmlHttp.open("GET", "dynamicContent.xml", true);
	xmlHttp.send(null);
}

function handleStateChange() {
	if(xmlHttp.readyState == 4) {
		if(xmlHttp.status == 200) {
			clearPreviousResults();
			parseResults();
		}
	}
}

function clearPreviousResults() {
	var header = document.getElementById("header");
	if(header.hasChildNodes()) {
		header.removeChild(header.childNodes[0]);
	}
	var tableBody = document.getElementById("resultsBody");
	while(tableBody.childNodes.length > 0) {
		tableBody.removeChild(tableBody.childNodes[0]);
	}
}

function parseResults() {
	var results = xmlHttp.responseXML;

	var property = null;
	var address = "";
	var price = "";
	var comments = "";

	var properties = results.getElementsByTagName("property");
	for(var i = 0; i< properties.length; i++) {
		property = properties[i];
		address = property.getElementsByTagName("address")[0].firstChild.nodeValue;
		price = property.getElementsByTagName("price")[0].firstChild.nodeValue;
		comments = property.getElementsByTagName("comments")[0].firstChild.nodeValue;
		addTableRow(address, price, comments);
	}
	var header = document.createElement("h2");
	var headerTest = document.createTextNode("Results:");
	header.appendChild(headerTest);
	document.getElementById("header").appendChild(header);

	document.getElementById("resultsTable").setAttribute("border", "1");

}

function addTableRow(address, price, comments) {
	var row = document.createElement("tr");
	var cell = createCellWithText(address);
	row.appendChild(cell);

	cell = createCellWithText(price);
	row.appendChild(cell);

	cell = createCellWithText(comments);
	row.appendChild(cell);

	document.getElementById("resultsBody").appendChild(row);
}

function createCellWithText(text) {
	var cell = document.createElement("td");
	var textNode = document.createTextNode(text);
	cell.appendChild(textNode);
	return cell;
}
</script>
</head>
<body>
<form action="#">
		<input type="button" value="Serrch" onclick="doSearch();" />
		<input type="button" value="Clearn" onclick="clearPreviousResults();" />
</form>
<span id="header"></span>
<table id="resultsTable" width="75%" border="0">
	<tbody id="resultsBody"></tbody>
</table>
</body>
</html>

dynamicContent.xml


<?xml version="1.0" encoding="UTF-8"?>
<properties>
	<property>
		<address>812 Gwyn Ave</address>
		<price>$100,000</price>
		<comments>Queet, serene neighborhood</comments>
	</property>
	<property>
		<address>3308 James Ave S</address>
		<price>$110,000</price>
		<comments>Close to schools, shopping, entertainment</comments>
	</property>
	<property>
		<address>98320 County Rd 113</address>
		<price>$115,000</price>
		<comments>Small acreage outside of town</comments>
	</property>
</properties>

iteye_9891

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动态获得xml格式的数据 dynamicContent.html

dynamicContent.html例子来源：《Ajax 基础教程》金灵等译这本书非常不错[code="html"]Dynamically Editing Page Contentvar xmlHttp;function createXMLHttpRequest() { if (window.ActiveXObject) { xmlHt...
复制链接

扫一扫

专栏目录