This is what I have:

jquery/1.10.2

$.ajax({
    url: ".pdf",
    dataType: "text",
    data: "",
    success: function(data) {
        alert(data.length);
    },
    error: function(a, b, c) {}
});

When I run that locally (in Safari 6.0.5 on OS X), I get 211300. However, the actual file appears to be 218882 bytes. With something fully ASCII (such as .txt), it seems to work correctly.

I don't need to download the file, but rather, work with its content.

Is there any way to make ajax work with binary files (either client side or server side) without resorting to using base64?

This is what I have:

jquery/1.10.2

$.ajax({
    url: "http://samplepdf./sample.pdf",
    dataType: "text",
    data: "",
    success: function(data) {
        alert(data.length);
    },
    error: function(a, b, c) {}
});

When I run that locally (in Safari 6.0.5 on OS X), I get 211300. However, the actual file appears to be 218882 bytes. With something fully ASCII (such as http://www.angio/pi/digits/pi1000000.txt), it seems to work correctly.

I don't need to download the file, but rather, work with its content.

Is there any way to make ajax work with binary files (either client side or server side) without resorting to using base64?

• javascript
• jquery
• ajax

• Is there any reason you want to do this client side rather than server side ? – Brewal Commented Aug 26, 2013 at 15:21
• I'm using it for client side encryption/decryption, so everything's binary. I'm using the PDF as an example since it's easiest I can reproduce the error. – Tech163 Commented Aug 26, 2013 at 15:23
• Are you using GET or POST ? – The Dark Knight Commented Aug 26, 2013 at 15:26
• Are you rebuilding HTTPS manually? Otherwise, server side is the only secure method here - client side code will be easy to decipher. – Mark Schultheiss Commented Aug 26, 2013 at 15:26
• This scenario must be handled using server side coding and not client side scripting , other wise basic XSS might be an issue here. – The Dark Knight Commented Aug 26, 2013 at 15:28

2 Answers 2

I think you need to use typed arrays. Javascript way of dealing with binary. There is no other way to deal with pure binary data. But with typed arrays you can do almost everything that you would want to do with binary anywhere else.

Sending Typed Array using Ajax

var myArray = new ArrayBuffer(512);
var longInt8View = new Uint8Array(myArray);

for (var i=0; i< longInt8View.length; i++) {
  longInt8View[i] = i % 255;
}

var xhr = new XMLHttpRequest;
xhr.open("POST", url, false);
xhr.send(myArray);

Receiving Typed Array

2 ways to do it...First

var oReq = new XMLHttpRequest();
oReq.open("GET", "/myfile.png", true);
oReq.responseType = "arraybuffer";

oReq.onload = function (oEvent) {
  var arrayBuffer = oReq.response; // Note: not oReq.responseText
  if (arrayBuffer) {
    var byteArray = new Uint8Array(arrayBuffer);
    for (var i = 0; i < byteArray.byteLength; i++) {
      // do something with each byte in the array
    }
  }
};

oReq.send(null);

Second

var oReq = new XMLHttpRequest();
oReq.open("GET", "/myfile.png", true);
oReq.responseType = "arraybuffer";

oReq.onload = function(oEvent) {
  var blob = new Blob([oReq.response], {type: "image/png"});
  // ...
};

oReq.send();

Source: https://developer.mozilla/en-US/docs/Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data

Using Jquery

Sending: $.ajax(url,{data:myArray});

Receiving: not tested...

$.ajax('https://dl.dropboxusercontent./u/139992952/coffee.png',{
    contentType: "arraybuffer",
    success: function(d){
        var blob = new Blob([d], {type: "image/png"}),
            u = URL.createObjectURL(blob);
    }
});

The worst wheel of the cart makes the most noise! go for a better solution here

http://johnculviner./jquery-file-download-plugin-for-ajax-like-feature-rich-file-downloads/

Demo here

http://jqueryfiledownload.apphb./

Fully tested on:
Internet Explorer 6 – 9
Firefox 11 – reasonably sure it will work on earlier versions
Chrome 17 – reasonably sure it will work on earlier versions

Remark : jQuery 1.3+ needed.

update:

Haven't tried though

$.ajax({
url: controllerUrl,
type: 'Get',
 contentType: "application/pdf",
 beforeSend: function (xhr) {
xhr.overrideMimeType('text/plain; charset=UTF-8')
 //alert({ message: "Processing..." });
},
success: function (data) 
{ alert('Wga!'); 
 },
 plete: function (data) {
 alert('close');                                  
 },
error: function (jqXHR,textStatus) 
{ alert("whoops");    }