ajax里面的对象,详解AJAX核心中的XMLHttpRequest对象

3330e0dfabc3139781eb908754d554a4.png

XMLHttpRequest 对象是AJAX功能的核心,要开发AJAX程序必须从了解XMLHttpRequest 对象开始。

了解XMLHttpRequest 对象就先从创建XMLHttpRequest 对象开始,在不同的浏览器中创建XMLHttpRequest 对象使用不同的方法:

先看看IE创建XMLHttpRequest 对象的方法(方法1):

var xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");

//使用较新版本的 IE 创建 IE 兼容的对象(Msxml2.XMLHTTP)

var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

//使用较老版本的 IE 创建 IE 兼容的对(Microsoft.XMLHTTP)

而 Mozilla、Opera、Safari 和大部分非IE的浏览器都使用下面这种方法(方法2)创建XMLHttpRequest 对象:

var xmlhttp = new XMLHttpRequest();

实际上Internet Explorer 使用了一个名为 XMLHttp 的对象,而不是 XMLHttpRequest 对象,而 Mozilla、Opera、Safari 和 大部分非 Microsoft 浏览器都使用的是后者(下文统称 XMLHttpRequest 对象)。IE7开始也开始使用XMLHttpRequest 对象了。

在创建 XMLHttpRequest 对象的时候如果不同的浏览器使用了不正确的方法浏览器都将会报错,并且无法使用该对象。所以我们需要一种可以兼容不同浏览器的创建XMLHttpRequest 对象的方法:

创建兼容多浏览器的 XMLHttpRequest 对象方法

var xmlhttp = false; //创建一个新变量 request 并赋值 false。使用 false 作为判断条件,它表示还没有创建 XMLHttpRequest 对象。 function CreateXMLHttp(){try{xmlhttp = new XMLHttpRequest(); //尝试创建 XMLHttpRequest 对象,除 IE 外的浏览器都支持这个方法。}catch (e){try{xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); //使用较新版本的 IE 创建 IE 兼容的对象(Msxml2.XMLHTTP)}catch (e){try{xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //使用较老版本的 IE 创建 IE 兼容的对象(Microsoft.XMLHTTP)。}catch (failed){xmlhttp = false; //如果失败则保证 request 的值仍然为 false。}}}return xmlhttp;}判断是否创建成功就很简单了

if (!xmlhttp){//创建XMLHttpRequest 对象失败!}else{//创建成功!}

创建好了XMLHttpRequest 对象我们再来看看这个对象的方法、属性以及最重要的onreadystatechange事件句柄吧。

方法:

open() 说明:初始化 HTTP 请求参数,例如 URL 和 HTTP 方法,但是并不发送请求。

abort() 说明:取消当前响应,关闭连接并且结束任何未决的网络活动。

getAllResponseHeaders() 说明:把 HTTP 响应头部作为未解析的字符串返回。

getResponseHeader() 说明:返回指定的 HTTP 响应头部的值。

send() 说明:发送 HTTP 请求,使用传递给 open() 方法的参数,以及传递给该方法的可选请求体。

setRequestHeader() 说明:向一个打开但未发送的请求设置或添加一个 HTTP 请求。

属性:

readyState 说明:HTTP 请求的状态。

responseText 说明:目前为止为服务器接收到的响应体(不包括头部),或者如果还没有接收到数据的话,就是空字符串。

responseXML 说明:对请求的响应,解析为 XML 并作为 Document 对象返回。

status 说明:由服务器返回的 HTTP 状态代码。

statusText 说明:这个属性用名称而不是数字指定了请求的 HTTP 的状态代码。

onreadystatechange 是每次 readyState 属性改变的时候调用的事件句柄函数。

下面从发送请求并处理请求结果的过程来理解一下XMLHttpRequest 对象吧。

发送请求之前自然就是生成一个XMLHttpRequest 对象,代码上面有了就不多写了。

生成一个XMLHttpRequest 对象

var xmlhttp = CreateXMLHttp();

创建好XMLHttpRequest 对象了,那我们要送请求到哪个网站呢,就选择博客园首页的RSS吧。那怎么设置我要请求的网站地址呢,使用open()方法。

open(method, url, async, username, password)

该方法有5个参数,具体什么意思可以看这里:http://www.w3school.com.cn/xmldom/dom_http.asp

我们用的就是这个了。

xmlHttp.open("get","http://www.cnblogs.com",true);

get参数表示用get方法,第二个自然就是目标地址,博客园首页,第三个就是表示是否异步了,我们当然使用true了。

2829f2ca24f0d0090cbba57f30759f23.png

详解AJAX核心中的XMLHttpRequest对象.doc

下载Word文档到电脑,方便收藏和打印[全文共1794字]

编辑推荐:

8b95f2eb3d3f7ce4dc3bf1178c74941e.png

8b95f2eb3d3f7ce4dc3bf1178c74941e.png

8b95f2eb3d3f7ce4dc3bf1178c74941e.png

8b95f2eb3d3f7ce4dc3bf1178c74941e.png

8b95f2eb3d3f7ce4dc3bf1178c74941e.png

下载Word文档

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值