AJAX中使用W3C DOM动态修改页面
2009-08-17 00:08
1036 查看
dinamicContent.html
dinamicContent.xml (假设服务器返回的数据以XML的形式，即该XML)
<!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">
<!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">
<head>
<title>Dynamically Editing Page Content</title>
<mce:script type="text/javascript"><!--
var xmlHttp;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
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 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 handleStateChange() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
clearPreviousResults();
parseResults();
}
}
}
/**
* @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]); //移除首行(个)元素
}
}
}
/**
* @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]); //移除首行(个)元素
}
}
}
/**
* @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");
}
/**
* @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");
}
/**
* @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;
}
/**
* @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;
}
// --></mce:script>
</head>
<body>
<h1>Search Real Estate Listings</h1>
<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" onclick="doSearch();"/>
</form>
<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" onclick="doSearch();"/>
</form>
<span id="header">
</span>
<span id="header">
</span>
<table id="resultsTable" width="75%" border="0">
<tbody id="resultsBody">
</tbody>
</table>
<table id="resultsTable" width="75%" border="0">
<tbody id="resultsBody">
</tbody>
</table>
</body>
</html>dinamicContent.xml (假设服务器返回的数据以XML的形式，即该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>812 GWYN AVE</address> <price>$100,000</price> <comments>Quiet,serene neighborhood</comments> </property> <property> <address>812 GWYN AVE</address> <price>$100,000</price> <comments>Quiet,serene neighborhood</comments> </property> </properties>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- AJAX 学习笔记(6) 使用W3C DOM动态编辑页面
- ThinkPHP定时ajax获取后台数据，使用javascript动态修改前端页面的表格来显示数据
- 使用W3C DOM动态编辑页面
- 一个页面实现修改删除列表显示，ajax动态生成table(使用ajax，springmvc，jsp)
- dom动态修改html页面
- 掌握 Ajax：第 5 部分: 操纵 DOM使用 JavaScript 即时更新 Web 页面
- DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法（排序，过滤，分页等）
- 使用Jquery的Ajax实现无刷新更新，修改，删除页面
- 如何让动态创建的页面元素响应用户事件 (HTML/javascript/jQuery/Ajax/DOM)
- 一个使用AJAX动态改变页面刷新的东东~~
- 前台使用ajax动态获取数据并且显示在页面上，SSM框架二级联动
- AJAX入门 之 使用 AJAX 修改页面文本内容（四）
- asp.net 使用HttpModule对全站输出的动态页面的HTML内容进行修改，不会错乱
- 根据下拉值，使用ajax动态获取数据（在页面显示数据）
- 使用Jquery的Ajax实现无刷新更新，修改，删除页面
- 添加时动态的在页面生成表格，使用ajax异步在后台添加到数据库
- 使用DOM动态改变页面外观----读取和设定元素属性
- 使用jquery当页面打开时，将修改样式的点击事件绑定到Dom
- 转载 使用AJAX实现动态刷新页面功能
- 使用Jquery的Ajax实现无刷新更新，修改，删除页面