AJAX. Основы.

1. клиентская часть: исполняется на стороне клиента, пишется на JavaScript
2. серверная часть: исполняется на сервере, может быть написана на любом языке программирования, понимающем GET/POST запросы

1. сбор и подготовка информации для отправки запроса на сервер;
2. создание экземпляра объекта XMLHttpRequest;
3. установка для него функции обработчика события onreadystatechange. Это событие наступает при каждой смене состояния объекта XMLHttpRequest (см. таблицу внизу). Данная функция по сути является основной частью скрипта, поскольку именно в ней происходит обработка ответа сервера;
4. открытие соединения с указанием типа запроса (GET или POST), URL серверной части, флага асинхронного режима и имени и пароля пользователя (если необходимо);
5. непосредственно отправка запроса;
6. обработка ответа серверной части.

var req;

if (window.XMLHttpRequest)	// normal browser
    req = new XMLHttpRequest();   
else if (window.ActiveXObject) {	//IE
    try {
        req = new ActiveXObject('Msxml2.XMLHTTP');  // IE разных версий
    } catch (e){}									// может создавать 
    try {											// объект по разному
        req = new ActiveXObject('Microsoft.XMLHTTP');
    } catch (e){}
}

req.open("GET", url, true);
req.onreadystatechange = function() {
	if (req.readyState == 4)  { обработка результатов }        
};  
req.send(null); //отправка запроса без параметров, т.к. они установлены в url      

req.open("POST", url, true);
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.onreadystatechange = function() {
   if (req.readyState == 4)  { обработка результатов }        
};      
req.send('param1=1¶m2=0'); //теперь параметры передаются здесь

var req;

if (window.XMLHttpRequest) req = new XMLHttpRequest(); 
else if (window.ActiveXObject) {
    try {
        req = new ActiveXObject('Msxml2.XMLHTTP');
    } catch (e){}
    try {
    req = new ActiveXObject('Microsoft.XMLHTTP');
    } catch (e){}
}

if (req) {
    req.onreadystatechange = function() {
    	if (req.readyState == 4 && req.status == 200)  { alert(req.responseText); }        
    };  
    req.open("POST", 'xmlhttp.php', true);
    req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    req.send('param=1&ajax=1');
} 
else alert("Браузер не поддерживает AJAX");

if(isset($_POST['param'])) 
echo ($_SERVER['REMOTE_ADDR'])?"Your IP ".$_SERVER['REMOTE_ADDR']:"IP неизвестен";

• Tweet

Комментарии:

Привет!
Сперва о хорошем - Отличный ресурс.
Теперь о плохом. Приведенный пример у меня заработал только на Опере 9.27. FF2.0, ie6, ie7, safari3.1.1 выдали ошибку.

Да, спасибо за своевременный сигнал. Исправил.
Дело в том, что был изменен DOCTYPE страницы, а в XHTML вот такая конструкция req.open("POST", '', true); кроме Оперы нигде не проходит, то есть пустая ссылка не указывает сама на себя и возникает красноречивая ошибка uncaught exception: [Exception... "Component returned failure code: 0x80070057 (NS_ERROR_ILLEGAL_VALUE) [nsIXMLHttpRequest.open]" nsresult: "0x80070057 (NS_ERROR_ILLEGAL_VALUE)" location: "JS frame :: javascript: eval(__firebugTemp__); :: anonymous :: line 1" data: no].

Спасибо. Буду дерзать. После бездарной книжки начал-было склоняться к мысли, что я слабоумен, так там замечательно описано было...

Просто и понятно. Спасибо!

Привет!
Не будет ошибкой использование responseText до открытия и отправки параметров? Пока не понял этого.

использование responseText до открытия и отправки параметров не имеет смысла, поскольку responseText это ответ серверной части на ajax запрос, поэтому до отправки параметров он не определен

Ну так и я об этом:

req.onreadystatechange = function()
{
if (req.readyState == 4 && req.status == 200)
{alert(req.responseText);} // здесь
};
req.open("POST", 'ajax/ajax_fundamentals.php', true);
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.send('param=1'); // и здесь

В строках, приведенных вами выше, назначается функция-обработчик события. Это событие и есть ответ сервера, т.е. responseText до открытия и отправки параметров не используется

То есть, onreadystatechange следит за состоянием всё время, и неважно, где он стоит? И всё же, почему не поставить обработчик после отправки? Спасибо.

Он не все время следит, а вызывается только после совершения события. Это как onclick или onmouseover. Если его поставить после отправки, то получится, что событие не знает какая функция должна его обработать...

Читаю и ничего не могу понять, посоветуйте какие нибудь книги по этому делу

Огромное спасибо, вот по этой статье я научился Ajax...

Ogromnoe spasibo ochen poleznaya infa... iz Yerevana..

Немогу понять вчем дело ( У меня Linux + Firefox 3.0.3 (пробовал так же 3.0) Данный пример в нем УЖЕ не работает ( У меня собственный кусок кода на аякс, в опере и второй Лисе - порядок. А с 3ей версии начал выдеылываться. немогу понять вчем проблема. У меня должна отправляться форма на сервер, но увы.. (

Для меня так проще jqueryвский .ajax(). Неохота на низкий уровень лезть.

Статья действительно хорошая, однако не раскрывает некоторые моменты, о которых более подробно написано тут http://www.ibm.com/developerworks/ru/library/wa-ajaxintro1/#code7

великое cпасибо за азы...

Здравствуйте Автор!
Это действительно доступная в понимании и полезная инфа, для тех кто начинает осваивать такого рода программирование. Я до этого находил примеры такого типа но они у меня не работали. Данный пример работает, но к сожалению в IE7 (будь он проклят) почему то не хочет. я заключил верхний код обработчик в < script > function myajax () { код }< / script >
а нижний код серверную часть как и полагается в файл xmlhttp.php
сделал гиперссылку для вызова функции < a onclick = " myajax ( ) " текст < / a >
IE видит в строке выше какую-то ошибку, что там ни так?

Интересно.
>"Если вы видите это сообщение - значит вы используете браузер Internet Explorer...."
У меня вообщето Mozilla/5.0 (Windows; U; Windows NT 5.1; ru; rv:1.9.1.5) Gecko/20091102 Firefox/3.5.5

За статью Спасибо

Спасибо за материал! А я-то поступил именно так, как вы описали здесь: http://easywebscripts.net/ajax/ajax_books.php и даже скачал именно ту самую книжищу. И реакция у меня примерно такая же была: "зачем столько воды???"
Еще раз спасибо!

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

Спасибо огромное отличная статья и сайт!

Огромное спасибо за статью. Сберегли мне уйму времени!

/////
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
var param = 2;
req.send('param=2');
}
/////

а как вместо 'param=2' поставлять переменную... не могу понять почему не полчается =(

to Kuli
передать переменную
...
var x = 5;
xmlHttp.send('x='+x);
...
на стороне сервера принять переменную и передать обратно
$x = $_POST['x'];
$x = $x+1;
echo("x = ". $x);

Сайт мне очень понравился! Все кратко, ясно и по делу! Спасибо=)

Подскажите, возможно ли получить от сервера несколько ответов, то есть :
$x = $_POST['x'];
$x = $x+1;
echo("x = ". $x); // первый ответ
echo("y = ". $x+2); // второй ответ
при этом не отправляя всего один запрос

Хорошо пишете, конечно, но непонятно, как это вообще запускать, ничего на примере не работает. Как сделать, чтобы аякс запускался по кнопке, функция почему-то выводит хедеры страницы, с которой запускается!

Можно вопрос? к автору

...& req.status == 200) {alert(req.responseText);}
|Этот код отрабатывает нормально|

А если его заменить на:
...& req.status == 200) {document.write(req.responseText);}

То здесь, есть нюансы с работой некоторых обозревателей ~

1) Chrome выдает результат сразу.
2) Opera ждет 1-2 секунды и записывает результат.
3) Firefox сразу записывает и находится в таком состоянии, как будто он, что-то еще загружает? (бесконечно долго)

при alert этого не происходит, но при document.write - происходит задержка, или непонятные `Загрузка`

Я использую innerHTML для отображения.
А так, в целом, разобрался, автор, пиши еще!

хедеры тоже выводились по началу)
Только потом я понял, что нужно Ajax и PHP по разным файлам разделить : )

Алекс, а как вы используете это с innerHTML?

Добавляю в скрипт строку типа

document.getElementById('someDiv').innerHTML = req.responseText;

тогда ответ скрипта на сервере выводится в этом div

Рад что нашол ваш сайт! Очень толково все расписано и как раз, то чего я хотел, но боялся спросить )) Отключил нахер Адблок+ и нажал на ссылку )) Спасибо!

Если все написано на php, то как передать параметр из php кода в req.send('param=1&ajax=1'); вместо param=1, param=(например $id).

Так вот он, великий и ужасный AJAX... пишем обращение из джаваскрипта к пхп скрипту и получаем ответ, вот и всё, а я-то думал! Спасибо автору большое

Замечательная статья. Автору респект.

в вин 7 хоме едитионе в интернут эксплорере выдается ошибка - отказано в доступе. в вин7 ультимате уак я отключил и ноу трабл. как решить проблему?

Автор, спасибо, я прозрел! Напишите, пожалуйста, можно ли передавать массивы методом POST, и как передавать картинки? Как только получить информацию, без передачи конкретных параметров?

от кого: