XMLHttpRequest对象

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对象的支持，如下：

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

   
   
   
   
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事件

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;
}
  
  
  
  

   
   
   
   
1
   
   
   
   
2
   
   
   
   
3
   
   
   
   
4
   
   
   
   
5
  
  
  
  
  
  
  
  

   
   
   
   
  
  
  
  

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