【旧文】AJAX总结（二）

来源：互联网发布：九九乘法表的c语言代码编辑：程序博客网时间：2024/06/06 03:41

四、DOM

1.DOM概述

XHR对象提供了跟服务器通讯的能力，而DOM提供了访问、动态更新页面的能力。

DOM是W3C推出的文档对象模型，是表示文档和访问、操作构成文档的各种元素的API，被定义为独立于语言的标准，在javascript和java以及其他语言中都有实现。

在DOM中，HTML文档的层次机构被表示为树形结构，树的节点表示文档中的各种内容。HTML文档的树形表示主要包含表示元素或标记（如<table>和<p>）的节点和表示文本串的节点构成。

DOM定义了许多接口，其中比较通用的是其核心API：NodeList、Node、Document、Element接口，Document和Element接口都是Node接口的子接口。在JavaScript实现的DOM中还包含HTML文档专用的API，如HTMLDocument、HTMLElement。另外，DOM为许多HTML元素定义了标记专有的接口，如HTMLBodyElement、HTMLTitleElement。

2. Node接口

Node接口是文档树中所有节点的顶级父接口，定义了通用的属性和方法。

常用属性：

属性

说明

nodeType

代表节点的类型

nodeName

节点的名字，Element节点则代表Element的标记名称

parentNode

以Node的形式返回当前节点的父节点。如果没有父节点，为null

childNodes

以NodeList的形式返回当前节点的子节点

firstChild

以Node的形式返回当前节点的第一个子节点，如果没有子节点，则为null

lastChild

以Node的形式返回当前节点的最后一个子节点，如果没有子节点，则为null

previousSibling

以Node的形式返回当前节点的前一个兄弟节点，如果没有，则为null

nextSibling

以Node的形式返回当前节点的下一个兄弟节点，如果没有，则为null

nodeValue

如果是TextNode节点，该属性代表节点的文本值

注意：在java的实现中，与上述属性对应的是get/set方法，如getNodeType()、getFirstChild()等。

常用方法：

方法

说明

hasChildNodes()

如果当前节点拥有子节点，则返回true

appendChild()

把一个节点增加到当前节点的childNodes，给文档树增加节点

removeChild()

从文档树中删除并返回指定的子节点

replaceChild()

从文档树中删除并返回指定的子节点，用另一个节点替换

insertBefore()

在当前节点的指定子节点之前插入一个节点

3. Document接口

DOM 树的根节点是个Document对象，该对象的documentElement属性引用表示文档根元素的Element对象，对于HTML文档，就是<html>元素。Document接口的常用方法有：

方法

说明

createAttribute()

用指定的名字创建新的Attr节点

createElement()

用指定的名字创建新的Element节点

createTextNode()

用指定的名字创建新的TextNode节点

getElementById()

返回文档中具有指定id属性的Element节点

getElementsByTagName()

以NodeList形式返回文档中具有指定标记名的所有Element节点

继承Node接口的方法

在HTML文档中，document对象就是Document接口的一个实现，准确的说，是HTMLDocument接口的实现。document对象还有许多HTML专用的方法和属性，如：

document.write();

document.all;

document.forms[];

4. Element接口

常用方法：

方法

说明

hasAttribute()

如果该元素具有指定名字的属性，返回true

getAttribute()

以字符串形式返回指定属性的值

setAttribute()

把指定属性值设置为指定的字符串，不存在则添加

removeAttribute()

从元素中删除指定的属性

getAttributeNode()

以Attr节点的形式返回指定的属性

setAttributeNode()

把指定的Attr节点添加到该元素的属性列表中

removeAttributeNode()

从元素的属性列表中删除指定的Attr节点

getElementsByTagName()

返回一个NodeList，包含具体指定标记名称的该元素的所有子节点

继承Node接口的方法

4. NodeList接口

在javascript实现的DOM中，NodeList接口的使用类似与Node[]的形式，可以通过指定索引下标的形式引用，如：

var nodeLists = element. childNodes;

for(var i = 0;i<nodeLists.length;i++){

var node = nodeLists[i];

}

6. 其他

document.all属性，IE4提供；

document.getElementsByName()是HTMLDocument接口定义的方法；

innerHTML属性，IE4定义，后来的Netscape6、Mozilla也实现了；

五、

AJAX中的中文问题

1. 获取数据时的中文问题

XHR对象同时具有responseText属性和responseXML属性，分别获取服务器返回的文本和兼容DOM的XML文档对象。在服务器返回的数据量比较大而且数据有一定的结构时，我们通常在服务器端组织成xml格式，而在客户端通过responseXML属性获取XML文档对象，这样便于解析。比如：

var results = xmlHttp.responseXML.getElementsByTagName("result");

在返回的数据里包含中文字符时，无法直接获取responseXML属性，需要首先获取responseText属性，再利用微软的Microsoft.XMLDOM组件解析文本格式的xml字符串，如下：

var retXml = xmlHttp.responseText;var OrgDoc = new ActiveXObject('Microsoft.XMLDOM'); OrgDoc.async = false; OrgDoc.loadXML(retXml); var root = OrgDoc.documentElement;

2. 提交数据时的中文问题

有时候，需要向服务器端提交中文数据，这种情况一般采用POST方法，把要提交的数据以名值对的形式作为send方法的参数，在服务器端需要做一下设置：

request.setCharacterEncoding("UTF-8");这样，request.getParameter()方法获得的参数就不会出现乱码。

（完）