ajax 请求二进制流 图片 文件 XMLHttpRequest 请求并处理二进制流数据
来源:互联网 发布:ppsspp 源码 编辑:程序博客网 时间:2024/06/01 10:40
需求:在前(web client)后(Restful Service)端完全解耦的模式框架下,webclient需要请求 Service 返回的图片文件(二进制流),并在client端显示。
第一步思考:拿到此需求, 基于程序员的狂妄心里,思考到显示图片而已,jquery ajax直接get请求 将返回data 赋值给img标签的src属性即可嘛,so easy~
不知天高地后的小子开始码代码,经过几分钟给出了以下的代码,并自信满满的准备测试。
//$.ajax({ // method: "GET", // url: serverUrlBase + "/server/images/" + mapid + "/files/png",//跨域,请求会返回流文件 png图片 // beforeSend: function (xhr) { // xhr.setRequestHeader("client_type", "DESKTOP_WEB"); // xhr.setRequestHeader("desktop_web_access_key", _desktop_web_access_key); // }, // success: function (data) { // //$("#remoteimg").attr("url", data); // } //});
在visual studio 中选中文件 在浏览器中查看。
这是个什么~!!!!!!!!!!!!!!! 不符合期望啊~~~ !!!!!!!!!
第二步思考:后端那小子给的API肯定有问题。先用工具测试看看。
打开chorme ,打开装好的postman组件,输入请求地址,点击SEND。等待两秒钟一副超大的图片文件显示出来了~~
第三步思考:后端那小子的接口是正常的。 问题在我自己身上(表情渐渐严肃。) 把请求到的数据 console.log(data) 一下。
经过几分钟卡顿,我勒个去,浏览器怎么卡死了。耐心等了一会 数据打印出来了:
这是什么乖乖,我滴孩嘞(正统 淮南话)。
第四步思考:怎么是这样的数据。Postman 中返回的是图片啊 我的怎么这样,对了 看看postman 返回的是什么数据。
在postman中选中图片 -》右键-》检查 如下图所示:
第五步思考:为什么我的数据与postman数据不同。为何是乱码咧? 不对,ajax返回的数据是什么?难道编码被改了?难道不支持二进制流?
一边想着 一边打开jquery 官网(抱怨一下 jquery官网真心慢,w3school真心肤浅) 查找ajax datatype数据类型
发现竟然没有二进制数据选项,那是不是返回的数据被默认以文本形式返回了。
抱怨:jquery做了这么久了 一个ajax方法还停留在几年前的xmlhttprequest 1的版本中,惊人的不支持流文件!!!
我这还怎么大肆推行我的前后台完全隔离思想~~。算了不抱怨了,果然是不能靠别人,只能自己写了。
楼主依稀记得 xmlhttprequest 2 标准中支持流文件的,并且应该使用 xhr.response作为返回 而不是responseText。 那么开始写到:
var url = serverUrlBase + "/server/images/" + mapid + "/files/png";' var xhr = new XMLHttpRequest(); xhr.open('GET', url, true);//get请求,请求地址,是否异步 xhr.setRequestHeader("client_type", "DESKTOP_WEB"); xhr.setRequestHeader("desktop_web_access_key", _desktop_web_access_key); xhr.onload = function() { if (this.status == 200) { var data = this.response; //TODO...............................................如何接收数据呢。 } } xhr.send();
第六步思考: 这样应该可行,但是怎么处理请求的数据呢? ???? 这个问题。 对了 html5新特性里面是不是 提到一个 Blob对象来着。试试看。
通过查阅相关blob资料,查阅 4.6.9 The response
attribute 得知 返回类型应该使用
在请求成功的地方 添加以下代码:
var blob=new Blob();
blob=this.response;
既然二进制数据拿到了,那么要把它放在一个 html标签中,并且应该是img标签 那么:代码应该是
var img = document.createElement("img");
img.src = window.URL.createObjectURL(blob); //有问题,将blob加载到img中 由于blob太大 会有性能影响 应该怎么在加载之后 如何释放呢:
img.onload = function(e) {
window.URL.revokeObjectURL(img.src);//释放。
};
然后 将img 放到一个div容器中就可以啦。
$("#imgcontainer").html(img); 是的请求处理就应该是这样。
那么我们最终的代码如下:
var url = serverUrlBase + "/server/images/" + mapid + "/files/png"; var xhr = new XMLHttpRequest(); xhr.open('GET', url, true); xhr.responseType = "blob"; xhr.setRequestHeader("client_type", "DESKTOP_WEB"); xhr.setRequestHeader("desktop_web_access_key", _desktop_web_access_key); xhr.onload = function() { if (this.status == 200) { var blob = this.response; var img = document.createElement("img"); img.onload = function(e) { window.URL.revokeObjectURL(img.src); }; img.src = window.URL.createObjectURL(blob); $("#imgcontainer").html(img); } } xhr.send();
结语:这样楼主解决了 加载二进制流的问题。 结合 上一篇提到的 ajax跨域请求,对于前后端完全分离理念的实现又更近了一步。当然面对安全还是有许多要考虑的问题。
在此过程中,也让搂着领悟到一点:高阶的封装(ajax)固然好,然而对一些特殊的请求无法处理(请求流文件),因此还需掌握底层的原理,才能面对苛刻的需求。
总结代码:
var xhr = new XMLHttpRequest(); xhr.open("get", url, true); xhr.responseType = "blob"; xhr.onload = function() { if (this.status == 200) { var blob = this.response; var img = document.createElement("img"); img.onload = function(e) { window.URL.revokeObjectURL(img.src); }; img.src = window.URL.createObjectURL(blob);
$("#imgcontainer").html(img);
} } xhr.send();
参考资料:
http://api.jquery.com/jQuery.ajax/ jquery ajax api
https://xhr.spec.whatwg.org/ xmlhttprequest 规范
https://xhr.spec.whatwg.org/#the-responsetype-attribute responsetype返回类型支持
http://www.zhangxinxu.com/wordpress/2013/10/understand-domstring-document-formdata-blob-file-arraybuffer/ xmlhttprequest 相关学习。
http://www.ruanyifeng.com/blog/2012/09/xmlhttprequest_level_2.html xmlhttprequest 使用指南
- ajax 请求二进制流 图片 文件 XMLHttpRequest 请求并处理二进制流数据 之最佳实践
- ajax 请求二进制流 图片 文件 XMLHttpRequest 请求并处理二进制流数据 之最佳实践
- ajax 请求二进制流 图片 文件 XMLHttpRequest 请求并处理二进制流数据
- ajax请求二进制流图片并渲染到html中img标签
- jquery ajax 二进制请求
- ajax实战:(ajax异步下载文件)请求二进制流进行处理
- Java接收Flash请求的二进制流图片
- 通过HTTP请求图片,同时转为二进制流返回
- Java实现Flash请求的二进制流图片保存并返回XML信息包含图片访问地址
- 文件以二进制流POST的HTTP请求
- Ajax请求数据并处理的笔记
- AJax数据请求处理
- jQuery AJAX XMLHttpRequest方法 请求数据
- AJAX http请求 XMLHttpRequest
- ajax的xmlHttpRequest请求
- XMLHttpRequest对象创建数据请求处理
- okhttp 网络请求添加请求头,get和post请求,表单提交 ,二进制流
- PHP接收二进制流并生成文件
- Android快捷键,替换
- 大数据在疾病间建立起惊人联系
- php用最简单的方式实现7牛云对象储存文件上传
- jQuery 在光标定位的地方插入文字的插件
- C语言实验——圆周率
- ajax 请求二进制流 图片 文件 XMLHttpRequest 请求并处理二进制流数据
- Ubuntu17.10下安装和编译caffe问题总结
- 适配iPhonex的头部安全区域 Masonry 的适配安全区域
- 自定义水平ProgressBar
- HTML5高级编程之图形扭曲及其应用一(原理篇)
- 【MQ】ActiveMQ(三)——spring管理ActiveMQ,实现发送和接收效果
- 百度:2017茶行业大数据
- mongdb新版本建用户与删除用户
- 用CONSTRUCT 2制作游戏心得。