http.html

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8" />
  <title>OneScript: HTTP-запросы к бэкенду</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 2rem; max-width: 52rem; }
    .card { border: 1px solid #ddd; border-radius: 8px; padding: 1rem; margin: 1rem 0; }
    label { display: block; margin: .4rem 0; }
    input, textarea { font: inherit; padding: .3rem .5rem; }
    button { font: inherit; padding: .4rem .9rem; margin-top: .5rem; cursor: pointer; }
    pre { background: #f6f8fa; border-radius: 8px; padding: 1rem; white-space: pre-wrap; word-break: break-word; }
    code { background: #f0f0f0; padding: 0 .2rem; border-radius: 3px; }
  </style>
</head>
<body>
  <h2>OneScript: HTTP-запросы к бэкенду</h2>
  <p>
    Код внутри <code>&lt;one-script&gt;</code> создаёт <code>HTTPСоединение</code> и
    <code>HTTPЗапрос</code>, получает ответ и печатает его. В режимах <code>pnpm dev</code> и <code>pnpm demo</code>
    доступен мок-бэкенд: <code>GET /api/demo</code> и <code>POST /api/echo</code>.
    Для своего сервера замените адрес и путь; кросс-доменный сервер должен разрешать CORS.
  </p>

  <div class="card">
    <label>Сервер (можно со схемой или без): <input id="сервер" size="38" /></label>
    <label>Путь для GET: <input id="путь-получить" value="/api/demo" size="28" /></label>
    <button id="получить">Получить (GET)</button>
  </div>

  <div class="card">
    <label>Путь для POST: <input id="путь-отправить" value="/api/echo" size="28" /></label>
    <label>Тело запроса (JSON):<br />
      <textarea id="тело" rows="3" cols="62">{"id": 42, "name": "Тест"}</textarea>
    </label>
    <button id="отправить">Отправить (POST)</button>
  </div>

  <pre id="вывод">Загрузка…</pre>

  <!-- Порт dev-сервера может быть любым: подставляем текущий origin страницы. -->
  <script>document.getElementById("сервер").value = location.origin;</script>
  <script src="/onescript.js"></script>

  <one-script>
    Перем ПолеСервера;
    Перем ПолеПутиПолучить;
    Перем ПолеПутиОтправить;
    Перем ПолеТела;
    Перем ПолеВывода;

    Процедура Показать(Текст)
      ПолеВывода.Текст = Текст;
      Сообщить(Текст);
    КонецПроцедуры

    Функция ПредставлениеОтвета(ОписаниеЗапроса, Ответ)
      Возврат ОписаниеЗапроса + " → " + Ответ.КодСостояния + " (" + Строка(Ответ.Заголовки.Получить("Content-Type")) + ")" + Символ(10) + Символ(10) + Строка(Ответ.ПолучитьТелоКакСтроку());
    КонецФункции

    Процедура СделатьПолучить()
      Попытка
        Соединение = Новый HTTPСоединение(ПолеСервера.Значение);
        Запрос = Новый HTTPЗапрос(ПолеПутиПолучить.Значение);
        Ответ = Соединение.Получить(Запрос);
        Показать(ПредставлениеОтвета("GET " + ПолеСервера.Значение + ПолеПутиПолучить.Значение, Ответ));
      Исключение
        Показать("Ошибка GET: " + ОписаниеОшибки());
      КонецПопытки;
    КонецПроцедуры

    Процедура СделатьОтправить()
      Попытка
        Соединение = Новый HTTPСоединение(ПолеСервера.Значение);
        Запрос = Новый HTTPЗапрос(ПолеПутиОтправить.Значение);
        Запрос.Заголовки.Вставить("Content-Type", "application/json");
        Запрос.УстановитьТелоИзСтроки(ПолеТела.Значение);
        Ответ = Соединение.ОтправитьДляОбработки(Запрос);
        Показать(ПредставлениеОтвета("POST " + ПолеСервера.Значение + ПолеПутиОтправить.Значение, Ответ));
      Исключение
        Показать("Ошибка POST: " + ОписаниеОшибки());
      КонецПопытки;
    КонецПроцедуры

    ПолеСервера = Документ.ПолучитьЭлемент("сервер");
    ПолеПутиПолучить = Документ.ПолучитьЭлемент("путь-получить");
    ПолеПутиОтправить = Документ.ПолучитьЭлемент("путь-отправить");
    ПолеТела = Документ.ПолучитьЭлемент("тело");
    ПолеВывода = Документ.ПолучитьЭлемент("вывод");

    Документ.ПолучитьЭлемент("получить").НаСобытие("Нажатие", "СделатьПолучить()");
    Документ.ПолучитьЭлемент("отправить").НаСобытие("Нажатие", "СделатьОтправить()");

    СделатьПолучить();
  </one-script>
</body>
</html>