- 浏览: 1431559 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
luhouxiang:
写的很不错,学习了
Extjs 模块化动态加载js实践 -
kingkongtown:
如果想改成淘宝后台那样,可以在编辑器批量上传图片呢?
kissy editor 阶段体会 -
317966578:
兄弟我最近也在整jquery和caja 开放一些接口。在git ...
caja 原理 : 前端 -
liuweihug:
Javascript引擎单线程机制及setTimeout执行原 ...
setTimeout ,xhr,event 线程问题 -
辽主临轩:
怎么能让浏览器不进入 文档模式的quirks模式,进入标准的
浏览器模式与文本模式
XMLHttpRequest 最常用到的功能就是文本操作以及 xml 处理,但其实 xhr 还可用来对二进制进行直接操作,例如比较强悍的 linux in js .
1. responseText 方式读取
1.1 服务器干涉的全平台兼容
根据 xmlhttprequest w3 规范 ,对于返回体的处理会根据 charset 来decode 字节得到对应字符串,如果我们想要得到返回的二进制字节,就需要服务器端设置contentType text/plain ;charset 为 iso8859-1 (一个字节表示一个字符)再使用 charCodeAt(0) 来得到字符对应的字节表示。
服务器端:
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/plain;charset=ios8859-1"); byte[] b= new byte[3]; b[0]=8; b[1]=4; b[2]=2; response.getOutputStream().write(b); }
客户端:
var req = new XMLHttpRequest(); req.open('GET', '/binary', true); req.onreadystatechange = function (aEvt) { if (req.readyState == 4) { if (req.status == 200) { var content = (req.responseText); console.log(content.length); alert("第一个字节 : " + (content.charCodeAt(0) & 0xff).toString(2)); alert("第二个字节 : " + (content.charCodeAt(1) & 0xff).toString(2)); alert("倒数第二个字节 : " + (content.charCodeAt(content.length - 2) & 0xff).toString(2)); alert("最后一个字节 : " + (content.charCodeAt(content.length - 1) & 0xff).toString(2)); } } }; req.send(null);
1.2 overrideMimeType
但这需要服务器端程序读取二进制文件并设置content-type为text/plain,charset 为 iso8859-1 ,常见的场景是直接由web server 返回二进制文件,这时头为 application/octet-stream ,如果按照规范,则会经过 utf-8 decode 为对应字符串,这时 charCode 是得不到对应原始二进制的,不过还好规范还支持客户端 overrideMimeType ,可以指定decode 方式,目前除了 ie 都支持
var req = new XMLHttpRequest(); req.open('GET', 'linuxstart.bin', true); // XHR binary charset opt by Marcus Granado 2006 [http://mgran.blogspot.com] if (req.overrideMimeType) { req.overrideMimeType('text/plain; charset=iso8859-1'); } req.onreadystatechange = function (aEvt) { if (req.readyState == 4) { if (req.status == 200) { var content = (req.responseText); console.log(content.length); alert("第一个字节 : " + (content.charCodeAt(0) & 0xff).toString(2)); alert("第二个字节 : " + (content.charCodeAt(1) & 0xff).toString(2)); alert("倒数第二个字节 : " + (content.charCodeAt(content.length - 2) & 0xff).toString(2)); alert("最后一个字节 : " + (content.charCodeAt(content.length - 1) & 0xff).toString(2)); } } }; req.send(null);
2.直接读取二进制流
最新的 firefox 和 chrome 则提供了直接读取二进制数据的方式,这就涉及到了两个概念:
代表一段内存bytes数据,但是不可读。
ArrayBuffer 的读取接口(view),表示把 ArrayBuffer 的每 8 个字节类型化为成一个整数,类似还有 Uint32Array
firefox ,chrome 会通过 xhr.response 暴漏response ArrayBuffer 类型的原始字节,程序可通过 Uint8Array 来读取每一个字节代表的整数信息。
该种方式则和 charset 以及 mimeType 完全没有关系了,但是还没有形成规范 :
var xhr = new XMLHttpRequest(); xhr.open("GET", "/upload/binary", false); xhr.responseType = "arraybuffer"; xhr.send(null); // no support for w3 xhr.responseBlob var buffer = xhr.responseBlob || xhr.response || xhr.mozResponseArrayBuffer; if (buffer) { var byteArray = new Uint8Array(buffer); console.log(byteArray.byteLength); alert("第一个字节 : " + byteArray[0].toString(2)); alert("第二个字节 : " + byteArray[1].toString(2)); alert("倒数第二个字节 : " + byteArray[byteArray.byteLength - 2].toString(2)); alert("最后一个字节 : " + byteArray[byteArray.byteLength - 1].toString(2)); }
3. 二进制数据写入
关于二进制数据写入传回 server 主要用于文件上传,可见:浏览器文件操作
发表评论
-
continuation, cps
2013-09-12 16:49 2711起 随着 nodejs 的兴起,异步编程成为一种潮流 ... -
一种基于匹配回朔的 css3 选择器引擎实现
2013-05-07 20:40 3342一种基于匹配回朔的 css3 选择器引擎实现 介绍 C ... -
cubic-bezier 模拟实现
2013-01-05 16:34 14010cubic-bezier 曲线是 css3 动画的一个重要基石 ... -
构建前端 DSL
2012-10-11 22:10 5280目前在传统的软件开 ... -
Get cursor position and coordinates from textarea
2012-04-10 20:50 4922最近需要从 textarea 中获 ... -
兼容 ie 的 transform
2012-02-23 14:00 6330css 2d transform 是 css3 引入的一个新的 ... -
promise api 与应用场景
2012-02-07 17:34 7277promise 是 commonjs 社区中提出的异步规范,其 ... -
closure compiler 代码优化实例
2012-01-08 03:23 2764closure compiler 可以进行不少有意思的优化 ... -
write html parser
2011-12-01 02:48 2843首先需要声明 html 不能用正则表达式来直接匹配进行内容抽取 ... -
获取剪贴板数据
2011-11-07 23:31 6372兼容性: 获取剪贴板数据这块各个浏览器间存在很大的 ... -
url 映射问题
2011-11-07 21:52 3157背景 url mapping 我最早知道是作为 j ... -
tip:如何原生播放声音
2011-10-19 12:45 2887如果不想考虑浏览器间 ... -
转载:瀑布流布局浅析
2011-09-29 19:02 2780简介 如果你经 ... -
cross domain request
2011-09-29 18:39 2783场景 跨域请求是随着 ... -
基于多继承的树设计
2011-09-18 03:42 2194分类 树是一种常见 ... -
caja 原理 : 前端
2011-09-01 16:48 6927作为前端开放的基础安全保证,caja 是目前比较合 ... -
tokenization of html
2011-08-29 22:38 2669html 符号解析问题 场景: 在页面上输出包 ... -
ie 下 cloneNode 导致的属性克隆
2011-08-24 16:10 2406这个还是很值得记下,一直存在的很大隐患终于解决,由于在 ie& ... -
循环引用下的深度克隆
2011-08-04 20:39 2226深度复制和浅度复制 是当初初学 c 遇到的第一批问题,似乎使 ... -
模块的静态与动态循环依赖
2011-07-25 03:43 3185场景: 循环依赖 我是不支持的,但现实中似乎又确实需 ...
相关推荐
Lua小程序十六进制字符串和二进制数据间的转换[借鉴].pdf
主要介绍了Ajax发送和接收二进制字节流数据的方法,非常不错,具有参考借鉴价值,感兴趣的朋友一起看看吧
1ASCII码表(二进制十进制十六进制)[归纳].pdf
软件实验二二进制到ASCII码转换定义.pdf
C#存取二进制图片[文].pdf
ASCII表(十进制-十六进制-二进制-字符)[归纳].pdf
ieee754二进制浮点数算法[参照].pdf
4位二进制加法器[收集].pdf
74197TTL二进制可预置锁存器计数器[文].pdf
FSTREAM文本二进制方式读入写出数方法[参考].pdf
128的二进制有原码_反码和补码[借鉴].pdf
C++编译后的二进制程序中字符串的保存方式[借鉴].pdf
基本原理如果您是 WebGL 开发人员,您经常希望从服务器请求二进制数据,并从中提取一些类型化数组以及一些元数据: var xhr = new XMLHttpRequest ( ) ;xhr . open ( 'GET' , '/path/to/graphics_data.bin' , true )...
(数电课设)二十四进制计数器[定义].pdf
xr 是 XMLHttpRequest 的超简单封装,并返回 ES6 Promise。示例代码:xr.get('/api/items', {take: 5}) ... console.log("xhr", xhr); console.log("progress", xhrProgressEvent); } } });
标签将二进制资源上传到 node.js 服务器。 该项目旨在解决 Phonegap 的file-transfer插件,该插件一次只能发送一个文件。 为了解决这个问题,如果我们可以使用XHR2上传多部分表单数据,那就太好了。 但是,执行此...
XHR 博文链接:https://eric2007.iteye.com/blog/213570
JavaScript - XHR实现短信验证码注册登录完整示例:JavaScript - XHR.js和附件说明
修改了帮助文档的index.html, 包含localXHR.js 能够在本地直接打开帮助文档!
自动化模拟浏览器,打开网站,分析所有ajax / XHR请求,包含详细的response request数据。。。就是F12以后Network中xhr显示的数据。。。 采用python browsermobproxy selenium实现 包含代码,chromedriver 、 ...