Receiving binary data using enyo.Ajax

Question

I am trying to download a image, which is nothing but a chunk of binary data, using imagelink. For downloading i am using enyo.Ajax module. It is giving back an warning : "Ajax request set to handleAs JSON but data was not in JSON format " . following is what i have implemented till now.

enyo.kind({
name:"enyo.sample.ajaxapp",
components:[
    {kind:"onyx.Input",name:"urlinput", placeholder:"Input URL",classes:"input"},
    {kind:"onyx.Button",name:"download",ontap:"fetch",classes:"button",content:"Fetch"},
    {kind:"enyo.Control",name:"image",tag:"img",classes:"image"}
],
fetch:function(inSender,inEvent){
    var ajax= new enyo.Ajax({
        url:this.$.urlinput.getValue(),
        handleAs:'blob'
    });
    ajax.go();
    ajax.responseType='blob';
    ajax.response(this,"processResponse");
    ajax.error(this,"errorResponse");
},
processResponse:function(inSender,inResponse){
    var img=this.$.image;
    var blob=inResponse;
    //var data=window.URL.createObjectURL(blob);
    img.setSrc(blob);
},
errorResponse:function(inSender,inResponse){
    console.log("error occured");
}
});

I wants to know whether is it not possible to get data apart from json/text/xml? If not, then how can i modify my code to get it downloaded. By default all the data received as JSON, so i am setting handleAs to bolb while creating ajax object. Do i need to change contentType or something else.

Answer 1

I don't think Ajax is the best way to request image data. You have (at least) two solutions:

1. Set the src attribute on an <img> tag and use onload to know when the resource was downloaded.
2. Base 64 encode the image from the server and set the src as the encoded data plus the appropriate header info.

See this question for more details: Asynchronously load images with jQuery