Why can't trash download a file using an ajax request?

Question

In our application, we need to implement the following scenario:

• Request sent from client
• The server processes the request and generates a file
• The server returns the file in response
• The client browser displays a pop-up file download dialog and allows the user to download the file

Our application is an ajax-based application, so it would be very easy and convenient for us to send an ajax request (for example, using the jquery.ajax() function).

But after googilng it turned out that downloading files is possible only when using a POST request without an ajax (as described in this popular SO stream ). Therefore, we needed to implement a uglier and more complex solution, which required the construction of an HTML form structure with nested hidden fields.

Can someone explain in simple words why these ajax requests cannot be used to download a file? What kind of mechanics?

Answer 1

This is not about AJAX. Of course, you can download the file from AJAX. However, the file will be stored in memory, i.e. You cannot save the file to disk. This is because JavaScript cannot interact with the disk. This will be a serious security issue and is blocked in all major browsers.

Answer 2

This can be done using a new HTML5 feature called Blob. There is a FileSaver.js library that can be used as a wrapper on top of this function.

Answer 3

The same question I asked myself two days ago. There was a project with a client written using ExtJS, and the server-side implementation was on ASP.Net. I need to translate the server side into Java. There was a function to download the XML file that the server generates after an Ajax request from the client. We all know that it is not possible to download a file after an Ajax request, just to save it in memory. But ... in the original application browser, a regular dialog is displayed with open options, saving and canceling the download. ASP.Net somehow changed the standard behavior ... It took me two days to prove again - there is no way to download a file on demand in the usual way ... ASP.Net is the only exception ... Here is the ASP.Net code

 public static void WriteFileToResponse(byte[] fileData, string fileName) { var response = HttpContext.Current.Response; var returnFilename = Path.GetFileName(fileName); var headerValue = String.Format("attachment; filename={0}", HttpUtility.UrlPathEncode( String.IsNullOrEmpty(returnFilename) ? "attachment" : returnFilename)); response.AddHeader("content-disposition", headerValue); response.ContentType = "application/octet-stream"; response.AddHeader("Pragma", "public"); var utf8 = Encoding.UTF8; response.Charset = utf8.HeaderName; response.ContentEncoding = utf8; response.Flush(); response.BinaryWrite(fileData); response.Flush(); response.Close(); } 

This method was called from WebMethod, which in turn was called from ExtJS.Ajax.request. This is magic. What for me, I ended up with a servlet and a hidden iframe ...

Answer 4

you can do this using a hidden iframe on the download page

just set the src of the hidden ifame in your answer to ajax success and your task is done ...

  $.ajax({ type: 'GET', url: './page.php', data: $("#myform").serialize(), success: function (data) { $("#middle").attr('src','url'); }, });