Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Ajax transports to allow the sending/receiving of blobs and array buffers via the familiar jquery ajax function.To send, set data to the blob or arraybuffer to be sent, and add 'processData:false' to the ajax options.To receive, specify the 'dataType' as blob or arraybuffer in the ajax options.
* Register ajax transports for blob send/recieve and array buffer send/receive via XMLHttpRequest Level 2
* within the comfortable framework of the jquery ajax request, with full support for promises.
* Notice the +* in the dataType string? The + indicates we want this transport to be prepended to the list
* of potential transports (so it gets first dibs if the request passes the conditions within to provide the
* ajax transport, preventing the standard transport from hogging the request), and the * indicates that
* potentially any request with any dataType might want to use the transports provided herein.
* Remember to specify 'processData:false' in the ajax options when attempting to send a blob or arraybuffer -
* otherwise jquery will try (and fail) to convert the blob or buffer into a query string.
* This revision now includes sending headers, resolves the stack overflow in abort(), and sets the status text
* into the response if the request is unsuccessful.
$.ajaxTransport("+*", function(options, originalOptions, jqXHR){
// Test for the conditions that mean we can/want to send/receive blobs or arraybuffers - we need XMLHttpRequest
// level 2 (so feature-detect against window.FormData), feature detect against window.Blob or window.ArrayBuffer,
// and then check to see if the dataType is blob/arraybuffer or the data itself is a Blob/ArrayBuffer
if (window.FormData && ((options.dataType && (options.dataType == 'blob' || options.dataType == 'arraybuffer'))
|| ( && ((window.Blob && instanceof Blob)
|| (window.ArrayBuffer && instanceof ArrayBuffer)))
var xhr;
return {
* Return a transport capable of sending and/or receiving blobs - in this case, we instantiate
* a new XMLHttpRequest and use it to actually perform the request, and funnel the result back
* into the jquery complete callback (such as the success function, done blocks, etc.)
* @param headers
* @param completeCallback
send: function(headers, completeCallback){
var url = options.url || window.location.href,
type = options.type || 'GET',
dataType = options.dataType || 'text',
data = || null,
async = options.async || true;
xhr = new XMLHttpRequest();
xhr.addEventListener('load', function(){
var res = {},
success = xhr.status >= 200 && xhr.status < 300 || xhr.status === 304;
if (success){
res[dataType] = xhr.response;
} else {
res.text = xhr.statusText;
completeCallback(xhr.status, xhr.statusText, res, xhr.getAllResponseHeaders());
});, url, async);
xhr.responseType = dataType;
for (var key in headers){
if (headers.hasOwnProperty(key)){
xhr.setRequestHeader(key, headers[key]);
abort: function(){
if (xhr){
Copy link

miguelcobain commented Apr 29, 2014

Thanks a lot for the code!

Does this send headers too? I don't see you using them anywhere.


Copy link

aaronk6 commented Jul 18, 2014

Hey @miguelcobain,

Does this send headers too? I don't see you using them anywhere.

No, it doesn’t. I’ve created a fork that does:


Copy link

leandro9119 commented Jan 10, 2015

Thanks a lot for the code!

Copy link

SaneMethod commented Jul 21, 2015

Does this send headers too?

It does now.

Copy link

beiersi commented Jan 9, 2016


Copy link

kazaff commented Jul 20, 2016


i try to use jQuery.ajaxSetup() to solve this issue, but fail.

thank you for your code~

Copy link

Lin07ux commented Jul 21, 2016

Line 42:async = options.async || true;

async is true always without false, even though I set options.async = false.

Copy link

mlissner commented Oct 27, 2017

This is wonderful. One suggestion: Add a link back to this page to the headnotes in the JS. That'll make it possible for folks to keep track of where they got it from if it ever had a bug or whatever.

Copy link

caldus85 commented Mar 14, 2022

Thanks so much for this! This solved a problem I was having where I wanted to download a PDF using the $.ajax method (POST request) and then add the resulting ArrayBuffer to a zip file using the JSZip library.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment