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

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

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

Простой пример программного кода на 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) {
  7. var cont = document.getElementById('contentBody');
  8. var loading = document.getElementById('loading');
  10. cont.innerHTML = loading.innerHTML;
  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. }
  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>
  48. <body>
  50. <p>Какую страницу желаете открыть?</p>
  52. <form>
  53. <input onclick="showContent('page1.html')" type="button" value="Страница 1">
  54. <input onclick="showContent('page2.html')" type="button" value="Страница 2">
  55. </form>
  57. <div id="contentBody">
  58. </div>
  60. <div id="loading" style="display: none">
  61. Идет загрузка...
  62. </div>
  64. </body>
  65. </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-страницы или текстовые файлы с контентом.