第三十五课：Ajax详解

一个完整的Ajax请求：

var xhr = new (self.XMLHttpRequest || ActiveXObject)("Microsoft.XMLHTTP");   //new XMLHttpRequest()传入参数不影响。

xhr.onreadystatechange = function(){    //请求状态改变就会执行这个函数，状态有0,1,2,3,4五个状态。

　　if(this.readyState === 4 && this.status === 200){

　　　　alert(this.responseText);

　　}

}

xhr.open("post","url",true);     //第三个参数如果为true，就代表异步请求，如果为false就代表是同步。

xhr.setRequestHeader("","");   //设置请求头

xhr.send("key=val&key2=val2");      //发送数据

大家可能知道，在new ActiveXObject()时，针对IE不同版本的浏览器，传入的参数也不一样。根据IE官方建议，我们只要检测这四个参数："Msxml2.XMLHTTP.6.0"，"Msxml2.XMLHTTP.3.0"，"Msxml2.XMLHTTP"，Microsoft.XMLHTTP。其中"Microsoft.XMLHTTP"是针对IE5以及以前版本的。

为了达到兼容性，我们需要这样做：

var xhr = (function(){

　　var fns = [

　　　　function(){return new XMLHttpRequest();},

　　　　function(){return new ActiveXObject("Msxml2.XMLHTTP");},

　　　　function(){return new ActiveXObject("Msxml2.XMLHTTP.6.0");},

　　　　function(){return new ActiveXObject("Msxml2.XMLHTTP.3.0");},

　　　　function(){return new ActiveXObject("Microsoft.XMLHTTP");}    //这里兼容IE5，现在的程序都不需要兼容IE5了，因此可以去掉。

　　], xhrTemp;

　　for(var i =0,len = fns.length ; i< len;i++){

　　　　try{

　　　　　　fns[i]();   //调用每一个创建xhr对象的函数，如果成功，就把生成xhr对象的函数返回给xhr变量。

　　　　　　xhrTemp = fns[i];

　　　　　　break;

　　　　}catch(){}

　　}

　　return xhrTemp;

})();

还有一部分人可能知道，其实IE6，7已经支持XMLHttpRequest对象了，但是为什么还需要用ActiveXObject对象呢，因为IE6，7的XMLHttpRequest对象有兼容性问题，比如：IE7下的xhr对象不支持本地file协议，会出现拒绝访问，需要倒退到ActiveXObject对象来操作本地file协议的功能。而且它们的xhr对象不是一个javascript对象，也就是说在IE6，7下，你通过var xhr = new XMLHttpRequest();生成的xhr对象不是js对象，而是ActiveXObject对象。

总结以上，我们可以在我们框架中，写出以下的最终版本：

window.$ = {};

var s = ["XMLHttpRequest", "ActiveXObject('Msxml2.XMLHTTP.6.0')", "ActiveXObject('Msxml2.XMLHTTP.3.0')", "ActiveXObject('Msxml2.XMLHTTP')"];

if(!"1"[0]){    //IE6，7下，"1"[0]返回undefined，其他浏览器返回"1"。

　　s[0] = location.protocol === "file:" ? "!" : s[0];      //如果是本地协议的操作，那么就覆盖XMLHttpRequest，解决IE6，7兼容性问题。

}

for(var i =0, xhr; xhr = s[i++];){

　　try{

　　　　if(eval("new " +xhr)){     //判断是否能够new出一个xhr对象，这里的eval可以把字符串解析成js代码执行

　　　　　　$.xhr = new Function("return new " + xhr);    //新建一个Function实例对象，传入的参数是一个字符串。如果xhr="XMLHttpRequest"，这段代码实际上会变成这样:function(){ return new XMLHttpRequest();}

　　　　　　break;

　　　　}

　　}

　　catch(){}

}

xhr对象的事件回调函数的绑定与状态分析

针对xhr对象的事件回调函数，我们一般使用onreadysatechange。但是XMLHttpRequest2（XMLHttpRequest新版本）添加了多个事件回调函数。如下：

loadstart：在请求开始时触发

progress：在请求发送数据以及接收数据期间，在服务器指定的时间，间隔触发

abort：在请求被取消时触发，例如：在调用了xhr.abort()方法时。

error：在请求失败时触发

load：在请求成功时触发

timeout：超时触发

loadend：在请求完成时触发，无论是成功还是失败

对于xhr请求的状态，我们一般通过判断xhr.status的值。

2xx状态与304我们都可以看成是成功状态。但是有一些兼容性问题需要处理：IE（非原生的xhr对象，也就是使用ActiveXObject实现的xhr）中，会将204设置为1223，Opera会在取得204后将status设置为0。因此，成功状态的写法如下：

if((xhr.status >=200 && xhr.status < 300) || xhr.status ==304 || xhr.status ==1223 || xhr.status ==0)

还有一个特例：在Firefox下，本地使用XMLHttpRequest，成功返回时，status等于0。由于很少在本地发请求，因此很多框架都没有对这个进行处理。

xhr发送请求和数据

open方法有5个参数，open(method,url,async,username,password)

method代表请求的HTTP方法，值包括：GET,POST,PUT,DELETE.HEAD,OPTION等。有些浏览器还支持你自定义method。

url是请求的地址，浏览器对这个url会进行同源安全策略，也就是会要求这个URL与包含脚本的文件具有相同的域名，端口，协议。在GET请求下，我们需要把传给url的数据，放到url?的后面，只能是字符串。

async指示请求使用的是异步还是同步，如果这个参数是false，请求是同步的，那么只要在send方法后，取xhr的响应数据就行了。如果这个参数是true或省略，请求是异步的，那么就需要在open方法之前在xhr对象上添加一个onreadystatechange事件回调函数。

username，password参数是可选的，为url所需的授权提供认证资格。

发送数据时，我们使用的是send方法，get方法一般传入null（在url?后面已经传入数据了），而post请求传入你要发给此url的数据。

早期的xhr对象，send方法中只能传入字符串，现代的xhr可以传FormData，document，ArrayBuffer，Blob。

FormData是一个什么样的对象呢，大家都知道，我们点击按钮提交表单时，浏览器会自动将表单的所有disabled为false的input，textarea，select，button元素的name与value抽取出来，变成一个querystring字符串。但是，我们在做ajax请求时，浏览器不会自动将表单的所有这些元素进行这样的处理，因此，我们需要用代码手动来实现这样的功能。jQuery中的serialize方法就是实现这样功能的一个方法。而现代浏览器的FormData对象也可以实现这样的功能。举个例子：

var formdata = new FormData();

formdata.append("name", "chaojidan");

formdata.append("age", 26);

xhr.send(formdata);

FormData也可以这样用：

var formobj = document.getElementById("form");   //得到页面上form元素的对象。

var formdata = formobj.getFormData();   //得到此form表单中所有disabled为false的input，textarea，select，button元素的name与value。

xhr.send(formdata);

FormData还可以这样用：

var formobj = document.getElementById("form");   //得到页面上form元素的对象。

var formdata =new FormData(formobj);   //得到此form表单中所有disabled为false的input，textarea，select，button元素的name与value。

xhr.send(formdata);

如果send的是一个document，我们需要把这个document赋值为一个xml对象，然后send(document)。

至于ArrayBuffer和Blob对象，大家可以去看js高级程序编程，里面说的很详细。

xhr接收数据

早期的xhr对象拥有两种接收数据的属性，xhr.responseText对应解码后的字符串（默认解码为utf-8），xhr.responseXML对应一个XML文档。IE还支持xhr.responseBody对应未解码的二进制数据。现在流行json数据的传输，因此服务器会通过responseText传json格式的字符串给前端，而我们前端需要对这个json格式的字符串进行解析，解析成js对象。至于如何解析，大家可以去看ajax hacks这本书。

至于后端返回什么类型的数据，我们可以通过xhr.getResponseHeader("Content-Type");

XMLHttpRequest2新增了responseType和response属性。

responseType，在发送请求前，根据你的数据需要，可以将xhr.responseType设置为text，arraybuffer，blob或document。忽略此设置，默认将响应设为text。

在请求完成后，xhr.response的属性值为DOMString或ArrayBuffer或Blob或Document，具体取决于responseType的设置。

xhr还有一个overrideMimeType方法，比如：xhr.overrideMimeType("text/plain; charset = x-user-defined")，此段代码的意思是，重写了默认的MIME类型，强制浏览器将该响应当成纯文本文件来对待，并且使用一个用户自定义的字符集（这样就是告诉浏览器，不要去解析数据，直接返回未处理过的字节码）。

XMLHttpRequest实现文件上传

假设页面上有一个id为upload的input（type = file），还有一个id为progress用于显示进度的SPAN元素。

window.addEventListener("load", function(){

　　var el = document.querySelector("#upload");

　　var progress = document.getElementById("#progress");

　　el.addEventListener("change",function(){

　　　　var file = this.files[0];     //点击input，会弹出一个选择文件的框，用户选择好文件后，点击确定按钮，这时就会触发input元素的change事件，并且input元素有一个files属性，此属性值就是用户要上传的文件数组。input.files[1]代表第二个文件。

　　　　if(file){　　

　　　　　　var xhr = new XMLHttpRequest();

　　　　　　xhr.upload.addEventListener("progress",function(){    //当用ajax请求发送文件时，会触发xhr.upload的progress事件

　　　　　　　　var done = e.position || e.loaded, total = e.totalSize || e.total;    //兼容性写法

　　　　　　　　progress.innerHTML = (Math.floor(done/total *1000)/10) + "%";    //用百分比的形式显示，文件已经发送了百分之多少？

　　　　　　});　　

　　　　　　xhr.addEventListener("load",function(){    //当ajax请求完成后，会触发load事件。

　　　　　　　　progress.innerHTML = "上传成功";

　　　　　　});

　　　　　　xhr.open("put", "/upload", true);   //打开这个请求，异步请求

　　　　　　xhr.setRequestHeader("X-File-Name", encodeURIComponent(file.fileName || file.name));  //把文件的名字放到请求头的X-File-Name字段中，需要编码

　　　　　　xhr.setRequestHeader("Content-Type", "application/octet-stream");　　//设置ajax请求的数据类型

　　　　　　xhr.send(file);     //发送文件。

　　　　}

　　});

})

如果文件太大，我们可以用文件对象的slice方法对文件进行切割，然后分块上传。比如：上面例子中的file，我们可以调用var file1 = file.slice(0,1024)，上传file1，然后再var file2 = file.slice(1024,file.size)，上传file2。file.size可以其实就是得到file的文件大小。

那么，如何在老版本IE下上传文件，由于我们无法序列化二进制文件（上传文件其实就是二进制数据的上传），只好通过传统的form提交方法实现，为了防止提交后，刷新本页面，我们需要创建一个临时的iframe，具体实现方案，我们将在下一课代码讲解。

加油！