谈谈对XMLHTTPRequest Level 2的理解
要想了解XMLHTTPRequest Level 2,首先得回顾一下XMLHTTPRequest对象。
什么是XMLHTTPRequest
XMLHTTPRequest是一个由浏览器提供的接口,用于客户端和服务器之间传输数据,它是ajax的核心,使ajax能够实现异步请求。
XMLHTTPRequest Level 1的属性、方法及使用
首先,创建一个XMLHTTPRequest
var xhr = new XMLHTTPRequest();
然后,初始化一个http请求并发送,指明请求方法、地址和是否异步,true为异步,第三个参数可以不填,默认是true。
xhr.open('GET', URL, true); xhr.send();
最后,用onreadystatechange函数监控readyState状态变化,编写回调函数。
readyState是xhr的属性,表示当前的请求状态,一共有5个值:
0 - xhr对象已经创建,open( )方法还未调用;
1 - open( )方法已调用,send( )还未调用;
2 - send( )方法被调用,响应头和响应状态已经返回;
3 - 响应数据正在下载中;
4 - 请求完成,不管是否请求成功;
每当readyState变化的时候,都会触发onreadystatechange,并获得当前状态。
其他属性:
- responseXML表示服务器返回的XML格式的数据
- responseText表示服务器返回的文本
- statusText表示服务器返回的响应状态说明
xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { var responseText = xhr.responseText; } else { var statusText = xhr.statusText; } };
XMLHTTPRequest Level 1的缺点
- 只支持文本格式传送,不能传输或者读取二进制文件;
- 不能跨域请求数据;
- 只能获取到状态值,不能获取具体的进度;
XMLHTTPRequest Level 2
IE5首先引进了XMLHTTPRequest接口,由于它的异步请求,获取数据不用刷新整个页面,使得它都到了广泛应用,其他浏览器也都支持了它。但XMLHTTPRequest一直没有得到标准化,直到HTML5概念形成后,W3C提出了XMLHttpRequest Level 2草案。它针对老版的缺点进行了改进,支持了更多的功能。
XMLHTTPRequest Level 2的改进和具体使用方法
支持文件格式的传输:
HTML5新增了一个FormData对象,通过访问FormData可以编辑表单数据:var formData = new FormData(); // 创建一个FormData对象 formData.append(Key, Value); // 通过append()方法插入一个表单数据
通过这个对象,就可以实现文件格式的传输:
var formData = new FormData(); formData.append('file', file); xhr.send(formData);
支持读取服务器端的二进制数据:
var xhr = new XMLHttpRequest(); xhr.open(Method, URL); xhr.responseType = 'blob'; // 通过responseType属性表示接瘦的是一个二进制对象
支持设置HTTP请求超时时间:
通过timeout属性设置超时时间,超过该时间,没有完成请求,触发ontimeout方法。Opera、Firefox和IE10支持该属性,IE8、IE9是由XDomainRequest对象支持该属性。xhr.timeout = 5000; xhr.ontimeout = function(e) { alert('请求超时!'); }
支持获取当前的传输进度:
传输数据时,由progress事件返回进度信息,分为上传和下载,下载的progress事件属于XMLHttpRequest对象,上传的progress事件属于XMLHttpRequest.upload对象。xhr.onprogress // 下载的progress事件 xhr.upload.onprogress // 上传的progress事件
定义回调函数:total是需要传输的总字节,loaded是已经传输的字节,如果lengthComputable值为false,total为0
function updateProgress(event) { if (event.lengthComputable) { var progress = event.loaded / event.total; } } xhr.onprogress = updateProgress; xhr.upload.onprogress = updateProgress;
支持跨域请求:
跨域请求的前提是浏览器必须支持这个功能,而且服务器端必须同意跨域,如果能够满足上面的条件,则代码的写法与不跨域的请求完全一样。除了IE8、IE9不支持,其他主流浏览器都支持。xhr.open(Method, URL);