打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
AJAX异步通信技术学习笔记
userphoto

2011.05.18

关注
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
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
AJAX原理
Start AJAX
把应用程序从 Internet Explorer 迁移到 Mozilla
掌握 ajax,第 1 部分: ajax 简介
Ajax
Ajax 简介+实例 - namelysweet的博客 - 和讯博客
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服