JavaScript 实现 Ajax 请求二进制图片流
作者:纸飞机时间:2026-10-23 19:18:22浏览:214
本文详解如何在 JavaScript 中通过 XMLHttpRequest 实现 Ajax 请求二进制图片流。重点介绍设置 responseType 为 blob 以接收二进制数据,以及利用 URL.createObjectURL 和 revokeObjectURL 动态生成和释放图片预览链接,解决二维码等二进制资源在页面上的动态刷新问题。
JavaScript 实现 Ajax 请求二进制图片流
今天学习如何生成二维码,我习惯所有请求都用 ajax 完成
但是今天发现 jquery 的 ajax 不支持二进制,只能搞纯文本
于是百度之后手动实现这一功能
function getBinary(url, args, success) {
var xmlhttp = new XMLHttpRequest();
var data = eval(args);
var i = 0;
for (var key in data) {
if (i++ === 0) {
url += '?' + key + "=" + data[key];
} else {
url += '&' + key + "=" + data[key];
}
}
xmlhttp.open("GET", url, true);
xmlhttp.responseType = "blob";
xmlhttp.onload = function () {
success(this.response);
};
xmlhttp.send();
}
我没有处理不同浏览器的 XHR 的问题 需要处理的在第一行搞就行
需要三个参数
地一个是请求 url,第二个是请求参数,第三个是成功后的处理方法
请求参数用这样的方式
{‘param1':1,'param2':2,'param3':3}
处理方法要接收一个参数 就是响应的数据 也就是下图的data
然后是调用
function submit() {
getBinary("/request/qrCode", {'data': $('#str').val()},
function (data) {
var img = $('#qrcode');
window.URL.revokeObjectURL(img.src);
$('#qrcode').attr('src', window.URL.createObjectURL(data));
})
}
我这里是显示二维码
第五行的代码不能少 少了的话首次执行该方法没问题 再次执行的话图片不会改变 需要刷新页面
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持本站。
作者最新文章
JS动态构建复杂嵌套JSON对象的方法
2026-11-05 15:41:52
JS负数取余为什么是负数?详解余数与模运算区别
2026-11-05 13:34:41
JS 解压出现乱码或报错怎么解决?
2026-11-05 12:32:38
JS 中 startsWith、indexOf 与正则判断字符串前缀的对比
2026-11-04 22:19:43
JS解析Excel后怎么将数据转换为JSON格式
2026-11-04 20:58:28
