Динамическое содержание. Как подключить к страничке файл?

Что сильно напрягает при работе с интерфейсом того или иного сайта? Ну, кого-то дизайн. А ещё есть то, что является основой самой технологии. Каждая страница, когда отдаётся пользователю, представляет собой обычный текст, который невозможно изменить. По этому у HTML есть масса костылей, для того, чтобы сделать страницы более динамичными, чтобы не приходилось каждый раз перезапрашивать страницу. Костыли эти называются фрэймворки. Но можно юзать многие фишки не пользуясь громоздкими фрэймворками.

Для повышения динамики можно включать одни html-странички в другие html-странички. При чём не обычну статичную страничку, а скрипт. При этом можно перехватывать события и в зависимости от событий выводить нужную информацию. Но можно начать с самого банального. А самым простым у нас будет возможность вставить одну страничку в другую страничку. Замечу, что вставляемая страничка не обязательно должна быть статичной, подключаемая страничка может быть результатом генерации скрипта.

Кстати, динамичность может заключаться в проверке вводимых значений без перезагрузки странички. Ведь как стандартно происходит? Заполнили анкетку, нажали на кнопочку «Отправить» и ждем перезагрузки страницы, а там вдруг выясняется, что такой логин существует. И так несколько раз, то логин дублируется, то почта неправильно введена, то пароли не совпадают. Часть этих проблем решается проверкой скриптами на JavaScript, но такие вещи как проверка на существование логина, значительно сложней, не передавать же все значения логинов в скрипт. У меня, в некоторых проектах, несколько сотен пользователей и приближаются к тысяче.

Как подключить к страничке файл

Я рассматриваю подключение файла к уже загруженной страничке. Во-первых, хотелось бы определиться с типом вывода. Перезапрашивать страничку нельзя, по этому перерисовывать контент на страничке мы будем с помощью DOM. Теперь нужно решить каким образом произойдёт включение нужной нам странички.

Раз используется JavaScript, то можно инклюдить контейнер с внешним JavaScript. Но подключение чистого JavaScript кода не желательно из-за того, что это будет одноразовой процедурой, а нас интересует возможность повторного использования контейнера в процессе работы. Достаточно в теле страницы прописать пустой div-контейнер с определенным id.

<div id="inc_html"></div>

Главное, чтобы id контейнеров по всему документу не пересекались. Ведь id уникален в диапазоне всего документа! Кстати, для информативности в контейнер можно поместить какое-либо сообщение. Например фразу: «А сейчас выскочит птичка» или фразу: «Подождите, идёт загрузка». Иногда там помещают картинку, показывающую, что идёт какой-то процесс. В любом случае, желательно как-то обозначить, что в этом месте будет выводиться включаемый контент.

Подключать файл я рекомендую с помощью объекта XMLHTTP для Internet Explorer и объекта XMLHttpRequest для остальных браузеров типа Mozilla Firefox, Chrom, Opera и прочих. Этот объект будет ипользоваться для скачивания файла из сети и вывода его содержимого в созданный ранее DIV-слой. Создать объект можно двумя методами. Мягкий и короткий. Короткий подключается в одну строчку и используется в таких фрэймворках как jQwery, Ajaks, Dojo, Yahoo UI и Prototype. А мягкий вариант подключения использует кучу исключений.

Я рекомендую мягкий тип подключения:

var xmlhttp;
  try {
    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (e) {
    try {
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (E) {
      xmlhttp = false;
    }
  }
  if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
    xmlhttp = new XMLHttpRequest();
  }

Этот код создаёт переменную-объект с названием xmlhttp. С её помощью можно скачивать текстовые файлы и манипулировать их содержимым по своему усмотрению. В нашем же случае, необходимо скачать текстовый файл и вывести его содержимое внутрь созданного DIV-слоя.

Для скачивания файлов используется функция open, внутрь которой передаётся три параметра. Вызов происходит следующим образом:

xmlhttp.open(method, URL, async[, userName, password])

В функцию передаются пять параметров:

• method — метод запроса. Запросы бывают: DELETE, GET, HEAD, OPTIONS, POST, PUT.
• URL — адрес запрашиваемой странички.
• async — указание на синхронное или асинхронное скачивание.
• userName — имя пользователя (необязательный параметр).
• password — пароль пользователя (необязательный параметр).

После создания запроса с помощью функуции open, его необходимо отправить. Отправляется запрос с помощью функции send. Через эту функцию передаются параметры запроса. Например, у запроса GET, нету параметров, по этому мы будем передавать в запрос null. Выглядеть это будет так:

xmlhttp.send(null)

О работе с POST-запросами я напишу позже. Они будут использоваться для работы с Яндекс.API. Правда сие произойдёт не скоро, но я обязательно поделюсь своим опытом, после проведения серии экспериментов.

Кстати, хочу обратить внимание на два типа подключений, про которые я не упомянул при описании функции open. Бывает синхронное и асинхронное скачивание. Если использовать синхронное подключение, то в месте вызова функции send произойдёт остановка выполнения JavaScript до тех пор пока не скачается содерживое запрошенного файла. Синхронное подключение используется в том случае если данные из файла необходимо скачать до полного отображения страницы. Но таких случаев довольно мало. По этому я бы рекомендовал использовать асинхронное подключение. При асинхронном подключении выполнение JavaScript не останавливается, по этому страничка отобразится полностью, а текст запрашиваемой страницы подгрузится чуть позже. Так как мы используем для отображения DOM, то вывести кусок текста можно даже после того как страничка полностью отобразится на экране пользователя.

И так, плавно подкрались к выводу текста внутрь нашего div-слоя. Доступ к содержимому контейнера осуществляется с помощью следующей конструкции:

document.getElementById('inc_html').innerHTML = 'текст';

Эта конструкция позволяет заменить содержимое контейнера, с идентификатором inc_html, на произвольный текст. Текст может включать любые теги, вплоть до таблиц и картинок.

Теперь подойдём к практической реализации намеченной задумки. Замечу, что на локальном компьютере подобные игры не всегда срабатывают. Для тестирования этих примеров рекомендую использовать полноценный сервер.

Разместим в корне сервера два файла: out.html и in.txt. Внутрь файла out.html поместим следующий код:

<html>
<head>
<meta charset="windows-1251" />
</head>
<body>

<p>Hello</p>
<div id="inc_html"><p><b>Сейчас вылетет птичка!!!</b></p></div>
<p>Если птичка не вылетела, значит у вас не поддерживается JavaScript.</p>

<script type="text/javascript">
var xmlhttp;
try {
  xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
  try {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (E) {
    xmlhttp = false;
  }
}
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
  xmlhttp = new XMLHttpRequest();
}

xmlhttp.open('GET', '/in.txt', false);
xmlhttp.send(null);
if (xmlhttp.status == 200) {
  document.getElementById('inc_html').innerHTML = xmlhttp.responseText;
}
</script>
</body>
</html>

А в файл in.txt впечатаем любой текст, например:

<b>Ping</b> <i>pong</i>

В результате выполнения этого примера будет выведено следующее:

Как мы видим, содержимое одного файла отобразилось внутри другого файла.

Примеры использования

Я бы даже сказал, что не примеры использования, а какие выгоды.

На своём блоге я использую этот метод для вывода комментариев к постам. Дело в том, что по моему блогу очень часто ходят роботы, а если отдавать роботу страничку в которой есть комментарии, то придётся выполнить запрос к базе данных, обработать полученный результат, сформировать табличку с комментариями и выкинуть её роботу. Это сильно нагружает сервер, дело в том, что по моему блогу в течении дня проходится масса роботов, которые полностью высасывают его содержимое. Очень много роботов явно не поисковых. По этому нагрузка на базу данных была довольно большая. Вот я и выкинул комментарии в отдельно формируемый скрипт. Результаты такого подхода были очень интересны.

Во-первых, блог стал реже трогаться роботами. Видимо странички стали статическими и их никто не хотел переиндексировать. Во-вторых, нагрузка на сервер немного упала при той-же загрузке (первую неделю никто из роботов не чухнул в чём подвох). В-третьих, то чего я и добивался, уменьшилось количество запросов к базе данных.

Сейчас подумываю сделать для пользователей подписку на комментарии через RSS. Не знаю насколько это будет удобно, но технологически это сделать очень просто.

Тэги: программирование

Отредактировано:2020-09-28 08:46:45