Ajax机制与DOM初步介绍

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文档的标记）

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);