使用jQuery AJAX读取二进制数据

Posted 2022-03-05 力为

READING BINARY DATA USING JQUERY AJAX

http://www.henryalgus.com/reading-binary-files-using-jquery-ajax/

Query is an excellent tool to make web development easy and straightforward. It helps while doing DOM manipulation and makes Ajax requests painless across different browsers and platforms. But if you want make an Ajax request, which is giving binary data as a response, you will discover that it does not work for jQuery, at least for now. Changing “dataType” parameter to “text”, does not help, neither changing it to any other jQuery supported Ajax data type.

Problem here is that jQuery still does not support html5 XMLHttpRequest Level 2 binary data type requests – there is even a bug in jQuery bug tracker, which asks for this feature. Although there is a long discussion about this subject on the GitHub, it seems that this feature will not become part of jQuery soon.

To find a solution for this problem, we have to modify XMLHttpRequest itself. To read binary data correctly, we have to treat response type as blob data type.

1 2 3 4 5 6 7 8 9 10 11 12

var xhr = new XMLHttpRequest ( ) ; xhr . open ( 'GET' , '/my/image/name.png' , true ) ; xhr . responseType = 'blob' ;   xhr . onload = function ( e )    if ( this . status == 200 )      // get binary data as a response      var blob = this . response ;    ;   xhr . send ( ) ;

But what happens if we have to directly modify received binary data? XHR level 2 also introduces  “ArrayBuffer” response type. An ArrayBuffer is a generic fixed-length container for binary data. They are super handy if you need a generalized buffer of raw data, but the real power is that you can create “views” of the underlying data usingJavaScript typed arrays.

1 2 3 4 5 6 7 8 9 10

var xhr = new XMLHttpRequest ( ) ; xhr . open ( 'GET' , '/my/image/name.png' , true ) ; xhr . responseType = 'arraybuffer' ;   xhr . onload = function ( e )    // response is unsigned 8 bit integer    var responseArray = new Uint8Array ( this . response ) ; ;   xhr . send ( ) ;

This request creates an unsigned 8-bit integer array from data buffer. ArrayBuffer is especially useful if you have to read data for WebGL project, WebSocket or Canvas 2D

Binary data ajax tranport for jQuery

Sometimes making complete fallback to XMLHttpRequest is not a good idea, especially if you want to keep jQuery code clean and understandable. To solve this problem, jQuery allows us to create Ajax transports – plugins, which are created to make custom Ajax requests.

Our idea is to make “binary” Ajax transport based on our previous example. This Ajax transport creates new XMLHttpRequest and passes all the received data back to the jQuery.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 以上是关于使用jQuery AJAX读取二进制数据的主要内容，如果未能解决你的问题，请参考以下文章 将二进制数据从 jQuery ajax 发送到 PHP 使用Jquery时无法读取数据库，Ajax提交表单而不刷新页面 使用 JavaScript/jQuery 从输入类型“文件”中获取二进制图像数据，以便在 WebMatrix 中使用 AJAX 进行图片预览 [重复] 错误：通过 ajax jquery 加载数据时无法读取未定义的属性“样式” jQuery中的ajaxjquery中ajax全局事件load实现页面无刷新局部加载ajax跨域请求jsonp利用formData对象向服务端异步发送二进制数据 jQuery ajax 调用无法从 CakePHP 3.8 读取 json 编码数据（获取一个空数组）