Все ленты — последние статьи

AJAX и JavaScript. Загрузка контента без перезагрузки страницы

 

AJAX и JavaScript. Загрузка контента без перезагрузки страницы

Автор: Михаил Пестречихин
Источник: http://www.codething.ru/ajax_js.php

В данной статье речь пойдет о том, как сделать обновление контента без перезагрузки страницы, используя только JavaScript.

AJAX — инструмент для построения веб-приложений, обменивающихся данными с сервером в фоновом режиме. При этом пользователь получает приложение с динамическим обновлением контента, без перезагрузки всей страницы. Как видно из аббревиатуры, основным элементом AJAX является язык программирования JavaScript. На нем-то мы и реализуем возможность загрузки контента без перезагрузки страницы.

 

Важно!
Для того, чтобы пример работал корректно, необходимо:
1. Все файлы должны быть записаны в кодировке UTF-8.
2. Скрипты должны выполняться на веб-сервере, а не запускаться в браузере, как файл.

Простой пример программного кода на AJAX и JavaScript

Программа загружает на странице контент по выбору пользователя, без перезагрузки всей страницы полностью.

Содержимое файла index.html.

 
  1. <html>  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; Charset=UTF-8">  
  4. <script>  
  5.     function showContent(link) {  
  6.   
  7.         var cont = document.getElementById('contentBody');  
  8.         var loading = document.getElementById('loading');  
  9.   
  10.         cont.innerHTML = loading.innerHTML;  
  11.   
  12.         var http = createRequestObject();  
  13.         if( http )   
  14.         {  
  15.             http.open('get', link);  
  16.             http.onreadystatechange = function ()   
  17.             {  
  18.                 if(http.readyState == 4)   
  19.                 {  
  20.                     cont.innerHTML = http.responseText;  
  21.                 }  
  22.             }  
  23.             http.send(null);      
  24.         }  
  25.         else   
  26.         {  
  27.             document.location = link;  
  28.         }  
  29.     }  
  30.   
  31.     // создание ajax объекта  
  32.     function createRequestObject()   
  33.     {  
  34.         try { return new XMLHttpRequest() }  
  35.         catch(e)   
  36.         {  
  37.             try { return new ActiveXObject('Msxml2.XMLHTTP') }  
  38.             catch(e)   
  39.             {  
  40.                 try { return new ActiveXObject('Microsoft.XMLHTTP') }  
  41.                 catch(e) { return null; }  
  42.             }  
  43.         }  
  44.     }  
  45. </script>  
  46. </head>  
  47.   
  48. <body>  
  49.   
  50.     <p>Какую страницу желаете открыть?</p>  
  51.       
  52.     <form>  
  53.         <input onclick="showContent('page1.html')" type="button" value="Страница 1">  
  54.         <input onclick="showContent('page2.html')" type="button" value="Страница 2">  
  55.     </form>  
  56.       
  57.     <div id="contentBody">  
  58.     </div>  
  59.   
  60.     <div id="loading" style="display: none">  
  61.     Идет загрузка…  
  62.     </div>  
  63.       
  64. </body>  
  65. </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-страницы или текстовые файлы с контентом.

Скачать исходные файлы примера (2,8 кб):
http://codething.ru/files/ajax_js_ex.zip