DOM及AJAX基本概念

 

DOM(document object model)

节点：整个文档就是一个文档节点，而每一个HTML标签就是一个元素节点，标签中的文字则是文本节点，标签的属性是属性节点，一切都是节点；

DOM属性：

nodeName：一个字符串，其内容是给定节点的名字。

var name=node.nodeName;

如果节点是元素节点，nodeName返回这个元素的名称；

如果是属性节点，nodeName返回这个属性的名称；

如果是文本节点，nodeName返回一个内容为#text的字符串；

注：nodeName是一个只读属性；

nodeType：返回一个整数，这个数值代表着给定节点的类型；

nodeType：属性返回的属性值对应着12种节点类型，常用的有3种：

1、  Node.ELEMENT_NODE------1à元素节点

2、  Node.ATTRIBUTE_NODE----2à属性节点

3、  Node.TEXT_NODE-------------3à文本节点

nodeValue:返回给定节点的当前值（字符串）

1、  如果给定节点是一个属性节点，返回值是这个属性的值

2、  如果给定的值是一个文本节点，返回值是这个文本节点的内容

3、  如果给定节点是一个元素节点，返回值是null；

nodeValue是一个读/写属性，但不能对元素节点的nodeValue属性设置值，但可以为文本节点的nodeValue属性设置一个值。

       var li=document.getElementById(“li”);

       li.firstChild.nodeValue=”国庆60年”;

替换节点：

replaceChild( ):把一个给定父元素里的一个子节点替换为另外一个子节点；

var reference=element.replaceChild(newChild,oldChild);返回值是一个指向已被替换的那个子节点的引用指针；

如果被插入的子节点还有子节点，则那些子节点也被插入到目标节点中；

appendChild（）、insertBefore（newTarget,oldTareget）；

1、  document.createElement( “li”);

2、  setAttribute(“ ”,” ”);

3、  document.createTextNode(“ ”);

4、  appendChild( );

删除节点：removeChild（）；

注:在逻辑运算中，0、“”、false、null、undefined、NaN均表示false

       Null：对象不存在；

       Undefined：声明的变量没有初始化，或者对象属性、方法不存在；

AJAX：

同步交互和异步交互：

普通B/S模式（同步）、AJAX技术（异步）

1、  同步：提交请求à等待服务器处理à处理完毕返回（这个期间客户端浏览器不能干任何事）

2、  异步：请求通过事件触发à服务器处理（这时浏览器可以做其他事情）à处理完毕

同步是指：发送方发出数据后，等待接收方发出响应以后才发下一个数据包的通讯方式；

异步是指：发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯方式；

AJAX（ Asynchronous JavaScript and XML）:允许浏览器与服务器通信而无需刷新当前页面的技术；

AJAX的工作原理：AJAX采用异步交互过程，AJAX在用户与服务器之间引入一个中间媒介，从而消除了网络交互过程中的处理----等待----处理-----等待缺点；

用户的浏览器在执行任务时即装载了AJAX引擎，AJAX引擎用JavaScript编写，通常藏在一个隐藏的框架中，他负责编译用户界面与服务器之间的交互；

AJAX建立和服务器的链接，接收服务器的请求，处理服务器返回的数据：

1、  创建XMLHttpRequest对象

2、  打开和服务器的连接（open（method，url，asynch））à请求方式、请求路径、是否异步

3、  发送数据（send（））à若get，传null

4、  接收服务端的响应

服务器端的数据必须以浏览器能够理解的格式来发送：XML、JSON、HTML

JSON规则：

1、  映射用冒号（“：”）表示，名称：值

2、  并列的数据之间用逗号（“，”）分隔；名称1：值1，名称2：值2

3、  映射的集合（对象）用大括号（“{ }”）表示；{名称1：值1，名称2：值2}

4、  并列数据的集合（数组）用方括号（“[ ]”）表示

[

        {名称1：值1，名称2：值2}

        {名称1：值1，名称2：值2}

]

5、  元素值可具有的类型：string、number、object、array、true、false、null;