XMLHttpRequest对象

一、ajax与XMLHttpRequset关系

　　ajax:与服务器进行异步交互的技术，是一种技术方案，其中最核心的依赖是浏览器提供的的XMLHttpRequest对象，是这个对象使得浏览器可以发出http请求和 接收http响应。

　　XMLHttpRequest:是一个浏览器接口，使得js可以进行http(s)通信。XMLHttpRequest标准分为level1 和 level2

二、回顾下老版本XMLHttpRequest对象

1、XMLHttpRequest对象的属性

xhr.onreadystatechange //请求状态变化的事件触发器
    xhr.readyState         //表示XMLHttpRequest对象的状态，0：未初始化，对象已创建，未调用open()
                           // 1:open()方法已调用，未调用send()方法
                            //2:send()方法已调用，未开始接收数据
                            //3:正在接收数据，未接收完成
                            //4:数据接收完毕
    xhr.status             //服务器返回的状态码
    xhr.responseText       //服务器返回的文本数据
    xhr.responseXML        //服务器响应的xml数据
    xhr.statusText         //服务器返回的状态文本

2、XMLHttpRequest对象的方法

xhr.open('GET',data,func,true)  //制定和服务器进行交互的http方法，url地址，及其他信息
    xhr.send()                      //向服务器发送请求
    xhr.setRequestHeader()          //设置http请求头信息，需要在open()后调用
    xhr.getResponseHeader(header)         //获取响应头信息中制定键名header对应的值
    xhr.getAllResponseHeaders()           //获取所以响应头信息
    xhr.abort()                         //停止当前http请求

3、应用实例

//创建一个XMLHttpRequest对象实例
    var xhr = new XMLHttpRequest();
    //向服务器发送一个http请求
    //参数 true 表示异步操作，false表示同步
    xhr.open('GET','test.php',true);
    xhr.send();
    //接着等待接收服务器的回应，这时需要监控XMLHttpRequest对象的状态变化，指定回调函数
    xhr.onreadystatechange = function () {
//        readyState 表示XMLHttpRequest对象的状态，4表示数据已经接收完毕
//        status 表示服务器返回的状态码
        if(xhr.readyState == 4 && xhr.status == 200){
//          服务器返回的文本数据
            alert(xhr.responseText);
        }else{
//            服务器返回的状态文本
            alert(xhr.statusText);
        }
    };

4、老版本XMLHttpRequest对象的缺点：

1、只支持文本数据是传输，无法读取和上传二进制文件
2、传输和接收数据时，没有进度信息，只有提示有没有完成
3、受‘同源策略’ 限制，不能进行跨域访问

三、新版本XMLHttpRequest对象的新功能

1、可以设置http请求的时限
2、可以使用formData对象管理表单数据
3、可以上传文件
4、可以跨域请求
5、可以获取服务器端二进制数据
6、可以获取数据传输的进度信息

1、http请求时限

　　有时ajax请求很慢，无法预知要花多少时间，如果网速慢的话，用户则会等很久

　　使用timeOut属性，可以设置请求时限

//将等待时间设为3000毫秒，过了这个时限，则停止http请求
    xhr.timeout = 3000;
    //与之对应的还有timeout回调函数
    xhr.ontimeout = function (event) {
        alert('请求超时');
    }

目前，Opera、Firefox和IE 10支持该属性，IE 8和IE 9的这个属性属于XDomainRequest对象，而Chrome和Safari还不支持。　

2、formData对象　

　　ajax操作往往用来传递表单数据，为了方便表单处理，h5新增了一个formData对象，可以模拟表单

//实例化一个formData对象
    var formData = new formData();
    //添加表单项
    formData.append('userid','11');
    formData.append('username','echo');
    //提交表单，与网页提交表单的效果完全一样
    xhr.send(formData);

3、上传文件

//假定files是一个"选择文件"的表单元素（input[type="file"]），我们将它装入FormData对象。
    var formData = new FormData();
    for (var i = 0; i < files.length;i++) {
        formData.append('files[]', files[i]);
    }
    xhr.send(formData);

4、跨域资源共享（CORS）

//使用"跨域资源共享"的前提，是浏览器必须支持这个功能，而且服务器端必须同意这种"跨域"。
    // 如果能够满足上面的条件，则代码的写法与不跨域的请求完全一样。
    xhr.open('GET', 'http://other.server/and/path/to/script');
    //目前，除了IE 8和IE 9，主流浏览器都支持CORS，IE 10也将支持这个功能