XMLHttpRequest对象

最新推荐文章于 2019-08-14 17:30:21 发布

CareChere

最新推荐文章于 2019-08-14 17:30:21 发布

阅读量470

点赞数

分类专栏： Ajax

Ajax 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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();
 
 1

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

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

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

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

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

接受到服务器的响应后，响应的数据会自动填充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
}
 
 1
2
3
4
5
6
7
8

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

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;
}
 
 1
2
3
4
5

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