jQuery AjaxDownloader

Contents

• Quick Demo
• Get it
• How it works
• Methods
• Options and defaults values
• Examples
• Server Side
• History
• Comments and Ideas

Quick Demo

Get it

GitHub

View project on GitHub or download the latest release.

npm

npm install gasparesganga-jquery-ajax-downloader

Bower

bower install gasparesganga-jquery-ajax-downloader

CDN

https://cdn.jsdelivr.net/npm/gasparesganga-jquery-ajax-downloader@1.1.0/src/ajaxdownloader.min.js

CDN hosting of this library is possible thanks to jsDelivr. For more details about URL structure please refer to the official documentation.
On the CDN configuration page you can find all the available files and versions of this library, select a specific version, use range or latest version aliasing, join more files in a single request and enable subresource integrity (SRI).

How it works

An HTML form is created and submitted to ad invisible IFrame. You can pass parameters like you would in a regular Ajax request.
The server should answer the request providing a file to download of course.

Methods

The only method provided works like any other Ajax call made with jQuery, thus using the defaults provided with $.ajaxSetup().

$.AjaxDownloader(options)

Performs an ajax-style download

Options and defaults values

data   : $.ajaxSetup()["data"]    // Object
url    : $.ajaxSetup()["url"]     // String

data

Data to send to the server along the request (it acts the same way as jQuery.ajax() data parameter).

url

URL to which the request is sent (it can be a static file to download as well).

Examples

A couple of examples using both a static file and a dynamic request:

Example 1 - Static File

$.AjaxDownloader({
    url  : "./static_file.zip"
});

Example 2 - Dynamic Request

$.AjaxDownloader({
    url  : "./download_manager.php",
    data : {
        param1   : "xxx",
        param2   : "yyy",
        param3   : "zzz"
    }
});

Server Side

Some care should be taken server side too. In my first example I requested a static file and it seemed to work just fine. But what would have happened with a PDF file or any other file format that your browser can actually open?
The solution is easy, just do some server side magic, like sending the right headers. Here is a PHP example to serve a static file forcing a download dialog on the user’s browser:

<?php
    /*
        Do some parameters checks, database data collection, etc. etc. here
    */
    // Force a download dialog on the user's browser:
    $filepath = '/path/to/file.pdf';
    header('Content-Description: File Transfer');
    header('Content-Type: application/octet-stream');
    header('Content-Disposition: attachment; filename="'.basename($filepath).'"');
    header('Content-Transfer-Encoding: binary');
    header('Cache-Control: must-revalidate');
    header('Content-Length: '.filesize($filepath));
    ob_clean();
    flush();
    readfile($filepath);
    exit();
?>

History

12 November 2016 - Version 1.1.0
4 May 2015 - Version 1.0

Comments and Ideas

Want to leave a comment or give me an idea? Send me an or use the comments section below.