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:传输结束,但是不知道成功还是失败。