使用W3C DOM动态生成页面
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>
dynamicContent.html清单：
<!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>
<script type="text/javascript">
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 headerText = document.createTextNode("Results:");
header.appendChild(headerText);
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>
<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>
<span id="header">
</span>
<table id="resultsTable" width="75%" border="0">
<tbody id="resultsBody">
</tbody>
</table>
</body>
</html>
运行结果：
分享到：
相关推荐
本笔记参考了W3C的教程，如果你希望深入学习，可以访问W3School或MDN Web文档等权威网站，了解更多关于Ajax的知识。 总结：Ajax是现代Web开发中的重要技术，通过它，开发者能构建出更加高效、互动的网页应用。理解...
HTML（HyperText Markup Language）是网页制作的基础，用于定义页面的结构和内容。它通过一系列的标记来组织页面，如`<head>`、`<body>`、`...结合W3C帮助文档，能够更深入地理解和应用这些知识，提升自己的技能水平。
此外，可能还会涉及到DOM操作、AJAX异步请求、jQuery库的使用，甚至是前端框架如React或Vue的简介。 对于开发者而言，这样的资源集合非常有价值，无论是用于自学还是作为参考手册。它不仅提供了Java编程的深度学习...
6. **AJAX**：Asynchronous JavaScript and XML，用于在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。 7. **ES6及以后的新特性**：包括箭头函数、模板字符串、解构赋值、Promise、async/await等，...
在学习这本书的过程中，我们首先会了解到JavaScript的历史及其重要性，特别是它与W3C标准化的DOM（文档对象模型）的关系。DOM使得开发者能够通过JavaScript动态地操纵网页内容，从而实现Ajax技术驱动的交互式网页...
了解DOM操作、事件处理、AJAX异步请求等是基础。 4. **SQL（结构化查询语言）**：用于管理和处理数据库，学习选择、插入、更新、删除数据，以及复杂的查询语句和联接操作。 5. **Web标准和最佳实践**：了解W3C标准...
它能够实现动态验证、动态效果、页面元素操作以及异步通信（如Ajax）等功能。JavaScript的运行环境是浏览器，包括IE、Firefox、Chrome、Safari和Opera等主流浏览器都提供了良好的支持。 #### 二、JavaScript的组成 ...
1998年10月，W3C推出了第一级DOM标准（DOM Level 1），其定义为：“一个与系统平台和编程语言无关的接口，程序和脚本可以通过这个接口动态地访问和修改文档的内容、结构和样式。”这个标准为DOM的发展奠定了坚实的...
教程可能会涵盖事件处理、DOM操作、AJAX异步请求等，让网页具有交互性。 6. **网页优化**：包括减少HTTP请求、压缩文件、利用缓存、图片优化等策略，以提高网页加载速度和用户体验。 7. **Web标准与最佳实践**：...
w3school离线版2011年1月是一个包含2010年和2011年初w3school网站内容的CHM文件集合，为用户提供了Web开发基础知识的学习资源。无论是在无网络环境下还是作为在线教程的补充，都是学习和参考Web技术的好工具。用户只...
- W3C School的jQuery教程：提供了详尽的jQuery教程和实例，适合初学者入门。 - jQuery API文档：官方提供的完整API文档，供开发者查阅具体方法和参数。 通过深入学习和实践这些知识点，你将能够熟练运用jQuery提升...
教程会介绍变量、数据类型、运算符、流程控制（条件语句、循环）、函数、对象、DOM操作以及AJAX等基础知识，还会涉及ES6新特性，如箭头函数、模板字符串等。 4. **XML（Extensible Markup Language）**：XML是一种...
DOM（Document Object Model）编程允许通过JavaScript操作网页元素，实现动态效果。事件处理使得用户与页面的互动成为可能。正则表达式则在字符串处理和数据验证中发挥重要作用。 【网页布局】 "Div+CSS"网页布局是...
- JavaScript可以访问和修改Document Object Model（DOM），通过DOM对象（如`window`）来操作页面元素。 8. **学习资源**： - **手册查询**：W3School和MDN（Mozilla Developer Network）提供了详细的JavaScript...
**jQuery 学习笔记** jQuery 是一个广泛使用的 JavaScript 库，它极大地简化了网页的 JavaScript 编程。这个学习笔记将深入探讨 jQuery 的核心概念、功能以及如何在实际项目中应用。 1. **jQuery 概述** jQuery ...
### jQuery编程笔记知识点详解 #### 一、jQuery概述 ...以上是对jQuery编程笔记中提到的知识点的详细解读，覆盖了从基础知识到高级应用的各个方面，有助于深入理解和掌握jQuery的使用方法和技术细节。
在模仿京东网站时，你可能需要用到JavaScript来处理用户事件（如点击、滚动等）、操作DOM（Document Object Model，文档对象模型）进行动态内容更新、实现动画效果以及与服务器进行异步通信（AJAX）。学习基础的...
首先，`addEventListener` 是 W3C 标准推荐的事件处理方式，适用于所有支持 W3C DOM Level 2 的浏览器，如 Chrome、Firefox、Safari 和 Opera。这个方法接收两个参数：一个是事件名，另一个是事件处理函数。例如，...