Ajax机制与DOM初步介绍

最新推荐文章于 2024-05-01 10:23:16 发布

weiluo12

最新推荐文章于 2024-05-01 10:23:16 发布

阅读量539

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/weiluo12/article/details/8885422

版权

jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.对象初始化
2.发送请求
3.服务器接受请求并接受处理
4.服务器返回响应数据
5.客户端接收
6.依据响应数据修改客户端页面被荣

1.初始化对象并发出XMLHttpReq请求

var XMLHttpReq;

//创建XMLHttpRequest对象

function createXMLHttpRequest() {

if(window.XMLHttpRequest) { //Mozilla 浏览器

XMLHttpReq = new XMLHttpRequest();

}

else if (window.ActiveXObject) { // IE浏览器

try {

XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");

} catch (e){

try {

XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");

} catch (e) {}

}

2.指定响应处理函数

XMLHttpReq.onreadystatechange=processResponse;

也可以用JavaScript即时定义函数的方式定义响应函数

XMLHttpReq.onreadystatechange=function(){}

3.发出HTTP请求

在指定响应函数之后，就可以向服务器发送请求。

XMLHttpReq.open("GET", url, true);

XMLHttpReq.send(null);

4.处理服务器返回的信息

先检查XMLHttpReq对象的XMLHttpReq值，判断请求目前的状态。当XMLHttpReq

if (XMLHttpReq.readyState == 4) {}
else{"页面还没有返回"}

然后还需要判断HTTP的状态码

if (XMLHttpReq.status == 200) {
}else {

window.alert("您所请求的页面有异常。");

}

有两种处理方式，一种为responseText：即将传回的信息当字符串使用；另一种为responseXML：
即将传回的信息当XML文档使用利用DOM操作XML文档

DOM中的核心概念就是jieidnaai.zDOM分析XML文档时，将组成XML文档的各个部分（元素的，属性，文本，注释，处理指令）映射为一个对象，这个对象叫做节点。在内存中形成一棵文档树。整棵树也是一个节点，树中的每个节点也是一是一棵树（子树）。可以说DOM就是对这颗树的描述。

1.文档节点

文档节点表示文档树的根节点，也是文档中其他所有节点的父节点。文档节点并不是XML文档的根元素（文档元素），因为在XML文档中，处理指令，注释等内容都是出现在根元素之外的，所以根元素时文档节点的子节点。文档节点通过org.w3c.dom.Document接口老表示的

2.元素节点

表示XML文档中的各个元素

3.文本节点

文本节点表示元素内容中的字符数据

4.属性节点

属性节点附属于元素节点，表示XML文档中的属性。

5.NodeList接口

一个有序节点集合的抽象。
NodeList时动态的。电泳任何的删除增加方法都将影响到NodeList对象。

6.NamedNodeMap接口

一个节点的集合，通过该接口可以建立节点名和节点之间的一一映射关系，从而利用节点名就可以直接访问对应的节点。

DOM操作HTML文档：

创建一个表格，单元格元素，向单元格添加文本信息内容，设置单元格对应属性如背景色边框等。

HTML文档中的各个标记，元素被视为各种类型的Node对象，即节点对象，每个对象都有自己的属性和方法

，利用这些方法就可以遍历整个文档树。nodeType表示节点类型。
element            Node.ELEMENT_NODE           元素节点
text               Node.TEXT_NODE              文本节点
document           Node.DOCUMENT_NODE
comment            Node.COMMENT_NODE           注释的文本
documentFragment   Node.DOCUMENT_FRAGMENT_NODE
attr             Node.ATTRIBUTE_NODE        节点属性

在DOM的属性结构中，其根节点是document对象，他的documentElement属性引用表示文档根元素的

element对象（相当于HTML文档的<html>标记）

document的常用方法：

1.createAttribute()   用指定的名字创建新的attr节点，即属性节点
2.createComment()     用指定的名字创建新的comment节点
3.createElement()     用指定的名字创建新的element节点
4.createTextNode()    用指定的名字创建新的textNode节点
5.getElementById()    返回文档中具有指定id属性的element节点
6.getElementByTagName()   返回文档中具有指定标记名的所有element节点

对于element节点，可以通过调用getAttribute() setAttribute() removeAttribute()方法来查询，设置或者删除一个element节点的相关属性

node对象中定义了一系列属性和方法，来遍历整个文档。如parentNode，childNodes[]，firstChild
nextSibling,lastChild,previousSibling还有appendChild(),insertBefore(),removeChild(),replaceChild()等方法

响应的处理：

服务器发回的数据可以是文本串的格式，也可以是XML格式。一般数据量大时或者说复杂时，往往使用XML结构化方式来表示数据。针对返回的格式，提供了两个属性，一个是responseText属性，一个是responseXML。

var res=XMLHttpReq.responseText;
window.alert(res);

var res=XMLHttpReq.responseXML.getElementsByTagName("res").firstChild.data;
window.alert(res);