【XHR】XMLHttpRequest、XMLHttpRequest2

                XMLHttpRequest对象


        创建对象
var xhr = new XMLHttpRequest() //必须要new


        属性（状态码）
xhr.readyState
    4：请求已完成，且响应已就绪

xhr.status
    2xx：成功，请求被正确接收、理解、处理
    3xx：重定向
        301 转向新url（永久）
        302 转向新url（临时）
        304 Not Modified  转向缓存（已和服务器通信）
    4xx：客户端错误
        400 Bad Request  请求不能被服务器理解
        403 Forbidden  请求被服务器拒绝
        404 Not Found  请求的资源不存在
    5xx：服务器错误

        属性（响应体）
xhr.responseText //获得字符串形式的响应数据
xhr.responseXML //获得XML形式的响应数据


        事件
xhr.addEventListener( 'readystatechange', function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
    }
};


        方法
xhr.open("POST", url)
xhr.setRequestHeader("Accept", "application/x-www-form-urlencoded; charset=utf-8") //在open与send之间
xhr.send("name=小明&age=30") //发送    string仅用于POST

xhr.getResponseHeader('Date') //获取响应头的指定字段


        例子
var xhr = new XMLHttpRequest();
xhr.open( 'GET', 'http://smart.symbio-test.com/?t=' + Math.random() );
xhr.addEventListener('readystatechange', function(){
    if(xhr.readyState === 4){
        if(xhr.status === 200){
            console.log( {response: xhr.responseText} );
        }
    }
});
xhr.send();


                GET / POST
        GET
* 一般用于信息获取
* 信息数量限制在2000字符左右
* 无请求体，使用URL传参数
* 通过url禁用缓存：'?t=' + Math.random()

        POST
* 一般用于修改服务器上的资源
* 信息数量无限制
* 在请求体中存数据


                跨域处理
一、服务端代理
二、JSONP模式
三、XHR2


                XHR缺点：
* 只支持文本数据，不支持二进制数据
* 传送时无进度信息
* 不能跨域请求


                XHR2新增功能(ie10+)
                参考：http://www.ruanyifeng.com/blog/2012/09/xmlhttprequest_level_2.html

* 请求时限
    xhr.timeout = 3000;
    xhr.ontimeout = function(e){alert('请求超时！');}

* 使用FormData对象管理表单数据
    var form = document.getElementById('myForm'); //获取表单DOM
    var formData = new FormData(form); //传入DOM，参数可选
    var file = document.getElementById('myFile'); //获取文件框DOM
    formData.append('file', file); //新增键值对（附件）
    formData.append('age', 28); //新增键值对
    xhr.open('POST', url);
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=utf-8")
    xhr.send(formData);

* 跨域请求
    仅需服务端授权即可（在服务端简单配置即可）

* 进度信息
    var fProgress = function(e){
        if(e.lengthComputable){
            var percentComplete = e.loaded / e.total;
            //...
        }
    };
    xhr.onprogress = fProgress; //下载进度事件
    xhr.upload.onprogress = fProgress; //上传进度事件
    xhr.onload = function(e){}，传输完成
    xhr.onabort = function(e){}，传输被用户取消
    xhr.onerror = function(e){}，传输中出现错误
    xhr.onloadstart = function(e){}，传输开始
    xhr.onloadend = function(e){}，传输结束（并不代表传输完成）

* 接收二进制数据
    ...


                URL
href: http://www.xxx.com:8080/js/test.js?id=xxx&type=xxx&val=xxx#18
    protocol: http: | https: | ftp:
    origin: http://www.xxx.com:8080
    host: www.xxx.com:8080
    hostname: www.xxx.com
    port: 8080
    pathname: /js/test.js
    search: ?id=xxx&type=xxx&val=xxx
    hash: #18
        window.onhashchange || document.body.onhashchange（覆盖window.onhashchange）