AJAX基础教程——学习笔记(二)
来源:互联网 发布:aws和阿里云 编辑:程序博客网 时间:2024/05/01 19:17
DOM(p35)
DOM(文档对象模型)是一个W3C规约,可以以一种独立于平台的语言的方式访问和修改一个文档的内容和结构。换句话说,就是表示和处理一个HTML或XML文档的常用方法。
DOM的设计是以对象管理组织(OMG)的规约为基础的,可以用于任何编程语言。
DOM实际上是以面向对象方式描述的对象模型。DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。可以把DOM认为是页面上数据和结构的一个数形表示。
使用innerHTML属性创建动态内容(p37)
结合使用HTML元素的innerHTML属性,responseText属性就会变得非常有用。
innerHTML属性是一个非标准的属性,是一个简单的串,表示一组开始标记和结束标记之间的内容。
通过结合使用responseText和innerHTML,服务器就能“生产”或生成HTML内容,由浏览器使用innerHTML属性来“消费”或处理。
Document.getElementById(“results”).innerHTML = xmlHttp.responseText;
<div id=”results”></div>
W3C DOM和JavaScript(p40)
W3C提供的定义:文档对象模型(DOM)是与平台和语言无关的接口,允许程序和脚本动态地访问和更新文档的内容、结构和样式。文档可以进一步处理,处理的结果可以放回到所提供的页面中。
W3C DOM和JavaScript很容易混淆不清。DOM是面向HTML和XML文档的API,为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构。JavaScript则是用于访问和处理DOM的语言。如果没有DOM,JavaScript根本没有Web页面和构成页面元素的概念。文档中的每个元素都是DOM的一部分,这就使得JavaScript可以访问元素的属性和方法。
用于处理XML文档的DOM元素属性(p41)
ChildNodes: 返回当前元素所有子元素的数组
firstChild: 返回当前元素的第一个下级子元素
lastChild: 返回当前元素的最后一个子元素
nextSibling: 返回紧跟在当前元素后面的元素
nodeValue: 指定表示元素值的读/写属性
parentNode: 返回元素的父节点
previousSibling: 返回紧邻当前元素之前的元素
用于遍历XML文档的DOM元素方法(p41)
getElementById(id) (document): 获取有指定唯一ID属性文档中的元素
getElementsByTagName(name): 返回当前元素中有指定标记名的自元素的数组
hasChildNodes(): 返回一个布尔值,指示元素是否有子元素
getAttribute(name): 返回元素的属性值,属性由name指定
使用遵循W3C DOM的JavaScript读取XML文档:
parseXML.xml
<?xml version="1.0" encoding="UTF-8"?>
<states>
<north>
<state>Minnesota</state>
<state>Iowa</state>
<state>North Dakota</state>
</north>
<south>
<state>Texas</state>
<state>Oklahoma</state>
<state>Louisiana</state>
</south>
<east>
<state>New York</state>
<state>North Carolina</state>
<state>Massachusetts</state>
</east>
<west>
<state>California</state>
<state>Oregon</state>
<state>Nevada</state>
</west>
</states>
parseXML.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>parseXML.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
<!--
var xmlHttp;
var requestType = "";
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function startRequest(requestedList) {
requestType = requestedList;
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET", "parseXML.xml", true);
xmlHttp.send(null);
}
function handleStateChange() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
if (requestType == "north") {
listNorthStates();
} else if (requestType == "all") {
listAllStates();
}
}
}
}
//得到所有的州
function listAllStates() {
var xmlDoc = xmlHttp.responseXML; //得到服务器返回的XML文档
//alert(xmlDoc.getElementsByTagName("states")[0].childNodes[0].childNodes[0].childNodes[0].nodeValue);
//alert(xmlDoc.getElementsByTagName("states")[0].firstChild.nextSibling.childNodes[0].childNodes[0].nodeValue);
//alert(xmlDoc.getElementsByTagName("states")[0].lastChild.previousSibling.childNodes[0].childNodes[0].nodeValue);
var allStates = xmlDoc.getElementsByTagName("state"); //获取文档中所有标记名为state的元素
//getElementsByTagName返回包含所有state元素的数组
outputList("All States in Document", allStates);
}
//得到北部地区的各个州
function listNorthStates() {
var xmlDoc = xmlHttp.responseXML; //得到服务器返回的XML文档
var northNode = xmlDoc.getElementsByTagName("north")[0]; //获得XML文档中的north元素
//getElementsByTagName方法返回一个数组
var out = "Northern States";
var northStates = northNode.getElementsByTagName("state"); //得到north元素的state子元素
outputList("Northern States", northStates);
}
//从state元素获取州名
/*
在XML文档中,文本本身被认为是一个节点,而且必须是另外某个元素的子元素。
由于表示州名的文本实际上是state元素的子元素,所以必须先从state元素获取文本元素,
再从这个文本元素得到其文本内容
*/
function outputList(title, states) {
var out = title;
var currentState = null;
for (var i=0; i<states.length; i++) {
currentState = states[i]; //通过迭代得到当前元素
out = out + "/n- " + currentState.childNodes[0].nodeValue; //childNodes属性得到文本元素
//nodeValue属性返回表示州名的文本内容
}
alert(out);
}
//-->
</script>
</head>
<body>
<form action="#">
<input type="button" value="all" onclick="startRequest('all');" />
<input type="button" value="northern" onclick="startRequest('north');" />
</form>
</body>
</html>
- AJAX基础教程——学习笔记(二)
- AJAX基础教程——学习笔记(一)
- AJAX基础教程——学习笔记(三)
- Ajax基础教程整理,学习笔记
- 《语义网基础教程》学习笔记(二)
- python基础教程学习笔记二
- Ajax - 基础教程第八章例子学习二
- AJAX学习笔记(二)——同步和异步
- AJAX学习笔记(二)
- 学习笔记:《jQuery基础教程》第四版第六章课后练习——通过Ajax发送数据
- 《Ajax基础教程》学习笔记---第2章
- 《Python基础教程(第2版)》学习笔记(二):
- C++基础教程 学习笔记(二) 数组、字符串和指针
- [Matlab]基础教程学习笔记(二):程序控制结构
- 《SQL基础教程》笔记(二)
- Ajax学习笔记(二)
- ajax学习笔记二
- Ajax学习笔记(二)
- C#泛型编程指导原则(三、四)
- 读使用反射将业务对象绑定到 ASP.NET 窗体控件有感(二)
- mud的颜色
- 使用vss管理我们的代码
- 使用MiddleGen 产生hibernate的数据库表映射文件
- AJAX基础教程——学习笔记(二)
- AJAX基础教程——学习笔记(三)
- 英语学习的好qq群
- BBGZ2.0立项评审(结果立项通过)
- bcp
- Oracle SQL中查找和删除重复记录方法
- TransactionScope 的错误解决方法
- 初学JAVA 无需配置JAVA 运行环境
- ABAP--关于ABAP流程处理的一些命令的说明(stop,exit,return,check,reject)