DOM和AJAX学习

来源：互联网发布：淘宝卖家骗好评投诉编辑：程序博客网时间：2024/06/06 02:20

http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro4/

http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro3/

http://blog.csdn.net/laner0515/article/details/7784075

http://www.w3.org/DOM/

http://www.w3.org/TR/shadow-dom/

整理如下

AJAX关键：

JS负责连接页面DOM树的各个对象和HTTP通信，但未具备向服务器发送请求的能力，使用window.open()方法重新打开一个页面，向服务器提交同步请求

还是在JS里调用XMLHttpRequest对象发送异步请求

XMLHttpRequest提供了一系列的属性和方法，来向服务器发送异步的http请求；在服务器处理用户请求的过程中，XMLHttpRequest通过属性的状态值来实时反映http请求所处的状态，并根据这些状态指示Javascript做相应的处理；当服务器顺利完成响应用户行为的动作、并将响应数据返回时，XMLHttpRequest提供的response系列方法，可以将这些响应数据以文本、XML Document对象、Ado Stream对象或者unsigned byte数组的方式组装起来，提供给Javascript处理。

XMLHttpRequest的五步使用法：

1、建立XMLHttpRequest对象

2、注册回调函数

3、使用open方法社会自和服务器端交互的基本信息

4、设置发送的数据，开始和服务器端交互

5、在回调函数中判断交互是否结束，响应是否正确，并根据需要过去服务器端返回的数据，更新页面内容

DOM

在DOM树种文档内容对应了很多不同类型的节点，他们都是一个NODE对象。

NODE对象有一个nodeType的属性可用于判断节点类型

接口

nodeType常量（IE不支持）

nodeType值

备注

Element

Node.ELEMENT_NODE

元素节点（标签<body><input><div>）

Atrr

Node.ATTRIBUTE_NODE

属性节点（属性<input>中定义的value属性）

Text

Node.TEXT_NODE

文本节点（文本HTML文档中定义<div>abcdef</div>其中的“abcdef”）

Comment

Node.COMMENT_NODE

注释节点（注释<!—Comment Message-->）

Document

Node.DOCUMENT_NODE

文本根节点（一个特殊的对象document）

根节点的属性和方法：

属性

描述

documentElement

表示文档的根元素节点

在HTML文档中，它表示<html>这个标签代表的元素节点

方法

描述

getElementById()

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

方法参数为节点的id的属性值

getElementByTagName（）

以数组方式返回文档中具有制定标签的Element节点，其书序为在文档中出现的顺序

标签名指的是像body，table这样的HTML标签

方法参数为标签名称。

createElement()

用指定的标记名创建新的Element节点对象

方法参数为节点标签的名字

createTextNode()

用指定的文本创建新的文本节点对象

方法参数为文本信息

createAttibute()

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

方法参数为属性的名字

createComment()

用指定的字符串创建新的Comment节点对象

方法参数为注释信息

AJAX,DOM 和javascript的关系

DOM能够为javascript引擎公开网页。通过DOM，可以采用编程的方式操作文档的结构。Web页面的DOM表示是一个树状结构，由元素或点组成。节点可以包含很多子节点。javascript通过全局变量document公开当前Web叶梦得根节点，这个变量是所有DOM操作的起点。DOM使用容器的属性来做索引，而不是使用数字做索引。DOM中元素的关系可以看作是HTML清单的镜像。这种关系可以是双向的，修改DOM将改变HTML标记，随之会反映在页面的现实上。

用一个简单一点的关系表示就是：

DOM--数据--》Jquery--利用--》Ajax--请求--》后台
后台--回应Ajax请求--》Jquery--操作dom变现请求--》dom

0 0