меню

В данной статье речь пойдет о том, как сделать обновление контента без перезагрузки страницы, используя только 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. Загрузка контента без перезагрузки страницы


Возможно, вам будет интересно

Использование HTML5-элемента audio в JavaScript

Благодаря тегу audio появившемуся в HTML5, можно очень просто добавлять звук на сайт. В javascript работать со звуком позволяет соответствующий класс Audio, а проверить поддержку формата звукового файла в браузере - метод canPlayType

Вывод последнего дня текущего месяца на Javascript

Попалась интересная задачка, на баннере нужно было выводить «Акция действует до (тут последний день месяца)», решил сделать это на Javascript, ну чтоб не лазить каждый раз в код для правок, вот что получилось

Семь необходимых операторов RxJS

Как front-end разработчик вы знаете, что управление асинхронными данными - это не легкая задача. Иногда кажется, что нужна целая команда клоунов, чтобы держать все эти мячи в воздухе! Но в этом и заключается сила библиотеки RxJS. Она помогает легко манипулировать потоками асинхронных данных.

Видео самоучитель jQuery от Envato

Видео курс от компании Envato, Видео курс на английском языке. jQuery - это библиотека, которая значительно упрощает и ускоряет написание JavaScript кода. Видео курс самоучителя jQuery позволит Вам научится работать на нем. Пройдя данный курс Вы научитесь основам работы с jQuery!

Оформление заявки

Документы на создание сайта

Изучите наше коммерческое предложение, заполните БРИФ и отправьте его на почту maxidebox@list.ru. Изучив все пожелания из БРИФ-а, обратным ответом оповестим Вас по стоимости разработке, ответим на вопросы.

КП на создание сайта Коммерческое предложение на созданеи сайта

Мы берем на себя ответственность за все стадии работы и полностью избавляем клиентов от забот и необходимости вникать в тонкости.

Скачать БРИФ (акета) на создание сайта Скачать БРИФ (акета) на создание сайта

Зополните у БРИФ-а все необходимые поля. Сделайте краткое описание к каждому из пунктов анкеты, привидите примеры в соответсвующий пунктах - это позволит лучше понять Ваши ожидания и требования к сайту