Использование HTTP-сервиса для создания "фронтенда" HTML/CSS/jQuery. Продолжение

В предыдущей части я описал шаблон, который формирует начальную веб-страницу, через которую можно отправить данные из поля input в конфигурацию через ajax и получить ответ без перезагрузки страницы.

Кроме текстового содержимого можно выводить изображения и двоичные файлы для скачивания. Для этого создадим еще один шаблон URL src с двумя методами GET и POST и обработчик к нему. В модуль менеджера обработки включим  функцию для получения изображений:

 

Новый шаблон URL и функции

Модуль HTTP-сервиса

Функция srcПолучить(Запрос)
Ответ = Новый HTTPСервисОтвет(200);
Если Запрос.ПараметрыURL["BIN"]="1" Тогда
Ответ.УстановитьТелоИзДвоичныхДанных(Обработки.HTTP_ОбработкаСервиса.ПолучитьДвоичныеДанные(Запрос.ПараметрыURL["ID_SRC"],Ложь));
Иначе
Ответ.УстановитьТелоИзСтроки(Обработки.HTTP_ОбработкаСервиса.ПолучитьДвоичныеДанные(Запрос.ПараметрыURL["ID_SRC"],Истина));
КонецЕсли;
Возврат Ответ;
КонецФункции

Модуль менеджера обработки HTTP_ОбработкаСервиса

Функция ПолучитьДвоичныеДанные(Идентификатор,Base64=Ложь) Экспорт
Если Base64 Тогда
возврат Base64Строка(БиблиотекаКартинок[Идентификатор].ПолучитьДвоичныеДанные());
Иначе
возврат БиблиотекаКартинок[Идентификатор].ПолучитьДвоичныеДанные();
КонецЕсли;
КонецФункции

Здесь используется сложный шаблон URL чтобы передать два параметра — формат получения картинки (двоичный или строкой base64) и имя картинки в библиотеке картинок.

Включим в конфигурацию две общие картинки МояКартинка1 и МояКартинка2.

Дополним текст HTML начальной страницы "Получить картинку" и изменим макет JS, добавив два фрагмента:

<!-- Статическая картинка при загрузке страницы-->
<div><img src="src/1/МояКартинка1"></div>


<!-- Кнопка и область для интерактивной загрузки изображения-->
<button type="submit"
id="ImgButton"
style="top: 8px; left: 0px; height: 21px; width: 150px;"
_onclick="GetImage('МояКартинка2')">
Получить картинку
</button>
<div id="content_img">

</div>

$('img').each(function(i,elem) {
$(elem).attr('src',cur_url+"/"+$(elem).attr('src'))
});

function GetImage(img_name)
{
$.ajax({
type: "POST",
url: cur_url+"/src/2/"+img_name,
cache: false,
success: function(res){
$("#content_img").html("<img src='data:image/png;base64,"+res+"'>");
}
});
}

Изменять атрибут src на абсолютный необходимо в случае, если вы использовали для хранения макет "HTML Документ", так как при вызове метода ПолучитьТекст() 1С подставляет в заголовок страницы фиксированный абсолютный адрес (что-то вроде <base href=»v8config://811089b6-4d46-4837-8d19-b992f162542f/mdobject/id07b27b2d-6393-47c9-8641-307eadff3798«).

Перезапускаем  веб-сервер и обновим страницу. При загрузке сразу же отобразится изображение МояКартинка1. При нажатии кнопки "Получить картинку" зарузится МояКартинка2, без полной загрузки страницы. Хочу обратить внимание, что вторая картинка приходит с сервера в виде Base64-строки. Таким способом можно в качестве результата возвращать сразу несколько значений в формате JSON или XML, например название, цену, количество и изображение товара (см. ajax-запрос из первой части)

Для отправки файла из браузера на сервер также будем использовать формат base64.

Добавим следующий текст HTML и функцию JavaScript.

<div>
<input type="file" id="file">
<button
<div id="status"></div>
</div>

function SendFile()
{
var reader = new FileReader();
reader.readAsDataURL($("#file")[0].files[0]);
reader.onload = function () {

$.ajax({
type: "POST",
url: cur_url+"/ajax",
data: JSON.stringify(
{action: "SendFile",
name: $("#file")[0].files[0].name,
file: reader.result.split('base64,')[1]
}),
cache: false,
success: function(html){
$("#status").html(html);
}
});
};
}

И изменим созданную в первой части функцию в модуле менеджера обработки:

Функция ОбработатьЗапросAjax(СтруктураJSON) Экспорт
Если СтруктураJSON.action="SendFile" Тогда
Попытка
ДД=Base64Значение(СтруктураJSON.file);
ДД.Записать("D:"+СтруктураJSON.name);
Контент="<font color='green'>Файл успешно Принят</font>";
Исключение
Контент="<font color='red'>"+ОписаниеОшибки()+"</font>";
КонецПопытки;
Иначе
Контент="Вы ввели <b>"+
СтруктураJSON.t+
"</b>";
КонецЕсли;
возврат Контент;
КонецФункции

Теперь функция ОбработатьЗапросAJAX() будет обрабатывать данные и возвращать различный результат в зависимости от значения свойства action. В этом примере для простоты файл записывается из двоичных данных на диск. Однако можно использовать, например, процедура БСП РаботаСФайлами.ДобавитьФайл() для записи файла в информационную базу.

Заключение.

Описанный вариант использования HTTP-сервиса можно использовать для простых задач, например, заполнение анкет и отправка файла с мобильного устройства для обработки, вывод какого-нибудь отчета/диаграммы на большой монитор с обновлением через определенный интервал и т.п. Более сложные веб-приложения лучше реализовать другими средствами, а http-сервис использовать только для обмена