XMLHttpRequest对象

来源:互联网 发布:印刷厂淘宝简介 编辑:程序博客网 时间:2024/05/08 02:14

Ajax技术的核心是XMLHttpRequest对象,简称XHR。
XMLHttpRequest 对象
所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
XMLHttpRequest对象
IE5是第一款引入XHR对象的浏览器,在IE5中,XHR对象是通过MSXML库中的一个ActiveX对象实现的。因此在IE中可能遇到三种不同版本的XHR对象,即MSXML2.XMLHttp、MSXML2.XMLHttp3.0、MSXML2.XMLHttp6.0。

function creatXHR() {    if(typeof arguments.callee.activeXString != 'string'){        var versions = ['MSXML2.XMLHttp.6.0','MSXML2.XMLHttp3.0','MSXML2.XMLHttp'];        for(var i=0; i < versions.length; i++){            try{                new ActiveXObject(versions[i]);                arguments.callee.activeXString = versions[i];                break;            }catch (ex){                console.log(ex);            }        }    }}

尽可能根据IE中可用的MSXML库的情况使用最新版本的XHR对象。
IE7+、Firefox、Opera、Chrome和Safari都支持原生的XHR对象,创建XHR对象的方式如下:

var xhr = new XMLHttpRequest();

如果不考虑IE低版本的话,这样创建即可,如果想要兼容IE早期版本,那么可以在createXHR函数中加入对原生XHR对象的支持,如下:

function creatXHR() {    if(typeof XMLHttpRequest != 'undefined'){        return new XMLHttpRequest();    }else if(typeof ActiveXObject != 'undefined'){        if(typeof arguments.callee.activeXString != 'string') {            var versions = ['MSXML2.XMLHttp.6.0', 'MSXML2.XMLHttp3.0', 'MSXML2.XMLHttp'];            for (var i = 0; i < versions.length; i++) {                try {                    new ActiveXObject(versions[i]);                    arguments.callee.activeXString = versions[i];                    break;                } catch (ex) {                    console.log(ex);                }            }        }        return new ActiveXObject(arguments.callee.activeXString);    }else{        throw new Error('No XHR Object available');    }}

XHR的用法
使用XHR对象,要调用的第一个方法是open();open()接受3个参数,(1)要发送的请求类型(get、post等);(2)请求的URL;(3)表示是否异步发送请求的布尔值(true表示异步,false表示同步)。

var xhr = creatXHR();xhr.open('get', 'data.php', false);

请求的URL可以是相对路径,也可以是绝对路径。调用open()方法并不会真正发送请求,而是启动一个请求以备发送。
要发送请求,需要调用send()方法。send()接收一个参数,即作为主体发送的数据。如果不需要通过请求主体发送数据,则必须传入null。

var xhr = creatXHR();xhr.open('get', 'data.php', false);xhr.send(null);

接受到服务器的响应后,响应的数据会自动填充XHR对象的属性:
responseText:作为响应主体被返回的文本
responseXML:如果响应的内容类型是”text/xml”或者”application/xml”,这个属性中保存着响应数据的XML DOM文档
status:响应的HTTP状态
**statusText:**HTTP状态的说明
在接收到响应之后,第一步是检查status属性,以确定响应成功返回,一般将HTTP状态代码200作为成功的标致,此时,responseText属性的内容已经就绪。状态代码304表示请求的资源没有被改变,可以直接使用浏览器的缓存。

var xhr = creatXHR();xhr.open('get', 'data.php', false);xhr.send(null);if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){//success}else{//failed}

发送同步请求时,这样处理是没有问题的,但是如果是异步请求,我们就需要去检测XHR对象的readyState属性,该属性表示请求/响应过程的当前活动阶段。
0:未初始化,尚未调用open()方法
1:启动,已经调用open()方法,但是尚未调用send()方法
2:发送,已经调用send()方法,但尚未接收到响应
3:接收,已经接收到部分响应数据
4:完成,已经接收到全部响应数据,而且可以在客户端使用了。
只有readyState属性的值从一个值变为另一个值,就会触发一次readystatechange事件

var xhr = creatXHR();xhr.onreadystatechange = function () {    if(xhr.readyState == 4){        if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){            //deal with xhr.responseText        }else{            console.log("failed");        }    }};

HTTP头部信息
每个HTTP请求和响应都会带有相应的头部信息,默认情况下,在发送XHR请求的同时,还会发送下列头部信息。
Accept:浏览器能够处理的内容类型。
Accept-Charset:浏览器能够显示的字符集。
Accept-Encoding:浏览器能够处理的压缩编码。
Accept-Language:浏览器当前设置的语言。
Connection:浏览器与服务器之间连接的类型。
Cookie:当前页面设置的任何Cookie。
Host:发出请求的页面所在的域。
Referer:发出请求的页面的URL。
User-Agent:浏览器的用户代理字符串。
XHR对象提高了操作这两种头部(请求头部和响应头部)信息的方法:
setRequestHeader()设置自定义的请求头部信息。接受两个参数:(1)头部字段的名称;(2)头部字段的值。
getResponseHeader()传入头部字段名称,获取响应的响应头部信息。
getAllResponseHeaders()取得一个包含所有头部信息的长字符串。

GET请求
get请求,可以将查询字符串参数追加到URL末尾,以便将信息发送给服务器。对XHR而言,传入open()的URL末尾的查询字符串必须经过正确的编码才行。查询字符串的每个参数的名称和值都必须使用encodeURIComponent()进行编码,然后才能放到URL的末尾。

function addURIParam(url, name, value) {    url += (url.indexOf('?') == -1) ? '?' : '&';    url += encodeURIComponent(name) + '=' + encodeURIComponent(value);    return url;}

addURIParam用于向URL的末尾添加查询字符串参数。
POST请求
post请求通常用于向服务器发送应该被保存的数据,POST请求应该把数据作为请求的主体提交。在open()方法的第一个参数位置传入”post”,在send中传入数据。
默认情况下,服务器对POST请求和提交web表单的请求不会一视同仁,不过我们可以使用XHR模仿表单提交。首先将Content-Type头部信息设置为application/x-www-form-urlencoded.其次是以适当的格式创建一个字符串。

0 0
原创粉丝点击