Как подгрузить HTML-код из файла силами JavaScript на web-страницу через объект XMLHttpRequest?

Оглавление

Вводные данные

Есть два файла на сервере:

  • index.html
  • text.html

Файл index.html обрабатывается силами web-сервера и автоматически загружается в браузер пользователя при обращении к сайту (главной странице).

Файл index.html имеет классическую разметку документа:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Документ</title>
</head>
<body>
</body>
</html>
Пустой HTML-документ | Базовая разметка
Пустой HTML-документ | Базовая разметка

Это «пустая» HTML-страница со своим уникальным адресом. На странице визуально нет ничего. Просто белый лист.

Задача

Необходимо на страницу index.html подключить HTML-разметку из файла text.html, но так чтобы файл text.html содержал только HTML-элементы <h1> и <p>. То есть мы хотим подгрузить только уникальную информацию на страницу без «лишних» мета-данных.

Также мы хотим сделать эту загрузку в фоне, без перезагрузки страницы index.html. То есть пользователь не увидит в адресной строке браузера другого адреса. Перезагрузки страницы не будет.

Файл text.html имеет разметку:

<h1>Содержимое файла «text.html»</h1>
<p>Меня зовут ТЕКСТ АБЗАЦЕВИЧ. Я пришёл из файла «text.html». Я живу в HTML-элементе «p».</p>
Содержимое файла text.html
Содержимое файла text.html

ВНИМАНИЕ! Запросы к серверу мы будем делать ТОЛЬКО через работающий локально веб-сервер. Ознакомьтесь с протоколом CORS и стандартом Fetch. Локальный запуск файла index.html в браузере не приведёт к работающему результату. Используйте бесплатный продукт «OpenServer» для своих тестов.

Предпосылки. Зачем это нужно?

Главная идея задачи — это создание шаблонов генерации документов силами JavaScript, при помощи которых можно лучше управлять визуальным содержимым сайта.

Каждая отдельная страница сайта перестаёт быть статичной (уже собранной). В результате, мы разделяем потенциальную страницу на части. Например:

  • Один документ отвечает за шапку сайта
  • Другой за подвал
  • Третий за основное содержимое
  • Четвёртый за боковые панели
  • Пятый за рекламные баннеры
  • Шестой за галерею фотографий
  • Седьмой за контактную информацию
  • и т. п..

Решение задачи

Для начала подключим на страницу index.html файл со скриптом, который будет называться gettext.js.

В файле index.html внутри элемента <head> поместим элемент <script> с атрибутом src и его значением gettext.js

<script src=«gettext.js»></script>

Подключение файла скрипта на HTML-страницу
Подключение файла скрипта на HTML-страницу

Для решения задачи мы будем использовать объект XMLHttpRequest. Стандарт XMLHttpRequest определяет API-интерфейс, который предоставляет клиенту функциональные возможности по сценарию для передачи данных между клиентом и сервером.

Логика работы такая:

  1. Посылаем запрос на сервер.
  2. Дожидаемся ответа. Ловим содержимое файла.
  3. Вносим нужные изменения в документ.

Отредактируем файл gettext.js

var inBody = function(){                        // Создаём анонимную функцию. Помещаем её в переменную «inBody»
    var xhr = new XMLHttpRequest()  // Создаём локальную переменную XHR, которая будет объектом XMLHttpRequest
    xhr.open(‘GET’, ‘text.html’)             // Задаём метод запроса и URL  запроса
    xhr.onload = function(){                  // Используем обработчик событий onload, чтобы поймать ответ сервера XMLHttpRequest
        console.log(xhr.response)           // Выводим в консоль содержимое ответа сервера. Это строка!
        document.body.innerHTML = xhr.response  // Содержимое ответа, помещаем внутрь элемент «body» 
    }
    xhr.send()  // Инициирует запрос. Посылаем запрос на сервер.
}
inBody()    // Запускаем выполнение функции получения содержимого файла
Объект XMLHttpRequest | Получение HTML-разметки из файла
Объект XMLHttpRequest | Получение HTML-разметки из файла

Логика работы объекта XMLHttpRequest

В первой строке мы создаём анонимную функцию и помещаем её в переменную «inBody«. Название переменной описывает решаемую задачу — дословно «вТело«. То есть результатом выполнения этой функции будет интеграция содержимого файла text.html внутрь элемента <body> загруженной странице index.html на клиенте (в браузере)

Со второй строки начинается тело функции. С помощью конструктора объектов мы создаём новый объект XMLHttpRequest и помещаем его в локальную переменную «xhr«. Название переменной означает сокращённую запись от первых трёх букв — XMLHttpRequest (XHR). Т.к. область видимости ограничена родительской функцией, то можно использовать подобное название без опасений. В рабочих проектах не рекомендую использовать глобальные переменные с именем XHR, т. к. на практике такое имя применяется в основном к объектам XMLHttpRequest.

Третья строка запускает метод open() объекта XMLHttpRequest. В этом методе задаётся HTTP-метод запроса и URL-адрес запроса. В нашем случае мы хотим получить содержимое файла по адресу «text.html», который находится в той же директории, что и загруженный в браузер index.html. Получать содержимое мы будем методом «GET» протокола HTTP.

Четвёртая строка описывает логику работы обработчика события onload. Пользовательский агент ДОЛЖЕН отправить событие load, когда реализация DOM завершит загрузку ресурса (такого как документ) и любых зависимых ресурсов (таких как изображения, таблицы стилей или сценарии). То есть обработчиком события onload мы ловим срабатывание типа события load и полученные ресурсы мы достаём при помощи атрибута ответа response объекта XMLHttpRequest.

Пятой строкой мы выводим в консоль результат ответа сервера. Она необходима для разработки. Она не обязательна. ВНИМАНИЕ! Содержимое ответа по-умолчанию имеет тип данных — string (строка). Это стандарт клиент-серверного взаимодействия. Все данные передаются по сети в виде «строковых данных». Так всегда происходит — это норма. Если вы точно знаете какой тип данных придёт в ответе, тогда вы можете воспользоваться атрибутом ответа responseType и в этом случае содержимое ответа будет одним из:

  • пустая строка (по умолчанию),
  • arraybuffer
  • blob
  • document
  • json
  • text

В шестой строке мы присваиваем элементу <body> внутренне содержимое пришедшее из файла на сервере. Это содержимое будет заключено между открывающим <body> и закрывающим </body>. XMLHttpRequest имеет связанный ответ response.

Восьмая строка инициирует запрос на сервер методом send() и отправляет его.

На десятой строке мы вызываем функцию «inBody»

Результат работы

Страница с результатом работы и инструментами разработчика
Страница с результатом работы и инструментами разработчика

Мы видим итоговую страницу с нужным нам содержимым. На favicon не обращаем внимания т. к. браузер Chrome вдруг решил его поискать.

Вкладка имеет название «Документ», которое пришло из элемента <title>.

title в разметке
title в разметке
title на вкладке
title на вкладке

Главная страница нашего «воображаемого» сайта http://getinnerofpage/ содержит информацию, пришедшую из другого файла.

Главная страница сайта с новыми данными из другого документа
Главная страница сайта с новыми данными из другого документа

Разметка итогового документа после выполнения запроса к серверу. Браузер «переварил» строковые данные и преобразовал их в HTML-разметку.

Итоговая разметка после загрузки данных
Итоговая разметка после загрузки данных


В инструментах разработчика на вкладке Network мы видим последовательность загрузки данных для главной страницы сайта

Этапы загрузки главной страницы сайта
Этапы загрузки главной страницы сайта

Сперва браузер запросил HTML-документ главной страницы сайта. Статус 200 — ОК. Потом после разбора разметки браузер загрузил файл со скриптом. Статус 200 — ОК. После этого браузер начал синхронно обрабатывать выполнение инструкций файла скрипта. На восьмой строчке выполнения файла gettext.js мы видим обращение к файлу text.html

Заголовки запроса к серверу
Заголовки запроса к серверу

Статус 200 — ОК означает успешную подачу запроса — запрашиваемые ресурсы имеются на сервере.

Заголовки ответа сервера
Заголовки ответа сервера

В ответе сервера браузер уже понимает пришедшие данные и подсвечивает HTML-синтаксис, указывая на элементы <h1> и <p>. То есть браузер уже сам разобрал пришедший тип данных string и подсветил разработчику открывающиеся и закрывающиеся элементы.

Важно обратить внимание, что на подгрузку данных «в фоне» потребовалось некоторое время. В реальных проектах нужно учитывать эту особенность и правильно распределять зависимости последовательностей отдачи содержимого пользователю.

Может оказаться так, что при формировании финансового графика часть данных не успеет прийти вовремя — это исказит трактование данных из отчёта и навредит бизнесу из-за ошибки вычислений. Будьте внимательны! В таких случаях уместно использовать объект Promise.

Полезные ссылки

Стандарт XMLHttpRequest на русском языке — https://efim360.ru/xmlhttprequest/

Стандарт XMLHttpRequest на английском языке (официальная документация) — https://xhr.spec.whatwg.org

Редактор кода Visual Studio Codehttps://code.visualstudio.com

Поделись записью