少年不酷不帅 2019-07-01
要想了解XMLHTTPRequest Level 2,首先得回顾一下XMLHTTPRequest对象。
XMLHTTPRequest是一个由浏览器提供的接口,用于客户端和服务器之间传输数据,它是ajax的核心,使ajax能够实现异步请求。
首先,创建一个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,并获得当前状态。
其他属性:
xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { var responseText = xhr.responseText; } else { var statusText = xhr.statusText; } };
IE5首先引进了XMLHTTPRequest接口,由于它的异步请求,获取数据不用刷新整个页面,使得它都到了广泛应用,其他浏览器也都支持了它。但XMLHTTPRequest一直没有得到标准化,直到HTML5概念形成后,W3C提出了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);
$http是AngularJS 中的一个核心服务,用于读取远程服务器的数据。"Name" : "Galería del gastrónomo",<li ng-repeat="x in names&qu