Уголок веб-разработчика

сайт для веб-мастеров и веб-разработчиков

Реклама на сайте
как разместить свою рекламу?

Что нового в блоге?

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

Автор:
Источник: /ajax_js.php

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

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

Хотите дополнить - пишите:

Статьи по теме

Скрипт для голосования своими руками на PHP и MySQL с использованием AJAX;
AJAX и jQuery. Динамическое обновление контента. Основы;
AJAX и jQuery. Как загрузить скрипт JavaScript динамически?;
AJAX и jQuery. Передача параметров из PHP в JavaScript. Использование JSON;
Гостевая книга своими руками на PHP и MySQL. Добавляем динамизма. AJAX + jQuery.

статьи | блог | онлайн консультации | услуги по разработке | полезные ссылки | письма читателей | о проекте | реклама на сайте

Посетите наш сайт https://prostitutkiachinska2020.com и найдите лучших проституток Ачинска ! У нас есть широкий выбор красивых и опытных девушек, готовых удовлетворить все ваши желания! | Купите услуги лучших проституток Лыткарино на сайте https://prostitutkilytarkino2020.com! Они готовы удовлетворить все ваши фантазии и желания, заходите и выбирайте. | Посетите сайт https://prostitutkisterlitamaka2021.com, чтобы найти лучших проституток Стерлитамака. Они готовы удовлетворить все ваши сексуальные желания! | Посетите сайт https://prostitutkianapy2021.com, чтобы найти лучших проституток Анапы. Они будут готовы удовлетворить все ваши желания и фантазии! | Посетите наш сайт интим досуга, чтобы найти лучших путан Пятигорска в вашем регионе. Безопасно, конфиденциально и удобно - мы гарантируем удовольствие! | На сайте https://staryyoskolsm.com представлены девушки разных возрастных категорий, чтобы удовлетворить вкусы каждого клиента. | Выбрав девушку на https://omsksm.com, вы получите гарантированное удовольствие и море положительных эмоций.

© 2008 - 2022 :: Codething.ru
При перепечатке и копировании статей с сайта указание автора и URL статьи обязательно!
Программный код, приведенный в статьях в качестве примеров, можно использовать без каких-либо ограничений.
Работоспособность, надежность и безопасность программного кода из примеров не гарантируется.