使用W3C DOM动态修改页面

最新推荐文章于 2022-10-31 23:09:39 发布

wc_stone

最新推荐文章于 2022-10-31 23:09:39 发布

阅读量212

点赞数

分类专栏： ajax 文章标签： XML Microsoft XHTML HTML

ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">[/code]
<head>
<title>Dynamically Editing Page Content</title>

<script type="text/javascript">
[code]
var xmlHttp;

function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}[/code]

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

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

[code]/**
* @author wc_stone
* 清空header、tableBody元素中的所有子元素
*/
function clearPreviousResults() {

var header = document.getElementById("header"); //获取页面元素
if(header.hasChildNodes()) { //判断该元素是否有子元素
while(header.childNodes.length > 0) {
header.removeChild(header.childNodes[0]);
}
}

var tableBody = document.getElementById("resultsBody");
if(tableBody.hasChildNodes()) {
while(tableBody.childNodes.length > 0) { //判断有多少行，遍历所有行
tableBody.removeChild(tableBody.childNodes[0]); //移除首行(个)元素
}
}

}[/code]

[code]/**
* @author wc_stone
* 读取服务器返回数据(xml)，动态将数据填充到页面
*/
function parseResults() {
var results = xmlHttp.responseXML; //获取服务器的返回值，xml格式

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

//返回一个数组，property的所有的子元素
var properties = results.getElementsByTagName("property");
for(var i = 0; i < properties.length; i++) {
property = properties[i];
//返回 address 元素的子元素数组的第一个值
address = property.getElementsByTagName("address")[0].childNodes[0].nodeValue;
//返回 price 元素的子元素数组的首个值
price = property.getElementsByTagName("price")[0].firstChild.nodeValue;
//返回 comments 元素的子元素数组的最后一个值
comments = property.getElementsByTagName("comments")[0].lastChild.nodeValue;
addTableRow(address, price, comments);
}

var header = document.createElement("h2"); //创建h2元素
//创建一个包含 Results: 文本的节点
var headerText = document.createTextNode("Results:");
//将 headerText 节点增加到 header 元素的子节点列表中
header.appendChild(headerText);
//将 header 节点增加到 header 元素的子节点列表中
document.getElementById("header").appendChild(header);
//设置 resultsTable 元素中 border属性的值
document.getElementById("resultsTable").setAttribute("border", "1");
}[/code]

[code]/**
* @author wc_stone
* 将值添入 resultsBody 行
*/
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);
}

/**
* @author wc_stone
* 将值添入 resultsBody 列
*/
function createCellWithText(text) {
var cell = document.createElement("td");
var textNode = document.createTextNode(text);
cell.appendChild(textNode);

return cell;
}[/code]
</script>
</head>

<body>
<h1>Search Real Estate Listings</h1>
[code]
<form action="#">
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" οnclick="doSearch();"/>
</form>[/code]

[code] <span id="header">

</span>[/code]

[code] <table id="resultsTable" width="75%" border="0">
<tbody id="resultsBody">
</tbody>
</table>[/code]
</body>
</html>

wc_stone

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用W3C DOM动态修改页面

[code][/code]Dynamically Editing Page Content[code]var xmlHttp;function createXMLHttpRequest() { if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLH...
复制链接

扫一扫