jQuery/Ajax to show Save As dialog for downloading file sent from servlet

Question

I have read many questions/anwsers in the site regarding this issue and not sure any one of them can solve my problem. Below is how my application supposed to work:

1. The page will show a list of files that available on the server that have been downloaded before.
2. The page will also have a button when clicked will send a request to the servlet that will collect data on the server and save it as the zip file on a predefined directory. The servlet than reads the files and send it back to the client as a binary stream with the following response content type and header information: content-type = application/octet-stream header=content-Disposition, attachment; filename=... header=content-type, application/x-download
3. The requirement is that the request is asynchronous since the servlet may take a long time to collect the huge a mount of data which may exceed 100 MB.
4. I have to disable the button while the request is in progress and know when the request is completed so that I can send refresh to list to show the new file.

I don't think the solutions using iframe, Window.location.href, or using html form will satisfy my requirements. Please let me know if there is any solution for my problem. Any help is greatly appreciated.

-Tam

Answer 1

As you writed it in your question title, i suggeste that you used a bit of javascript, either JQuery or prototype can do the job.

Since I know more about this last one, i will give some piece of code

here is the process I understand for your case.

First your server send a page with a form. Then the user select a file and click the send button, the page does not reload and use Ajax to do the job then JQuery get the data and send it to your server via Ajax ( request(); ) then The server send back the results, and you can display it displayFilesList();

your_form_id is your form id

submitForm is the name of the function called when your form will be submitted

displayFilesList will be the function called when your server will send back the results this function also expect you to send back the results in a json format

$('#your_form_id').submit(submitForm);

function submitForm()
{
    var data = $('#your_form_id').serializeArray();
    //Code to remove the send button here
    //Code to insert a loading.gif
    request("/your/url", data, displayFilesList);
    return false;
}

function    displayFilesList(jsonResult)
{
    var data = jQuery.parseJSON(jsonResult);
    //Code to display the files list here
    //
}

function    request(url, paramPost, successCallback, errorCallback)
{
    if ((typeof successCallback == 'undefined') || (successCallback == null))
        successCallback = dispSuccess;
    if ((typeof errorCallback == 'undefined') || (errorCallback == null))
        errorCallback = dispError;

    var AjaxUrl = url;

    $.ajax({    
            type: "POST",
            url: AjaxUrl,
            data: paramPost
           }
          ).done( function(msg)
                  {
                       successCallback(msg);
                  }
          ).fail( function(jqXHR, textStatus, errorThrown)
                  {
                       errorCallback(jqXHR, textStatus, errorThrown);
                  }
          );
}

function    dispError(jqXHR, textStatus, errorThrown)
{
    alert(jqXHR.responseText);
}
function    dispSuccess(html)
{
    alert(html);
}