Статья: AJAX

OlegRom · 22.04.2007, 23:12

Приветствую всех тех кому эта статья поможет решить определенную задачу, и всех тех критиков кому эта статья покажется банальщиной. Эта статья расчитана для тех кто впервые услышал слово AJAX!

А чтобы умные люди не считали что зря потратили время открыв данную статью, рекомендую полазить по данному форуму, много чего интересного!

И так, все те кто остался ! Еще раз здравствуйте!

Что такое AJAX - Asynchronous Javascript And XML. AJAX - технология возникшая довольно-таки давно и одним из первых кто интенсивно начал ее использование - это gmail.com.AJAX позволяет создавать странички которые не перегружаются для отображения измененного содержания, или обновления базы данных. Другими словами, с помощью AJAX можно довольно-таки не сложно создавать Веб-Страницы напоминающие своим использованием обычные программы. В данной статье мы с вами создадим 4проекта:

1. Страничка с ссылками которая будет менять содержимое определенной области по нажатию на ссылку. (что-то похожее окна с фреймами)

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

3. По просьбе одного читателя форума, 3 динамически заполняемых списка, учитывая что списки каждого следующего будут зависить от выбранного элемента в данном списке.

4. Отправка сообщения на E-mail с сайта.

Для освоения данной статьи требуется не высокий уровень знания JavaScript и PHP. Я не буду углубляться в синтаксис и описание команд PHP, а буду вставлять лишь общий коментарий блока кода. Мы так же не будет создавать свой класс в JavaScript для обработчика AJAX в данной статье. И так, как говориться, вперед!

Проект 1

Страница с динамически обновляемой областью не использую IFRAME и FRAME.

Для начала проекта создадим 4 файла: index.html, news.html, contact.html, services.html.

Файл index.html - будет основным и из него будут подгружаться страницы с статическим содержимым: news.html, contact.html, services.html

Структура файлов news.html, contact.html, services.html будет почти одинаковой, заисключением содержимого тега H1:

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

Код:

<h1>Связь</h1>

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

Код:

<h1>Услуги</h1>

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

Код:

<h1>Новости</h1>

Структура файла index.html следующая:

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
    <title>Ajax - Урок 1</title>
		
    <script type="text/javascript">
      // ГЛОБАЛЬНЫЕ ПЕРЕМЕННЫЕ
      // переменная которая содержит в себе обработчик запросов
      var ajax;
			
      InitAjax();
			
      // функция инициализации Ajax компонента (XMLHttp)
      function InitAjax()
      {
      // используем структуру try..catch для попытки создать обработчик запросов XMLHTTP
      try
      {
      // пробуем создать компонент XMLHTTP для IE
      ajax = new ActiveXObject("Microsoft.XMLHTTP");
      }
      catch (e)
      {
      // если не получилось создать компонент XMLHTTP для IE прбуем следующий и т.д.
      try
      {
      // пробуем создать компонент XMLHTTP для IE версий 6 и выше
      ajax = new ActiveXObject("Msxml2.XMLHTTP");
      }
      catch (e)
      {
      try
      {
      // пробуем создать компонент XMLHTTP для Mozilla, и остальных
      ajax = new XMLHttpRequest();
      }
      catch (e)
      {
      ajax = 0;
      }
      }
      }
    }
			
    // функция которая будет запрашивать содержимое новой страницы
    function GetPage(page)
    {
    if (ajax == 0)
    {
    alert(«Ajax не инициализирован»);
    return;
    }
    ajax.onreadystatechange = GotResponse;
    ajax.open("GET", page, true);
    ajax.send(null);
    }
			
    // функция которая будет обрабатывать (вставлять возвращенный текст в нужную область страницы) ответ
    function GotResponse(v)
    {
    if (ajax.readyState == 4)
    {	
    if (ajax.status == 200)
    {
    var divBody = document.getElementById('Body');
    divBody.innerHTML = ajax.responseText;
    }
    else alert(ajax.status + " - " + ajax.statusText);
			
    ajax.abort();
    }
    }
  </script>
		
<style type="text/css">
			div#Header
			{
				width: 100%;
				border-bottom: 2px solid #333333;
				text-align: center;
				padding: 20px 0;
			}
			
			div#Menu
			{
				width: 200px;
				float: left;
			}
			
			div#Body
			{
				margin-left: 205px;
			}

			ul
			{
				list-style-type: none;
				margin: 0;
				line-height: 1.5em;
			}
			
			h1
			{
				text-align: center;
			}
		</style>
	</head>

	<body>
		<div id="Header">Ajax - Урок 1</div>
		
		<div id="Menu">
			<ul>
				<li><a href="javascript: GetPage('news.html');">Новости</a></li>
				<li><a href="javascript: GetPage('services.html');">Услуги</a></li>
				<li><a href="javascript: GetPage('contact.html');">Связь</a></li>
			</ul>
		</div>
		
		<div id="Body">
			<h1>Главная страница</h1>
		</div>
	</body>
</html>

Прошу обратить внимание на DIV с ID - Body, эта та часть страницы, которая будет обновляться.

Больше всего нас тут интересует часть между тегами <script>:

Код:

<script type="text/javascript">
	var ajax;
			
	InitAjax();
			
	function InitAjax()
	{
		try
		{
			ajax = new ActiveXObject("Microsoft.XMLHTTP");
		}
		catch (e)
		{
			try
			{
				ajax = new ActiveXObject("Msxml2.XMLHTTP");
			}
			catch (e)
			{
				try
				{
					ajax = new XMLHttpRequest();
				}
				catch (e)
				{
					ajax = 0;
				}
			}
		}
	}
			
	function GetPage(page)
	{
		if (ajax == 0)
		{
			alert(«Ajax не инициализирован»);
			return;
		}
		ajax.onreadystatechange = GotResponse;
		ajax.open("GET", page, true);
		ajax.send(null);
	}
			
	function GotResponse(v)
	{
		if (ajax.readyState == 4)
		{	
			if (ajax.status == 200)
			{
				var divBody = document.getElementById('Body');
				divBody.innerHTML = ajax.responseText;
			}
			else alert(ajax.status + " - " + ajax.statusText);
					
			ajax.abort();
		}
	}
</script>

Полетели разбираться в этой куче!

Самое первое

Код:

var ajax;

Глобальная переменная, которая содержит в себе объект запросов XMLHttpRequest или самое ядро AJAXа.

Затем вызываем функцию Init()

Код:

InitAjax();

Данная функция создает нужный Ajax'у объект без которого он дышать бы не с мог. Ниже будем перемывать косточки нашей злополучной функции InitAjax()

Код:

function InitAjax()
{
	try
	{
			ajax = new ActiveXObject("Microsoft.XMLHTTP");
	}
	catch (e)
	{
			try
			{
				ajax = new ActiveXObject("Msxml2.XMLHTTP");
			}
			catch (e)
			{
				try
				{
					ajax = new XMLHttpRequest();
				}
				catch (e)
				{
					ajax = 0;
				}
			}
	}
}

Используя структуру try...catch мы пытаемся создать ну хоть какой-нибудь поддерживаемый обозревателем объект пересылки сообщений. В мире есть 3 объекта такого рода: Microsoft.XMLHTTP, Msxml2.XMLHTTP, XMLHttpRequest.

Microsoft.XMLHTTP - поддерживается всеми версиями Internet Explorer.

Msxml2.XMLHTTP - поддерживается версиями Internet Explorer 6 и выше.

XMLHttpRequest - поддерживается всеми остальными обозревателями (Firefox, Opera, и другие).

Структура try...catch имеет следующий синтаксис.

Код:

try
{
	код который пытаемся выполнить
}
catch (exception)
{
	а тут пишем то что будет если код выше выполнится с ошибкой
}

И так, мы пробуем 3 раза создать объект XMLHttp, ну а если у пользователей какой-нибудь хитро(кхе-кхе-кхе) обозреватель, то не будет им счастья и будет их ajax равняться нулю.

Далее рассмотрим функцию GetPage(). Данная функция будет настраивать наш ajax и посылать запрос.

Код:

function GetPage(page)	
{
	if (ajax == 0)
	{
			alert(«Ajax не инициализирован»);
			return;
	}

	ajax.onreadystatechange = GotResponse;
	ajax.open("GET", page, true);
	ajax.send(null);
}

Первая часть - это проверка на инвалидность. Тут все ясно, если ajax равен нулю, то посылаем умное сообщение (примеры: «Упей сипя ап стену», «Вы только что не увидили страницу которая заняла первое место в конкурсе Самые Интересные Страницы Интернета», «В папруйск таварищ», «Теперь вы можете выключить Ваш компьютер нажав на кнопку питания») и вываливаемся из функции.

Ползем дальше

Код:

ajax.onreadystatechange = GotResponse;

компонент ajax имеет переменную onreadystatechange хранящую в себе функцию которая будет вызвана в момент получения ответа или изменения статуса ajax о котором мы поговорим чуть-чуть попозже.

Далее все намного проще:

Код:

ajax.open("GET", page, true);

Вызываем страницу page (в данном случае это аргумент этой функции), с типом запроса GET, последний аргумент указывает на асинхоронность запроса, вообщем будем ждать пока сервер соизволит ответить, или дальше пойдем творить дела и спасать вселенную от нападений Ктулху. True - указывает на твою крутость, т.е. на то что ты не будешь ждать ответа от сервера, иными словами - запрос будет асинхронными, ну а False - на то, что будет сидеть и ждать. Вообщем, за мою практику, я еще не разу не использовал синхронные запросы, и вам того же рекомендую.

Код:

ajax.send(null);

Здесь все почти ясно, посылаем запрос. Единственный аргумент - это содержимое которое ты хочешь отправить серверу в случае POST запроса.

Фух. Передых на 5 минут!

Код:

function GotResponse(v)
{
		if (ajax.readyState == 4)
		{	
			if (ajax.status == 200)
			{
				var divBody = document.getElementById('Body');
				divBody.innerHTML = ajax.responseText;
			}
			else alert(ajax.status + " - " + ajax.statusText);
					
			ajax.abort();
		}
}

Функция GotResponse вызывается тогда, когда Ajax меняет свой статус. Статус описывает переменной readyState (НЕ ПУТАТЬ С ПЕРЕМЕННОЙ status). Всего существует 5 статусов:

0 - стоит и курит тихо в углу (ajax только что создали и еще ничего не попросили сделать)
1 - загружаем ajax работкой
2 - загрузили ajax работой
3 - пытается наш ajax все наши просьбы удовлетворить
4 - удовлетворил

Нам нужен будет только статус 4, для этого в функции и стоит проверка:

Код:

if (ajax.readyState == 4) {	}

Ладно, справиться, то он - справился, но как? Это нам и покажет переменная status компонента XMLHttp. status - данная переменная содержит в себе HTML код нашего запроса, например: 404 - страница не найдена, 200 - все окей, работаем дальше.
Описание результата работы ajax можно найти в переменной: statusText. Примеры содержимого: Not found или ОК соответственно.

Далее в нашей функции мы и проверяем на то, как ajax справился:

Код:

if (ajax.status == 200)
{
	var divBody = document.getElementById('Body');
	divBody.innerHTML = ajax.responseText;
}
else alert(ajax.status + " - " + ajax.statusText);

Если все хорошо и статус 200, то находим DIV используя функцию JavaScript - getElementById(), посылая в нее ID того тега, который мы хотим найти и вернуть в переменную. Когда делали разметку index.html, мы как раз и назвали один из наших тегов Body. Нашли, вернули, теперь используя переменную innerHTML объекта DIV, мы можем управлять содержимым данного раздела.

Ajax так же имеет переменную responseText, которая содержит ответ сервера на попытку вызова страницы. Проще говоря, мы попросили открыть его определенную страницу и если все прошло хорошо, то содержимое данной страницы (после обработки сервером, если это PHP или Perl, или нечто похожее) будет у нас в переменной responseText.

Ну, а если ajax вернул другой ответ от сервера (не 200), то просим его показать его с описанием ответа.

Код:

ajax.abort();

Последняя строка в данной функции - сбрасывает компонент Ajax, подготавливая его тем самым к новым запросам!

Вот вообщем и все для начала! Это моя первая статья, жду ваших пожеланий, коментариев, и все что хотите мне сказать!

Специально для NoWa.cc от OlegRom aka ::: XD :::

ridrik · 23.04.2007, 18:44

уоу

OlegRom · 23.04.2007, 23:16

чтобы это значило? ;)

Mitnik · 01.05.2007, 15:20

На мой взгляд очередной замут типо в печенках сидящего java-script

*ana* · 02.05.2007, 08:07

Цитата:

Сообщение от Mitnik


	На мой взгляд очередной замут типо в печенках сидящего java-script

на этом замуте сейчас люди зарабатывают лимоны!
JavaScript сила! Сейчас выиграет тот, кто научится это
использовать. Сам сейчас работаю над проектом, где
более 2000строк(не предел!) кода на JS, классы, методы, инициализация
обьектов... Все работает на стороне клиента, данные
отсылаются на сервер где стоит Apache/mysql/php
Скорость работы потрясная! HTML работает как десктопное
приложение!

...

Mikrosoft вырыл себе могилу создав в 1999году xmlHTTPrequest !
лет через 5-7 большинство программ будет работать удаленно.
познакомтесь с google, они сделали первый рывок в этом
направлении... теперь они просто миллиардеры!
Мы выучив ajax станем миллионерами...

p3r3c · 03.05.2007, 00:54

AjaX эм вообщем то это не просто java script это решение экономии трафика и если всё дивно верстается то и напряги большой нету.
К тому же это оооочень рекоммендуемая система в любом шаблоне и в любом текстовом сайте найдётся выгодное назначение.
В общем используйте и не жалуйтесь на яву

Спасибо за статью как раз хотел искать документации по этому поводу!

"Мы выучив ajax станем миллионерами..."
Ну это ещё и правильно использовать нужно с толком и трезво

иначе как стояли на месте передвигаясь по милиметрам то назад то вперёд так и будем стоять

Sash8 · 14.05.2007, 21:09

Доброе время суток..
Народ а где мона взять учебники по ajax..

oloo · 15.05.2007, 17:58

anglish or russian?

Aksen · 21.05.2007, 20:15

Насколько я слышал, чтобы использовать Ajax, надо установить на сервер какую-то тулзу. Причем их много разных вроде.
Что за они, и где можно взять, подскажите пожалуйста.

*ana* · 21.05.2007, 21:23

Цитата:

Сообщение от Aksen


	Насколько я слышал, чтобы использовать Ajax, надо установить на сервер какую-то тулзу

Установи что хочешь!
Perl, PHP, ASP, JSP, NET ... что хочешь!
В этом и сила, всё основано на
уже освоенных технологиях.

Так как обмен информацией происходит
в XML (реже TEXT), то лучше использовать
серверную технологию с поддержкой XML
Многие работают с Java, но проще
и доступней PHP, тем более там с поддержкой
XML всё в порядке

OlegRom · 21.05.2007, 23:55

да впринципе даже ничего не надо устанавливать. в статье там ничего не упомянуто про серверные технологии, AJAX это технология которая работает на клиентском компе.

*ana* · 22.05.2007, 07:58

Цитата:

Сообщение от OlegRom


	AJAX это технология которая работает на клиентском компе

Asynchronous JavaScript and XML -
javascript локально, а xml служит для передачи данных,
данные формируются на сервере, исходя из того,
что прислано на сервер.

Например
xmlHttp.open('GET', 'test.php?id=1', true);

a на сервере
<?php
// для примера ответ в текстовой форме!
if(1 == $_GET['id']) echo 'Hello world!'
?>

и теперь приняв ответ от сервера
можно с ним, что то делать, например

alert(xmlHttp.responseText);

Вообще то надо было бы статью продолжить,
и описать подробней серверную часть

Кирпич · 24.05.2007, 06:29

Цитата:


	AJAX это технология которая работает на клиентском компе

AJAX - это технология ?

AJAX - совокупность технологий, об этом надо помнить

Мешок · 27.05.2007, 17:51

OlegRom, что-то я скопировал код со статьи, и браузер все время пишет ошибка. Может чего-то не хватает в ПО?

Мешок · 29.05.2007, 10:49

Разобрался, что не работало: надо было в проверке вместо
if (ajax == 0) делать if(ajax == null). Это ж объект.
Теперь такой глюк: Пробовал на 2-х ПК ajax.status = 0, а не 200. А если страница не найдена, то 2, а не 407.

22.04.2007, 23:12	#1
OlegRom Пользователь Пол: Регистрация: 08.03.2007 Адрес: UAE, Dubai Сообщений: 99 Репутация: 32	Статья: AJAX Приветствую всех тех кому эта статья поможет решить определенную задачу, и всех тех критиков кому эта статья покажется банальщиной. Эта статья расчитана для тех кто впервые услышал слово AJAX! А чтобы умные люди не считали что зря потратили время открыв данную статью, рекомендую полазить по данному форуму, много чего интересного! И так, все те кто остался ! Еще раз здравствуйте! Что такое AJAX - Asynchronous Javascript And XML. AJAX - технология возникшая довольно-таки давно и одним из первых кто интенсивно начал ее использование - это gmail.com.AJAX позволяет создавать странички которые не перегружаются для отображения измененного содержания, или обновления базы данных. Другими словами, с помощью AJAX можно довольно-таки не сложно создавать Веб-Страницы напоминающие своим использованием обычные программы. В данной статье мы с вами создадим 4проекта: 1. Страничка с ссылками которая будет менять содержимое определенной области по нажатию на ссылку. (что-то похожее окна с фреймами) 2. Страничку входа в сайт, которая проверит валидность имени и пароля и выдаст сообщение об ошибке или переведет на другую страницу. 3. По просьбе одного читателя форума, 3 динамически заполняемых списка, учитывая что списки каждого следующего будут зависить от выбранного элемента в данном списке. 4. Отправка сообщения на E-mail с сайта. Для освоения данной статьи требуется не высокий уровень знания JavaScript и PHP. Я не буду углубляться в синтаксис и описание команд PHP, а буду вставлять лишь общий коментарий блока кода. Мы так же не будет создавать свой класс в JavaScript для обработчика AJAX в данной статье. И так, как говориться, вперед! Проект 1 Страница с динамически обновляемой областью не использую IFRAME и FRAME. Для начала проекта создадим 4 файла: index.html, news.html, contact.html, services.html. Файл index.html - будет основным и из него будут подгружаться страницы с статическим содержимым: news.html, contact.html, services.html Структура файлов news.html, contact.html, services.html будет почти одинаковой, заисключением содержимого тега H1: Содержимое файла contact.html: Код: <h1>Связь</h1> Содержимое файла services.html: Код: <h1>Услуги</h1> Содержимое файла news.html: Код: <h1>Новости</h1> Структура файла index.html следующая: Код: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <title>Ajax - Урок 1</title> <script type="text/javascript"> // ГЛОБАЛЬНЫЕ ПЕРЕМЕННЫЕ // переменная которая содержит в себе обработчик запросов var ajax; InitAjax(); // функция инициализации Ajax компонента (XMLHttp) function InitAjax() { // используем структуру try..catch для попытки создать обработчик запросов XMLHTTP try { // пробуем создать компонент XMLHTTP для IE ajax = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { // если не получилось создать компонент XMLHTTP для IE прбуем следующий и т.д. try { // пробуем создать компонент XMLHTTP для IE версий 6 и выше ajax = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { // пробуем создать компонент XMLHTTP для Mozilla, и остальных ajax = new XMLHttpRequest(); } catch (e) { ajax = 0; } } } } // функция которая будет запрашивать содержимое новой страницы function GetPage(page) { if (ajax == 0) { alert(«Ajax не инициализирован»); return; } ajax.onreadystatechange = GotResponse; ajax.open("GET", page, true); ajax.send(null); } // функция которая будет обрабатывать (вставлять возвращенный текст в нужную область страницы) ответ function GotResponse(v) { if (ajax.readyState == 4) { if (ajax.status == 200) { var divBody = document.getElementById('Body'); divBody.innerHTML = ajax.responseText; } else alert(ajax.status + " - " + ajax.statusText); ajax.abort(); } } </script> <style type="text/css"> div#Header { width: 100%; border-bottom: 2px solid #333333; text-align: center; padding: 20px 0; } div#Menu { width: 200px; float: left; } div#Body { margin-left: 205px; } ul { list-style-type: none; margin: 0; line-height: 1.5em; } h1 { text-align: center; } </style> </head> <body> <div id="Header">Ajax - Урок 1</div> <div id="Menu"> <ul> <li><a href="javascript: GetPage('news.html');">Новости</a></li> <li><a href="javascript: GetPage('services.html');">Услуги</a></li> <li><a href="javascript: GetPage('contact.html');">Связь</a></li> </ul> </div> <div id="Body"> <h1>Главная страница</h1> </div> </body> </html> Прошу обратить внимание на DIV с ID - Body, эта та часть страницы, которая будет обновляться. Больше всего нас тут интересует часть между тегами <script>: Код: <script type="text/javascript"> var ajax; InitAjax(); function InitAjax() { try { ajax = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { try { ajax = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { ajax = new XMLHttpRequest(); } catch (e) { ajax = 0; } } } } function GetPage(page) { if (ajax == 0) { alert(«Ajax не инициализирован»); return; } ajax.onreadystatechange = GotResponse; ajax.open("GET", page, true); ajax.send(null); } function GotResponse(v) { if (ajax.readyState == 4) { if (ajax.status == 200) { var divBody = document.getElementById('Body'); divBody.innerHTML = ajax.responseText; } else alert(ajax.status + " - " + ajax.statusText); ajax.abort(); } } </script> Полетели разбираться в этой куче! Самое первое Код: var ajax; Глобальная переменная, которая содержит в себе объект запросов XMLHttpRequest или самое ядро AJAXа. Затем вызываем функцию Init() Код: InitAjax(); Данная функция создает нужный Ajax'у объект без которого он дышать бы не с мог. Ниже будем перемывать косточки нашей злополучной функции InitAjax() Код: function InitAjax() { try { ajax = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { try { ajax = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { ajax = new XMLHttpRequest(); } catch (e) { ajax = 0; } } } } Используя структуру try...catch мы пытаемся создать ну хоть какой-нибудь поддерживаемый обозревателем объект пересылки сообщений. В мире есть 3 объекта такого рода: Microsoft.XMLHTTP, Msxml2.XMLHTTP, XMLHttpRequest. Microsoft.XMLHTTP - поддерживается всеми версиями Internet Explorer. Msxml2.XMLHTTP - поддерживается версиями Internet Explorer 6 и выше. XMLHttpRequest - поддерживается всеми остальными обозревателями (Firefox, Opera, и другие). Структура try...catch имеет следующий синтаксис. Код: try { код который пытаемся выполнить } catch (exception) { а тут пишем то что будет если код выше выполнится с ошибкой } И так, мы пробуем 3 раза создать объект XMLHttp, ну а если у пользователей какой-нибудь хитро(кхе-кхе-кхе) обозреватель, то не будет им счастья и будет их ajax равняться нулю. Далее рассмотрим функцию GetPage(). Данная функция будет настраивать наш ajax и посылать запрос. Код: function GetPage(page) { if (ajax == 0) { alert(«Ajax не инициализирован»); return; } ajax.onreadystatechange = GotResponse; ajax.open("GET", page, true); ajax.send(null); } Первая часть - это проверка на инвалидность. Тут все ясно, если ajax равен нулю, то посылаем умное сообщение (примеры: «Упей сипя ап стену», «Вы только что не увидили страницу которая заняла первое место в конкурсе Самые Интересные Страницы Интернета», «В папруйск таварищ», «Теперь вы можете выключить Ваш компьютер нажав на кнопку питания») и вываливаемся из функции. Ползем дальше Код: ajax.onreadystatechange = GotResponse; компонент ajax имеет переменную onreadystatechange хранящую в себе функцию которая будет вызвана в момент получения ответа или изменения статуса ajax о котором мы поговорим чуть-чуть попозже. Далее все намного проще: Код: ajax.open("GET", page, true); Вызываем страницу page (в данном случае это аргумент этой функции), с типом запроса GET, последний аргумент указывает на асинхоронность запроса, вообщем будем ждать пока сервер соизволит ответить, или дальше пойдем творить дела и спасать вселенную от нападений Ктулху. True - указывает на твою крутость, т.е. на то что ты не будешь ждать ответа от сервера, иными словами - запрос будет асинхронными, ну а False - на то, что будет сидеть и ждать. Вообщем, за мою практику, я еще не разу не использовал синхронные запросы, и вам того же рекомендую. Код: ajax.send(null); Здесь все почти ясно, посылаем запрос. Единственный аргумент - это содержимое которое ты хочешь отправить серверу в случае POST запроса. Фух. Передых на 5 минут! Код: function GotResponse(v) { if (ajax.readyState == 4) { if (ajax.status == 200) { var divBody = document.getElementById('Body'); divBody.innerHTML = ajax.responseText; } else alert(ajax.status + " - " + ajax.statusText); ajax.abort(); } } Функция GotResponse вызывается тогда, когда Ajax меняет свой статус. Статус описывает переменной readyState (НЕ ПУТАТЬ С ПЕРЕМЕННОЙ status). Всего существует 5 статусов: 0 - стоит и курит тихо в углу (ajax только что создали и еще ничего не попросили сделать) 1 - загружаем ajax работкой 2 - загрузили ajax работой 3 - пытается наш ajax все наши просьбы удовлетворить 4 - удовлетворил Нам нужен будет только статус 4, для этого в функции и стоит проверка: Код: if (ajax.readyState == 4) { } Ладно, справиться, то он - справился, но как? Это нам и покажет переменная status компонента XMLHttp. status - данная переменная содержит в себе HTML код нашего запроса, например: 404 - страница не найдена, 200 - все окей, работаем дальше. Описание результата работы ajax можно найти в переменной: statusText. Примеры содержимого: Not found или ОК соответственно. Далее в нашей функции мы и проверяем на то, как ajax справился: Код: if (ajax.status == 200) { var divBody = document.getElementById('Body'); divBody.innerHTML = ajax.responseText; } else alert(ajax.status + " - " + ajax.statusText); Если все хорошо и статус 200, то находим DIV используя функцию JavaScript - getElementById(), посылая в нее ID того тега, который мы хотим найти и вернуть в переменную. Когда делали разметку index.html, мы как раз и назвали один из наших тегов Body. Нашли, вернули, теперь используя переменную innerHTML объекта DIV, мы можем управлять содержимым данного раздела. Ajax так же имеет переменную responseText, которая содержит ответ сервера на попытку вызова страницы. Проще говоря, мы попросили открыть его определенную страницу и если все прошло хорошо, то содержимое данной страницы (после обработки сервером, если это PHP или Perl, или нечто похожее) будет у нас в переменной responseText. Ну, а если ajax вернул другой ответ от сервера (не 200), то просим его показать его с описанием ответа. Код: ajax.abort(); Последняя строка в данной функции - сбрасывает компонент Ajax, подготавливая его тем самым к новым запросам! Вот вообщем и все для начала! Это моя первая статья, жду ваших пожеланий, коментариев, и все что хотите мне сказать! Специально для NoWa.cc от OlegRom aka ::: XD ::: __________________ Имя величайшему из всех изобретателей: Случайность. Последний раз редактировалось OlegRom; 23.04.2007 в 11:56..

23.04.2007, 18:44	#2
ridrik Неактивный пользователь Регистрация: 23.04.2007 Сообщений: 2 Репутация: 0	Re: Статья: AJAX уоу

01.05.2007, 15:20	#4
Mitnik Неактивный пользователь Регистрация: 01.05.2007 Сообщений: 4 Репутация: 1	Re: Статья: AJAX На мой взгляд очередной замут типо в печенках сидящего java-script

03.05.2007, 00:54	#6
p3r3c Неактивный пользователь Регистрация: 26.03.2007 Сообщений: 9 Репутация: 1	Re: Статья: AJAX AjaX эм вообщем то это не просто java script это решение экономии трафика и если всё дивно верстается то и напряги большой нету. К тому же это оооочень рекоммендуемая система в любом шаблоне и в любом текстовом сайте найдётся выгодное назначение. В общем используйте и не жалуйтесь на яву Спасибо за статью как раз хотел искать документации по этому поводу! "Мы выучив ajax станем миллионерами..." Ну это ещё и правильно использовать нужно с толком и трезво иначе как стояли на месте передвигаясь по милиметрам то назад то вперёд так и будем стоять

14.05.2007, 21:09	#7
Sash8 Неактивный пользователь Пол: Регистрация: 17.11.2006 Сообщений: 7 Репутация: 0	Ответ: Статья: AJAX Доброе время суток.. Народ а где мона взять учебники по ajax..

23.04.2007, 23:16	#3
OlegRom Пользователь Пол: Регистрация: 08.03.2007 Адрес: UAE, Dubai Сообщений: 99 Репутация: 32	Re: Статья: AJAX чтобы это значило? ;) __________________ Имя величайшему из всех изобретателей: Случайность.

15.05.2007, 17:58	#8
oloo Неактивный пользователь Пол: Регистрация: 15.05.2007 Сообщений: 6 Репутация: 0	Ответ: Статья: AJAX anglish or russian?

21.05.2007, 20:15	#9
Aksen Неактивный пользователь Регистрация: 13.05.2007 Сообщений: 5 Репутация: 0	Re: Статья: AJAX Насколько я слышал, чтобы использовать Ajax, надо установить на сервер какую-то тулзу. Причем их много разных вроде. Что за они, и где можно взять, подскажите пожалуйста.

21.05.2007, 23:55	#11
OlegRom Пользователь Пол: Регистрация: 08.03.2007 Адрес: UAE, Dubai Сообщений: 99 Репутация: 32	Ответ: Статья: AJAX да впринципе даже ничего не надо устанавливать. в статье там ничего не упомянуто про серверные технологии, AJAX это технология которая работает на клиентском компе. __________________ Имя величайшему из всех изобретателей: Случайность.

27.05.2007, 17:51	#14
Мешок Пользователь Пол: Регистрация: 27.01.2007 Адрес: Киев Сообщений: 103 Репутация: 130	Ответ: Статья: AJAX OlegRom, что-то я скопировал код со статьи, и браузер все время пишет ошибка. Может чего-то не хватает в ПО?

29.05.2007, 10:49	#15
Мешок Пользователь Пол: Регистрация: 27.01.2007 Адрес: Киев Сообщений: 103 Репутация: 130	Ответ: Статья: AJAX Разобрался, что не работало: надо было в проверке вместо if (ajax == 0) делать if(ajax == null). Это ж объект. Теперь такой глюк: Пробовал на 2-х ПК ajax.status = 0, а не 200. А если страница не найдена, то 2, а не 407.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Статья 12.15 ч.1	DI__MON	Административное право	9	14.10.2009 06:43
Статья 312 УК	gena s	Уголовное право	5	01.06.2009 15:54
XSS - введение , статья для начинающих.	WeNZeeR	Статьи	0	19.07.2007 12:31
Интересная статья по Р2Р	sweiger	P2P-системы & Soft	1	16.05.2006 21:15