меню

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


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

Youtube несколько видео на странице и стоп проигрывания предыдущего видео.

Youtube несколько видео на странице. Как сделать остановку предыдущего видео, при запуске следующего? На сайте расположено на одной странице три видео. При включении нужно чтобы другое видео, если запущено , останавливалось. Как это реализовать?

Как исправить ошибку «RangeError: Invalid time value» при вызове метода toISOString даты JavaScript?

В этой статье мы рассмотрим, как исправить ошибку «RangeError: Invalid time value» при вызове toISOString метода даты JavaScript.

Javascript array шпаргалка

Переменные в Javascript позволяют хранить только одни данные за раз. Однако, учитывая, что часто бывает полезно манипулировать большим количеством данных, концепции переменной иногда недостаточно, потому что становится трудно управлять большим количеством различных переменных.

Выделяем текущий пункт меню отдельным стилем на jQuery

Допустим нужно выделить текущий пункт меню отдельным стилем. Иногда, это сделать просто невозможно (в случае Ajax) или сложно из-за структуры меню и тут нам на помощь приходит JavaScript, а точнее jQuery

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

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

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

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

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

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

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