浅谈使用XMLHttpRequest与DOM对象_Xml教程
教程Tag:暂无Tag,欢迎添加,赚取U币!
推荐:如何了解认识XMLXML被设计用来描述数据,其焦点是数据的内容。 HTML被设计用来显示数据,其焦点是数据的外观。 应该掌握的基础知识: 在您继续学习之前,需要对以下知识有基本的了解: HTML / XHTML JavaScript or VBScript 什么是XML? XML指 可扩展标记语言 (EXtensible M
XMLHttpRequest对象在使用XMLHttpRequest对象发送请求和处理响应之前,必须先用JavaScript创建一个XMLHttpRequest对象。由于XMLHttpRequest不是一个W3C标准,所以可以采用多种方法使用JavaScript来创建XMLHttpRequest的实例。IE把XMLHttpRequest实现一个ActiveX对象,其他浏览器(如Firefox、Safari和Opera)把他实现为一个本地JavaScript对象。由于存在这些差别,JavaScript代码中必须包含有关的逻辑,从而使用ActiveX技术或者使用本地JavaScript对象技术来创建XMLHttpRequest的一个事例。
如果浏览器支持ActiveX对象,就可以使用ActiveX来创建XMLHttpRequest对象。否则,就要使用本地JavaScript对象技术来创建。代码清单2-1展示了编写跨浏览器的JavaScript代码来创建XMLHttpRequest对象实例。
代码清单2-1 创建XMLHttpRequest对象的一个实例
var xmlHttp;
function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}else if (window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
}
function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}else if (window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
}
可以看到,创建XMLHttpRequest对象相当容易。首先,要创建一个全局作用域变量xmlHttp来保存这个对象的引用。createXMLHttpRequest方法完成创建XMLHttpRequest实例的具体工作。这个方法只有简单的分支逻辑(选择逻辑)来确定如果创建对象。对window.ActiveXObject的调用会返回一个对象,也可能返回null,if语句会把调用返回的结果看作是true或false(如果返回对象则为true,返回null则为false),以此指示浏览器是否支持ActiveX控件,相应地得知浏览器是不是IE。如果确定是,则通过实例化ActiveXObject的一个新实例来创建XMLHttpRequest对象,并传入一个串指示要创建何种类型的ActiveX对象。在这个例子中,为构造函数提供的字符串是Microsoft.XMLHTTP,这说明我们想创建XMLHttpRequest的一个实例。
如果window.ActiveXObject调用失败(返回null),JavaScript就会转到else语句分支,确定浏览器是否把XMLHttpRequest实现为一个本地JavaScript对象。如果存在window.XMLHttpRequest,就会创建XMLHttpRequest的一个实例。
XMLHttpRequest对象的属性:
onreadystatechange 状态改变的事件触发器
readyState 对象状态(integer): 0 = 未初始化 1 = 读取中 2 = 已读取 3 = 交互中 4 = 完成
responseText 服务器进程返回数据的文本版本
responseXML 服务器进程返回数据的兼容DOM的XML文档对象
status 服务器返回的状态码, 如:404 = "文件未找到" 、200 ="成功"
statusText 服务器返回的状态文本信息
readyState 对象状态(integer): 0 = 未初始化 1 = 读取中 2 = 已读取 3 = 交互中 4 = 完成
responseText 服务器进程返回数据的文本版本
responseXML 服务器进程返回数据的兼容DOM的XML文档对象
status 服务器返回的状态码, 如:404 = "文件未找到" 、200 ="成功"
statusText 服务器返回的状态文本信息
XMLHttpRequest对象的方法:
abort() 停止当前请求
getAllResponseHeaders() 作为字符串返回完整的headers
getResponseHeader("headerLabel") 作为字符串返回单个的header标签
open("method","URL"[,asyncFlag[,"userName"[, "password"]]]) 设置未决的请求的目标 URL,方法,和其他参数
send(content) 发送请求
setRequestHeader("label", "value") 设置header并和请求一起发送
getAllResponseHeaders() 作为字符串返回完整的headers
getResponseHeader("headerLabel") 作为字符串返回单个的header标签
open("method","URL"[,asyncFlag[,"userName"[, "password"]]]) 设置未决的请求的目标 URL,方法,和其他参数
send(content) 发送请求
setRequestHeader("label", "value") 设置header并和请求一起发送
方法的详细说明:
void open(string method,string url,boolean asynch,string username,string password):
这个方法会建立对服务器的调用。这是初始化一个请求的纯脚本方法,它有两个必要参数,还有3个可选参数。要提供调用的特定方法(GET、POST 或 PUT),还要提供所调用资源的URL。另外还可以传递一个Boolean值,指示这个调用是异步的还是同步的。默认值为true,表示请求本质上是异步的。如果这个参数为false,处理就会等待,直到从服务器返回响应为止。由于异步调用是使用Ajax的主要优势之一,所以倘若这个参数设置为false,从某种程度上XMLHttpRequest对象的初衷不太相符。不过,前面已经说过,在某些情况下这个参数设置为false也是有用的,比如在持久存储页面之前可以先验证用户的输入。最后两个参数不说自明,允许你指定一个特定的用户名和密码。
void send(content):
这个方法具体向服务器发出请求。如果请求声明为异步的,这个方法就会立即返回,否则它会等待直到接收到响应为止。可选参数可以是DOM对象的实例、输入流、或者串。传入这个方法的内容会作为请求体的一部分发送。
void serRequestHeader(string header,string value):
这个方法为HTTP请求中一个指定的首部设置值。他有两个参数,第一个串表示要设置的首部,第二个串表示要在首部中放置的值。需要说明,这个方法的内容会作为请求体的一部分发送。
void abort():
顾名思义,这个方法就是要停止请求。
string getAllResponseHeaders():
这个方法的核心功能对Web应用开发人员应该很熟悉了,它返回一个串,其中包含HTTP请求的所有响应首部,首部包括ContentLength、Date和URI。
string getResponseHeader(string header):
这个方法与getAllResponseHeaders()是对应的,不过它有一个参数表示你希望得到的指定首部值,并且把这个值作为串返回。
DOM对象
文档对象模型是与平台和语言无关的接口,允许程序和脚本动态地访问和更新文档的内容,结构和样式。文档可以进一步处理,处理的结果可以放回到所提供的页面中。如果服务端返回的是XML,使用responseXML即可直接创建DOM来操作这个文件。
childNodes 返回当前元素所有子元素集合
firstChil 返回当前元素的第一个子元素
lastChild 返回当前元素的最后一个子元素
nextSibling 返回紧跟在当前元素后面的元素(平级)
previousSibling 返回紧跟在当前元素之前的元素(平级)
nodeValue 指定表示元素值的读/写属性
parentNode 返回元素的父节点
firstChil 返回当前元素的第一个子元素
lastChild 返回当前元素的最后一个子元素
nextSibling 返回紧跟在当前元素后面的元素(平级)
previousSibling 返回紧跟在当前元素之前的元素(平级)
nodeValue 指定表示元素值的读/写属性
parentNode 返回元素的父节点
DOM对象的方法:
getElementById(id) (document) 获取有指定唯一ID属性值文档中的元素
getElementsByTagName(name) 返回当前元素中有指定标记名的子元素的集合
hasChildNodes() 返回一个布尔值,指示元素是否有子元素
getAttribute(name) 返回元素的属性值,属性由name指定
getElementsByTagName(name) 返回当前元素中有指定标记名的子元素的集合
hasChildNodes() 返回一个布尔值,指示元素是否有子元素
getAttribute(name) 返回元素的属性值,属性由name指定
动态创建内容所用的W3C DOM属性和方法
document.createElement(tagName) 文档对象上的createElement方法可以创建由tagName指定的元素。如果以串div作为方法参数,就会生成一个div元素
document.createTextNode(text) 文档对象的createTextNode方法会创建一个包含静态文本的节点
element.appendChild(childNode) appendChild方法将指定的节点childNode增加到当前元素的子节点列表
element.getAttribut(name)
element.setAttribut(name, value)获取和设置元素中name属性的值
element.insertBefore(newNode, targetNode) 这个方法将节点newNode作为当前元素的子节点插到targetNode元素前面
element.removeAttribute(name) 这个方法从元素中删除属性name
element.removeChild(childNode) 从元素中删除子元素childNode
element.replaceChild(newNode,oldNode) 将节点oldNode替换为节点newNode
element.hasChildnodes() 返回一个布尔值,指示元素是否有子元素
document.createTextNode(text) 文档对象的createTextNode方法会创建一个包含静态文本的节点
element.appendChild(childNode) appendChild方法将指定的节点childNode增加到当前元素的子节点列表
element.getAttribut(name)
element.setAttribut(name, value)获取和设置元素中name属性的值
element.insertBefore(newNode, targetNode) 这个方法将节点newNode作为当前元素的子节点插到targetNode元素前面
element.removeAttribute(name) 这个方法从元素中删除属性name
element.removeChild(childNode) 从元素中删除子元素childNode
element.replaceChild(newNode,oldNode) 将节点oldNode替换为节点newNode
element.hasChildnodes() 返回一个布尔值,指示元素是否有子元素
分享:解析XML是如何被利用的?理解这一点很重要,即XML是被设计为存储、传输以及交换数据的。XML不是被设计为用来显示数据的。 XML可以将HTML与数据分离 通过使用XML,您的数据可存储于HTML之外。 当我们使用HTML来显示数据时,数据存储于HTML中。通过使用XML,数据可以被存储在单独的XML
相关Xml教程:
- 相关链接:
- 教程说明:
Xml教程-浅谈使用XMLHttpRequest与DOM对象。