Все что касалось изменения контента на сайте до этой статьи происходило по факту методом "бегства к лучшему" или "вытаскиванием кролика из шляпы", то есть страница просто менялась на другую, мы переходили на новую страничку вот и все... с помощью оператора 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, то есть получается, когда мы подтягиваем текстовый документ, мы можем менять в нем и правила для стилей, Ява, PHP на странице. В общем, для всего того, что может прочитать браузер и с чем он работает. Вот это уже и правда интересно!