Ajax - XMLHttpRequest 2.0新特性

XMLHttpRequest 1.0的缺陷：
1、无法读取和上传二进制文件，只支持文本数据的传送；
2、传送和接收数据时，没有进度信息，只能提示有没有完成；
3、受到同域限制，只能向同一域名的服务器请求数据；

XMLHttpRequest 2.0新特性

设置HTTP请求的时间限制

新增timeout属性，该属性可以设置HTTP请求时限：

var xhr = new XMLHttpRequest();
// 设置异步请求的最长等待时间为3000毫秒，超过时间自动停止HTTP请求
xhr.timeout = 1000;
// 监听timeout时间，并制定回调函数
xhr.ontimeout = function(e){
	console.log("请求超时！");
}

使用FormData对象管理表单对象

// 新建formData对象
var formData = new FormData();
// 为FormData对象添加表单项
formData.append('userName','Tom');
formData.append('password','123456');
// 直接传送FormData对象
xhr.send(formData);

// FormData对象可以直接获取网页表单的值
var form = document.getElementById('myForm');
var formData = new FormData(form);

可以上传文件

设计一个“选择文件”的表单元素（input[type=“file”]），并将它装入 FormData 对象。然后，发送 FormData 对象给服务器。

var formData = new FormData();
for (var i = 0; i < files.length; i ++){
    formData.append('files[]', files[i]);
}
xhr.send(formData);

从上述内容来看，上传文件、Blob对象等，也是通过FormData对象实现的。

实现跨域请求

跨域请求，就是Ajax允许向不同域名的服务器发出HTTP请求。
有一个前提：浏览器支持跨域，服务器端同意跨域。
如果满足这个前提，跨域请求和不跨域请求的代码写法一样：

var xhr = new XMLHttpRequest();
var url = 'http://other.server/and/path/to/script';  //请求的跨域文件
xhr.open('GET', url, true);
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
        console.log(xhr.responseText);
    }
}
xhr.send();

新增responseType和response属性

responseType：

• 用于指定服务器端返回数据的数据类型，可用值有text、arraybuffer、blob、json或document
• 如果属性值指定为空字符串或者不使用responseType属性，则返回响应的数据。
  response：
• 如果向服务器端提交请求成功，则返回数据
• responseType值为text时，response返回值是字符串
• responseType值为arraybuffer时，response返回值是ArrayBuffer对象
• 如果 responseType 为 blob，则 response 返回值为一个 Blob 对象。
• 如果 responseType 为 json，则 response 返回值为一个 JSON 对象。
• 如果 responseType 为 document，则 response 返回值为一个 Document 对象。

获取服务器端的二进制数据

在XMLHttpRequest 2.0中，使用新增的responseType属性，可以实现从服务器端接收二进制数据

// 设置responseType值为blob,表示服务器返回的是二进制对象
var xhr = new XMLHttpRequest();
xhr.open('GET','/path/image/a.png');
xhr.responseType = 'blob'; 
// 设置了responseType值为blob后，接收数据时，可以直接使用浏览器自带的Blob对象
var blob = new Blob([xhr.response], {type : 'impage/png'}); // 这个地方读取的是response

监测数据传输的进度信息

2.0版本新增progress事件，用来返回进度信息。
下载：
下载的progress事件属于XMLHttpRequest对象。
上传：
上传的progress事件属于XMLHttpRequest.upload对象。

// 首先定义progress事件的回调函数
xhr.onprogress = updateProgress;
xhr.upload.onprogress = updateProgress;
// 在回调函数中，使用progress事件的一些属性
function undataProgress (event){
	// 如果 event.lengthComputable 为false，则 event.total 等于 0
	if(event.lengthComputable){
		// event.total 是需要传输的总字节，event.loaded 是已经传输的字节
		var percentComplete = event.loaded / event.total;
	}
}

与 progress 事件相关的，还有其他 5 个事件，可以分别指定回调函数。

• load：传输成功完成。
• abort：传输被用户取消。
• error：传输中出现错误。
• loadstart：传输开始。
• loadEnd：传输结束，但是不知道成功还是失败。