dynamicContent.html<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>dynamicContent</title>
<script type="text/javascript">
var xmlHttp;
function createXMLHttpRequest()
{
if(window.XMLHttpRequest)
{
xmlHttp = new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
xmlHttp = new ActiveXObejct("Mircosoft.HTTP");
}
}
function startRequest()
{
createXMLHttpRequest();
//创建XMLHttpRequest对象
xmlHttp.onreadystatechange = callBack;
//设置它的回调函数
xmlHttp.open("GET","dynamicContent.xml",true);
//建立对服务器的调用
xmlHttp.send();
//发送请求
}
function callBack()
{
if(xmlHttp.readyState == 4)
{
if(xmlHttp.status == 200)
{
clearPreviousResults();
//清除以前结果
parseResults();
//解析结果
}
}
}
function clearPreviousResults()
{
var header = document.getElementById("header");
//获得span元素节点
if(header.hasChildNodes()){
//如果有子节点
header.removeChild(header.childNodes[0]);
//删除它的第一个子节点
}
var tableBody = document.getElementById("resultsBody");
//获得tbody元素节点
while(tableBody.childNodes.length>0){
//tableBody元素有子节点
tableBody.removeChild(tableBody.childNodes[0]);
//删除tableBody的子节点
}
}
function parseResults()
{
var results = xmlHttp.responseXML;
//获得响应的信息
var property;
var address;
var price;
var comments;
var properties = results.getElementsByTagName("property");
//根据property元素节点获得一个数组properties
for(var i = 0 ; i < properties.length; i++){
property = properties[i];
address = property.getElementsByTagName("address")[0].firstChild.nodeValue;
//获得address元素节点的子文本节点内容
price = property.getElementsByTagName("price")[0].firstChild.nodeValue;
//获得price元素节点的子文本节点内容
comments = property.getElementsByTagName("comments")[0].firstChild.nodeValue;
//获得comments元素节点的子文本节点内容
addTableRow(address,price,comments);
//根据得到的文本内容构建表格的数据行
}
var header = document.createElement("h2");
//创建一个h2元素节点
var headerText = document.createTextNode("Results:");
//创建一个文本节点
header.appendChild(headerText);
//给h2元素添加一个文本的子节点
document.getElementById("header").appendChild(header);
//给span元素台添加一个h2元素的子节点
document.getElementById("resultsTable").setAttribute("border","1");
//设置表格的属性边框为1像素
document.getElementById("resultsTable").setAttribute("cellSpacing","0");
//单元格间距为0
}
function addTableRow(address,price,comments)
{
var row = document.createElement("tr");
//创建一个tr元素节点
var cell = createCellWithText(address);
//根据address文本内容创建一个单元格
row.appendChild(cell);
//添加到tr元素上
cell = createCellWithText(price);
//根据price文本内容创建一个单元格
row.appendChild(cell);
//添加到tr元素上
cell = createCellWithText(comments);
//根据comments文本内容创建一个单元格
row.appendChild(cell);
//添加到tr元素上
document.getElementById("resultsBody").appendChild(row);
//将数据行添加到tbody元素上
}
function createCellWithText(text)//根据文本创建单元格
{
var cell = document.createElement("td");
//创建一个td元素节点
var textNode = document.createTextNode(text);
//创建一个文本元素节点
cell.appendChild(textNode);
//给td元素节点添加一个文本子节点
return cell;
//返回这个td元素节点
}
</script>
</head>
<body>
<h1>Search Real Estate Listings</h1>
Show listings from
<select>
<option value="50000">$50,000</option>
<option value="100000">$100,000</option>
<option value="150000">$150,000</option>
</select>
to
<select>
<option value="100000">$100,000</option>
<option value="150000">$150,000</option>
<option value="200000">$200,000</option>
</select>
<input type="button" value="Search" onclick="startRequest()"/>
<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>Quiet, 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>