AJAX异步通信技术学习笔记

AJAX是一中运用JavaScript和可扩展编辑语言（XML），在网络浏览器和服务器之间传送或接收数据的技术。
   AJAX的工作原理相当与在用户和服务器之间加了一个中间层，使用户请求与服务器响应异步化。这样还可以把以前的一些服务器负担的工作转交给客户端，利用客户端闲置的处理能力来处理，减轻服务器和宽带的负担。
   AJAX是WEB2.0的核心之一．AJAX技术运用与浏览器中，使向服务器索取网页的部分信息成为可能．

   XMLHttpRequest对象

   XMLHttpRequest提供客户端同HTTP服务器异步通信的协议．通过这个协议，AJAX可以使页面象桌面程序一样同服务器端进行数据层面的交换，而不必每次都刷新页面，也不用每次都将数据处理的工作都交给服务器来做，这样既减轻了服务器负担又加快了响应速度，缩短了用户等待的时间．

   XMLHttpRequest对象的方法：
       Abort()                         停止当前请求
       getAllResponseHeaders()         返回HTTP请求的所有响应头部的键/值字符串
       getResponseHeader("header")     返回指定头部属性的字符串值
       Open("method", "url")        建立对服务器的调用。Method参数可以是GET  POST  PUT, url参数可以是相对URL或绝对对 URL
Send(content)      向服务器发送请求
setRequestHeader("header","value")  为指定头部属性设置指定值

XMLHttpRequest对象的属性：
Onreadystatechange 状态改变的时间触发器，通常绑定一个JavaScript 函数，每当状态发生改变时，就调用该函数
readyState 请求的状态，有5个可取值：
0 = 未初始化
1 = 读取中
2 = 已读取
3 = 交互中
4 = 完成
responseText 从服务器返回的文本形式的响应内容
responseXML 从服务器返回的兼容DOM的XML文档对象
Status 从服务器返回的状态码，例如404="文件找不到"
200 = "成功"
statusText 从服务器返回的状态文本信息，例如OK或Not Found(未找到)

<script language = "javascript">
    //定义一个将指向XMLHttpRequest对象的变量
    var xmlHttp;
    //定义一个函数用于创建XMLHttpRequest对象
    function createXMLHttpRequest(){
        if(window.ActiveXObject){
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        else if(window.XMLHttpRequest){
            xmlHttp = new XMLHttpRequest();
        }
    }
    //定义一个函数用于启动与服务器的异步同信
    function begin(){
        createXMLHttpRequest();     //调用createXMLHttpRequest函数
        xmlHttp.onreadystatechange = processor;       //将事件触发器绑定到 processor上
        xmlHttp.open("GET", "test.xml");        //使用GET方法建立对服务器资 源test.xml的一个异步调用
        xmlHttp.send(null);            //向服务器发送请求
    }
    //定义一个状态处理函数用于处理状态触发器的状态改变
    function processor(){
        //如果处理请求完成
        if(xmlHttp.readyState == 4){
            //如果服务器返回状态为成功
            if(xmlHttp.status = 200){
                //将从服务器返回的内容报告给用户
                alert("从服务器返回的内容为：" + xmlHttp.responseText);
            }
        }
    }
   
</script>

DOM是面向HTML和XML文档的一组API，它为文档提供了结构化的表示，并定义了如何通过脚本（JavaScript）来访问文档结构。如果没有DOM，JavaScript根本就不存在Web页面和构成页面元素的概念。文档中的每个元素都是DOM的一部分，可通过JavaScript来访问这些元素的属性和方法，实现动态编辑页面的功能。
这里所说的DOM是符合W3C标准的文档对象模型，它以树型结构表示HTML和XML文档，并定义可操作这个树及其节点的一系列方法和属性。在网络浏览器端，通过JavaScript利用DOM提供的API来操作HTML和XML文档。

1.操作HTML文档
HTML文档各个节点在DOM中被视为个种类型的Node对象.而且每个 Node对象都有自己的属性和方法,通常利用这些属性和方法来遍历或动态编辑整个树。

操作HTML文档的常用DOM方法：
getElementById(isIDValue) 返回文档中具有指定id属性的元素
getElementByTabName(isTagName) 返回当前元素中有指定标记名的子元素 的数组
appendChild(childNode) 在当前节点的childNodes[]组中增加一个 节点childNode
cloneNode(false | true) false表示仅复制当前节点；true表示复制 当前节点以及它的所有子孙节点
hasChildNodes() 判断当前节点是否拥有子节点，有则返回 true
insertBefore(newNode,targetNode) 将节点newNode作为当前元素的子节点 插到targetNode元素前面
removeChild(childNode) 从文档树中删除子节点childNode
resplaceChild(newNode,oldNode) 将节点oldNode替换为节点newNode
getAttribute(sAttrName) 返回指定属性的字符串值
setAttribute(sAttriName, vAttrValue) 把指定的属性设置为镇定的字符串值，如 果该属性不存在则添加一个新属性
removeAttribute(sAttrName) 从元素中删除属性sAttrName

操作HTML文档的常用DOM属性：
Attributes 如果该节点是一个Element,则以NamedNodeMap 形式返回该元素的属性
childNodes 以Node[]的形式存放当前节点的子节点，如果没 有子节点，则返回空数组
firstChild 以Node的形式返回当前节点的第一个子节点，如 果没有子节点，则为null
lastChild 以Node的形式返回当前节点的最后一个节点，如 果没有子节点，则为null
nextSibling 以Node的形式返回当前节点的兄弟下一个节点， 如果没有这样的节点，则返回null
nodeName 节点的名字，Element节点则代表Element的标记 名称
nodeType 代表节点的类型
parentNode 以Node的形式返回当前节点的父亲节点，如果没 有父亲节点，则为null
previoiusSibling 以Node的形式返回紧挨当前节点，位于它之前的 兄弟节点。如果没有这样的节点，则返回null
操作XML文档
在数据的表示和交换方面XML文档更具优势，针对XML的访问和操作，DOM也用样提供了一系列的API。利用这些API，可方便地从XML文档中读取数据信息，动态创建展示这些数据信息的HTML页面。
操作XML文档，通常遵循以下4个步骤：
载入整个XML文档
从XML文档中提取数据信息
对提取的信息进行加工处理
创建包含处理结果的HTML页面展示给用户

遍历XML文档的常用DOM方法:
getElementById(sIDValue) 返回文档中具体指定id属性的元素
getElementByTabName(sTagName) 返回当前元素中有指定标记名的子元素的数 组
hasChildNodes() 判断当前节点是否拥有子节点,有则返回true getAttribute(sAttrName) 返回指定属性的字符串值

操作XML文档的常用DOM属性:
childNodes 以Node[]的形式存放当前节点的子节点,如果没有子节点,则 返回空数组
firstChild 以Node的形式返回当前节点的第一个子节点,如果没有子 节点,则为null
lastChild 以Node的形式返回当前节点的最后一个子节点,如果没有 这样的节点,则返回null
nextSibling 以Node的形式返回当前节点的兄弟下一个节点， 如果没有这样的节点，则返回null
nodeName 节点的名字，Element节点则代表Element的标记 名称
nodeType 代表节点的类型
parentNode 以Node的形式返回当前节点的父亲节点，如果没 有父亲节点，则为null
previoiusSibling 以Node的形式返回紧挨当前节点，位于它之前的 兄弟节点。如果没有这样的节点，则返回null