Все что касалось изменения контента на сайте до этой статьи происходило по факту методом "бегства к лучшему" или "вытаскиванием кролика из шляпы", то есть страница просто менялась на другую, мы переходили на новую страничку вот и все... с помощью оператора document.location.href.
Или визуализацией в виде вывода текста из скрытых источников, то есть подменяли стиль на видимый (style.display = "none" заменить на style.display = "block"), также с помощью оператора задержки по времени setInterval , да мало ли еще что? Тут главное, что текст уже был на странице!
Так вот, работа с AJAX дает новые возможности, в виде организации дополнительного запроса к серверу, потом проверки есть ли тот самый контент, что мы ищем. Если да, то получение информации от сервера и вывод контента на страницу. При этом страница остается та же, а контент расширяется за счет динамического блока, который и выводит контент на эту же страницу.
Ок, давайте по порядку еще раз что происходит и что делает этот самый JS и AJAX
1. На веб-странице происходит событие (страница загружена, кнопка нажата, прокрутка)
2. Объект XMLHttpRequest создается JavaScript
3. Объект XMLHttpRequest отправляет запрос на веб-сервер
4. Сервер обрабатывает запрос
5. Сервер отправляет ответ обратно на веб-страницу
6. Ответ читается JavaScript
7. Правильное действие (например, обновление страницы) выполняется JavaScript.
Понять, что ответ получен полностью, можно когда значение readyState становится XMLHttpRequest.DONE (4), а значение status становится 200 ("OK").
Примерно так, хотя конечно без тонкостей. Еще для представления что же и как приведу картинку.
Все теперь переходу непосредственно к примеру и коду, который работает над этим примером. То есть изначально контента нет на странице, а потом он вызывается из текстового файла и подгружается в тело страницы.
Пример подгружаемого контента на страницу
Собственно все что я писал до этого и можно уже считать нашей статической страницей, которая первоначально загрузилась.
Это наш контент страницы, он загрузился сразу
Здесь будем подгружать контент с сервера по запросу
Смотреть код
Ну и пока на этом все, постепенно статья будет обрастать новыми подробностями.
А вы уже сами поняли, что по факту можно в корне менять или добавлять что-то новое на страничку с помощью AJAX при этом принципиально по-другому, без скрытых спойлеров, без подмены стилей, без задержки по времени вывода...
Вау, а вы заметили и еще кое что? Дело в том, что когда вы подгрузили текст из файла на сервере, то в нем был зашит еще и стиль для H2, то есть получается, когда мы подтягиваем текстовый документ, мы можем менять в нем и правила для стилей CSS на HTML страничках. В общем, для всего того, что может прочитать браузер и с чем он работает. Вот это уже и правда интересно!