При работе с web-формами генерация содержимого страниц без перезагрузки с использованием технологии AJAX удобна и широко используется. Как быть, если требуется сохранить результат динамически сформированной страницы на локальный компьютер. Конечно, можно выделить нужное, “скопипастить” и сохранить, например в Word. Однако, для удобства пользователя можно предусмотреть возможность получения файла с данными с сервера (экспорт в документ Word, например). Задачу формирования документа в нужном формате пока пропустим (для эксперимента можно воспользоваться “болванкой” test.doc, например) и сразу перейдем к сохранению файла. Однако, не будем забывать, что файл должен генерироваться на основе данных формы и передаваться они будут методом POST (у GET-метода имеются существенные ограничения на длину запроса, что для формирования документов может быть критично)

Подводные камни Ajax-сохранения файла.

Особенность скачивания файлов с использованием Ajax-технологии в том, что “по умолчанию” файл, отдаваемый сервером, попадает туда, откуда был сделан запрос - в JavaScript. То есть после отправки запроса на сервер, браузер, получая ответ, не предлагает “стандартно” сохранить или открыть файл, продолжает выполнение заданного скрипта.

Как скачать файл Ajax-ом?

Итак, если сформулировать задачу более точно, то требуется отправить POST-запрос на сервер и сохранить полученный файл без перезагрузки страницы. Причем, учитывая информацию предыдущего параграфа, отправка запроса должна быть из “реальной” формы и производиться стандартными средствами браузера.

Вариант 0: отправляем данные AJAX, методом POST. Однако, обратно получаем не сам файл, а условный “ключ”, к которому привязываем специально созданный на сервере “промежуточный” файл.  Теперь переход по ссылке с нужным ключом и позволит сохранить нужный файл.

Вариант 1: динамически создаем нужную форму, размещаем в ней нужные поля и отправляем на сервер. Ответ получаем в виде окошка браузера с предложением открыть/сохранить файл.

Вариант 2 очень похож на предыдущий. С мааленьким изменением - всё действо происходит в отдельном IFRAME-элементе, который также формируется динамически. Делается это на случай, если браузер вместо попытки сохранить файл решит уйти с предыдущей страницы с заполненными данными.. В этом случае переход будет осуществлен во внутреннем документе, основная же страница перезагружена не будет.

Если быть более точным, то отправка и сохранение файла “не совсем AJAX” ( совсем не AJAX). Однако, без перезагрузки страницы.

AJAX скачать файл - подборка ссылок:
http://habrahabr.ru/blogs/personal/66772/ - вариант с сохранением временного файла
http://code.msdn.microsoft.com/AjaxFileDownload
http://www.filamentgroup.com/lab/jquery_plugin_for_requesting_ajax_like_file_downloads/

AJAX-загрузка файлов:

http://habrahabr.ru/blogs/jquery/50223/
http://vremenno.net/html-css/file-uploaders-overview/

Метки: ajax, javascript, js

Опубликовано Понедельник, Декабрь 6, 2010 в 01:09 в следующих категориях: Без рубрики. Вы можете подписаться на комментарии к этому сообщению через RSS 2.0. Вы можете добавить комментарий, или trackback со своего сайта.