动态获得xml格式的数据 dynamicContent.html
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>