AJAX и JavaScript. Загрузка контента без перезагрузки страницы
В данной статье речь пойдет о том, как сделать обновление контента без перезагрузки страницы, используя только JavaScript.
AJAX - инструмент для построения веб-приложений, обменивающихся данными с сервером в фоновом режиме. При этом пользователь получает приложение с динамическим обновлением контента, без перезагрузки всей страницы. Как видно из аббревиатуры, основным элементом AJAX является язык программирования JavaScript. На нем-то мы и реализуем возможность загрузки контента без перезагрузки страницы.
Важно! Для того, чтобы пример работал корректно, необходимо:
1. Все файлы должны быть записаны в кодировке UTF-8.
2. Скрипты должны выполняться на веб-сервере, а не запускаться в браузере, как файл.
Простой пример программного кода на AJAX и JavaScript
Программа загружает на странице контент по выбору пользователя, без перезагрузки страницы полностью.
Содержимое файла index.html.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; Charset=UTF-8">
<script>
function showContent(link) {
var cont = document.getElementById('contentBody');
var loading = document.getElementById('loading');
cont.innerHTML = loading.innerHTML;
var http = createRequestObject();
if( http )
{
http.open('get', link);
http.onreadystatechange = function ()
{
if(http.readyState == 4)
{
cont.innerHTML = http.responseText;
}
}
http.send(null);
}
else
{
document.location = link;
}
}
// создание ajax объекта
function createRequestObject()
{
try { return new XMLHttpRequest() }
catch(e)
{
try { return new ActiveXObject('Msxml2.XMLHTTP') }
catch(e)
{
try { return new ActiveXObject('Microsoft.XMLHTTP') }
catch(e) { return null; }
}
}
}
</script>
</head>
<body>
<p>Какую страницу желаете открыть?</p>
<form>
<input onclick="showContent('page1.html')" type="button" value="Страница 1">
<input onclick="showContent('page2.html')" type="button" value="Страница 2">
</form>
<div id="contentBody">
</div>
<div id="loading" style="display: none">
Идет загрузка...
</div>
</body>
</html>
Рассмотрим принцип работы примера.
1. Функция createRequestObject() создает объект XMLHttpRequest() для браузеров Firefox, Opera и т.п. и его аналог для различных версий браузеров Internet Explorer. Этот объект нужен для передачи данных на сервер и получения от него ответа в фоновом режиме, без перезагрузки страницы.
2. Как видно в теле документа имеются два контейнера - contentBody и loading. В контейнер contentBody загружается непосредственно контент, а контейнер loading содержит контент, который служет заставкой и появляется на время загрузки основного требуемого контента.
3. Функция showContent() выводит контент в основной контейнер contentBody. Делает она это с использованием объекта XMLHttpRequest(). Методом open() осуществляется описание передачи данных на сервер. В качестве параметров указавается тип запроса (у нас - GET) и строка, передаваемая серверу (у нас - URL загружаемой страницы).
4. В силу особенностей объекта XMLHttpRequest(), для получения всего контента требуется дождаться, пока свойство readyState примет значение 4. Как только мы дожидаемся этого - сразу изменяем тело контейнера. Это и указано в функции-обработчике события onreadystatechenge().
5. После открытия запроса его надо отправить на сервер, это делается методом send().
6. Если создать объект XMLHttpRequest() по каким-либо причинам не вышло, то выполняется простая переадресация на указанную страницу, тем самым функция showContent() сохраняет свою работоспособность.
В тексте примере упоминаются ссылки на файлы page1.html и page2.html, которые загружаются в область контента. Они представляют собой простые HTML-страницы или текстовые файлы с контентом.
Скачать исходник: AJAX и JavaScript. Загрузка контента без перезагрузки страницы
Возможно, вам будет интересно
Обработка ошибок в JavaScript. 10 примеров использования конструкции try...catch
AJAX и JavaScript. Загрузка контента без перезагрузки страницы
Youtube несколько видео на странице и стоп проигрывания предыдущего видео.
Понимание синхронного и асинхронного JavaScript с Async/Await
