Search code examples
node.jsajaxasynchronousdownloadsynchronous

AJAX, Fetch API, or GET-request via browser — which request technique should be used for a file download?

When we're talking about JS requests, there are three main techniques:

  • AJAX (XMLHttpRequest/XHR, jQuery)
  • Fetch API
  • GET-request via browser, for instance:
const a = document.createElement("a");

a.href = `host?fileName=${fileName}`;

a.download = fileName;

a.click();*/

My questions:

  1. Which request technique should be used for a file download — AJAX, Fetch API, or to delegate it to a browser and trigger a GET-request?

  2. If AJAX/Fetch API is a preferable approach, what is an added value of using this technique for file downloading and uploading scenarios comparing to standard GET-request via browser?

P.S. Originally, this thread contained the same sort of questions but much more vague and abstract. Later, I've elaborated the questions. To keep this thread clean, I've hidden the first version of questions.

Solution

  • Which one of them should be used / is a common practice for file download and upload scenarios?

    Ajax and Fetch are two different API philosophies that allow you to do largely the same thing. Fetch is a much newer design that doesn't quite contain all the features of XMLHttpRequest, but is generally a much cleaner design so that would be my choice.

    It's not entirely clear what you mean by a "synchronous query". A synchronous XMLHttpRequest should never be used as that locks up the browser during the request. I don't know what you mean by your reference a.href = fileURL. If you're assigning the href property of an <a> tag, all that does is set the href property so if some future user or code activates that link, then the URL that the web page will go to will be set to a certain value. There's nothing synchronous about that.

    I see that you've now edited your question to include an a.click(). That does nothing different than window.location = someFileURL. There is nothing synchronous about this. It initiates a download of that URL and lets the user decide what to do with it, based on what's in the headers of the response. If it has certain headers (such as content-disposition), then the user may be prompted to save the download as a file rather than attempt to display it in the browser. This is just one way to trigger a download.

    Is it a common practice to use synchronous queries (e.g. a.href = fileURL) for a file downloading in a modern web app?

    Well, that isn't a synchronous operation and the assignment of the href property doesn't cause any file download so it's hard to tell what you actually mean by that. Do, you instead mean a form post?

    What is an added value of using AJAX/Fetch API for file downloading and uploading scenarios?

    These APIs allow your Javascript to control things. Your Javascript can retrieve data or send data and then act upon the result, all without changing the current page in the browser. You can do things like fetch data to update the current web page or trigger some action on the server - all without changing the current web page.

    You use an XMLHttpRequest or Fetch operation when you want the result to come back to your Javascript so you can do something with that result in your Javascript. You trigger a link or set window.location when you want the browser to process the result entirely on its own (to decide on its own whether to display the content or prompt the user to save in a file based on the headers of the response).