首页 > 代码库 > XHR的应用场景
XHR的应用场景
一、简史
IE5.5最早实现XHR，需要通过ActiveXObject创建xhr实例，直到IE7才定义了XMLHttpRequest对象。IE5.5实现XHR之后，其他浏览器紧随其后实现了XHR，直接命名为XMLHttpRequest。早期的XHR能力有限：只能传输文本，上传能力有限，而且不能跨域。为了解决这些问题，W3C于2008年发布了“XMLHttpRequest Level 2”草案。增强了XHR的能力：
（1）支持请求超时。xhr.timeout = 3000
（2）支持传输二进制和文本数据
（3）支持应用重写媒体类型和编码响应
（4）支持监控每个请求的进度事件
（5）支持有效的文件上传
（6）支持安全的跨来源请求
二、跨源资源共享（CORS）
三、通过XHR下载数据
XHR既可以传输文本数据，也可以传输二进制数据。浏览器可以自动为各种原生数据类型提供编码和解码服务，因此在直接将数据传给XHR时就已经编码/解码好了。XHR自动解码支持的数据类型：
（1）ArrayBuffer
固定长度的二进制数据缓冲区
（2）Blob
二进制大对象或不可变数据
（3）Document
html或xml
（4）JSON
js对象
（5）Text
纯文本
浏览器可根据http首部content-type判断适当的数据类型。应用也可在发起XHR请求时显示重写数据类型：
var xhr = new XMLHttpRequest();xhr.open(‘GET‘, ‘/images/photo.webp‘);xhr.responseType = ‘blob‘;// 将返回类型设置为Blob xhr.onload = function(){ if(this.status == 200){ var img = document.createElement(‘img‘); img.src = window.URL.createObjectURL(this.response);//基于响应创建唯一对象URI img.onload = function(){ window.URL.revokeObjectURL(this.src);// 图片加载完成立即释放对象 }; document.body.appendChild(img); }}
四、通过XHR上传数据
五、XHR流式数据传输
流的应用场景很重要，可惜到现在为止没有API来实现XHR流
(1)上传时，send方法只接受完整的载荷
(2)response、responseText、responseXML属性也不是为流设计的
上传时只能通过将文件切分，然后用多个xhr请求迭代上传。
流式下载得到了浏览器有限的支持：
var xhr = new XMLHttpRequest();
xhr.open(‘GET‘, ‘/stream‘);
xhr.seenBytes = 0;
xhr.onreadstatechange = function(){
if(xhr.readyState > 2){
var newData = http://www.mamicode.com/xhr.responseText.substr(xhr.seenBytes);
// TODO 处理newData
xhr.seenBytes = xhr.responseText.length;
}
};
xhr.send();
缺陷：
需要手工跟踪偏移量，手工切分数据：responseText缓冲了完整的响应，当前请求完成之前无法释放内存。
只能读取文本数据，无法读取二进制数据。
浏览器兼容性：允许读取的数据类型不一致，有的允许text/html，有的只允许application/x-javascript
总之，XHR流实现起来麻烦而效率低，无法在生产环境下使用。
六、实时通知与交付
（1）通过XHR实现定时轮询。客户端定时发起XHR请求，如果服务端有新数据，返回新数据，没有返回空响应。难点在于，最佳的轮询间隔很难把握。需要在效率与消息延迟之间做权衡。
（2）通过XHR实现长轮询。定时轮询很可能造成大量没必要的空检查。可以做这样的改进：没有数据的时候不再立即返回空数据，而是把链接保持一段时间。
（3）WebSocket。HTML5新增的特性，可考虑在高版本浏览器下实现。
目前还是长轮询的解决方案使用的交广泛。
七、参考资料
《web性能权威指南》
《JavaScript高级程序设计》
XHR的应用场景
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。