返回首页
当前位置: 主页 > 编程语言 > XML教程 >

XHR—XMLHttpRequest对象 使用教程

时间:2016-05-19 12:14来源:电脑教程学习网 www.etwiki.cn 编辑:admin

创建XMLHttpRequest对象

与之前众多DOM操作一样,创建XHR对象也具有兼容性问题:IE6及之前的版本使用ActiveXObject,IE7之后及其它浏览器使用XMLHttpRequest

不但IE6及其之前的版本将XHR作为一个ActiveXObject运行,而且还存在众多版本:一开始是Microsoft.XMLHTTP 之后变成Msxml2.XMLHTTP及更新版的Msxml3.XMLHTTP

 function XHR() {
var xhr;
try {xhr = new XMLHttpRequest();}
catch(e) {
var IEXHRVers =["Msxml3.XMLHTTP","Msxml2.XMLHTTP","Microsoft.XMLHTTP"];
for (var i=0,len=IEXHRVers.length;i< len;i++) {
try {xhr = new ActiveXObject(IEXHRVers[i]);}
catch(e) {continue;}
}
}
return xhr;
}

使用XHR

 var xhr = XHR();
//open方法 创建一个新的http请求,并指定此请求的方法、URL以及验证信息(用户名/密码)
xhr.open("get","test.txt",true);

</pre>
/*第一个参数是请求方式,一般用get与post方法,与form标签的method类似
第二个参数是请求的URL
第三个参数是请求是同步进行还是异步进行,true表示异步
调用了open方法仅仅是传递了参数而已*/
<pre>
xhr.send(null);//调用了send方法后才会发出请求

</pre>
//并且get方式发送请求时send参数是null

在服务器环境中执行上面的脚本,并且给一个php或asp脚本发送请求,会发现服务器端脚本其实会被执行

//PHP脚本
$fp =fopen("a.txt","wb");
fwrite($fp,"PHP文件在后台执行了");
fclose($fp);
echo "返回内容!";

上面PHP脚本的返回内容不会直接在页面上显示出来,必需要用JS通过XHR对象接收

var xhr = XHR();
xhr.open("get","test.php",true);
xhr.onreadystatechange = callback;//在readystatechange事件上绑定一个函数
//当接收到数据时,会调用readystatechange事件上的事件处理函数
xhr.send(null);
functon callback() {
//在这里面没有使用this.readyState这是因为IE下面ActiveXObject的特殊性
if (xhr.readyState == 4) {//readyState表示文档加载进度,4表示完毕
alert(xhr.reponseText);//responseText属性用来取得返回的文本
}
}

XHR对象参考
readyState属性 返回当前请求的状态

0 (未初始化) 对象已建立,但是尚未初始化(尚未调用open方法)
1 (初始化) 对象已建立,尚未调用send方法
2 (发送数据) send方法已调用,但是当前的状态及http头未知
3 (数据传送中) 已接收部分数据,因为响应及http头不全,这时通过responseBody和responseText获取部分数据会出现错误
4 (完成) 数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据

var xhr =XHR();
alert(xhr.readyState);//0
xhr.open("get","test.htm",true);
alert(xhr.readyState);//1
xhr.send(null);
alert(xhr.readyState);//IE下会是4,而FF下会是2
//可以通过readystatechange事件监听
xhr = XHR();
xhr.onreadystatechange = function () {
alert(xhr.readyState);//FF下会依次是1,2,3,4但最后还会再来个1
//IE下则是1,1,3,4
};
xhr.open("get","test.txt",true);
xhr.send(null);

从上面可以看到,对于readyState这个属性,各个浏览器看法也不一样,但其实我们只需要知道当状态为4的时候可以获取response就行了!
status 返回当前请求的http状态码

status属性返回当前请求的http状态码,此属性仅当数据发送并接收完毕后才可获取。完整的HTTP状态码如下:

事实上,我们只需要知道状态为200的时候(OK)才读取response就行了!

------分隔线----------------------------
标签(Tag):xml
------分隔线----------------------------
推荐内容
猜你感兴趣