"Чистый" AJAX за 10 минут
AJAX (Asynchronous Javascript and XML) - это подход к построению сайта, позволяющий взаимодействовать с сервером без перезагрузки страницы. Примерами применения служат проверка имени пользователя на занятость при регистрации, отправка товара в корзину без перезагрузки и т.д. AJAX базируется на объекте XMLHttpRequest. Как видно из названия он задумывался для работы с XML, что, впрочем, не мешает использовать его и в других целях.
Принцип работы следующий: скрипт состоит из двух частей
- Клиентская часть: исполняется на стороне клиента, пишется на JavaScript.
- Серверная часть: исполняется на сервере, может быть написана на любом языке программирования, понимающем GET/POST запросы.
Этапы написания клиентской части:
- Сбор и подготовка информации для отправки запроса на сервер (если требуется).
- Создание экземпляра объекта XMLHttpRequest.
- Открытие соединения с указанием типа запроса (GET или POST), URL серверной части, флага асинхронного режима и имени и пароля пользователя (если необходимо).
- Установка для него функции обработчика события onreadystatechange. Это событие наступает при каждой смене состояния объекта XMLHttpRequest (см. таблицу ниже). Данная функция по сути является основной частью скрипта, поскольку именно в ней происходит обработка ответа сервера.
- Обработка ответа сервера.
Звучит громоздко, но на практике всё проще:
// готовим данные
var url = window.location.pathname+'?param=1';
// создаём экземпляра XMLHttpRequest
var req = new XMLHttpRequest();
// открываем соединение, используем GET запрос
req.open('GET', url, true);
// устанавливаем обработчика
req.onreadystatechange = function() {
if (req.readyState == 4) {
//обработка результатов
}
};
// отправлять GET запрос можно и без параметров,
// если они установлены в url
req.send(null);
В обработчике события onreadystatechange необходимо обязательно проверить условие req.readyState == 4, которое говорит о том, что данные загружены. Дополнительно можно также проверять req.status == 200. См. таблицы ниже.
При использование объекта XMLHttpRequest с методом POST требуется дополнительно отправлять header:
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 = new XMLHttpRequest();
req.open('POST', '/ajax/exmpl.php', true);
req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
req.onreadystatechange = function() {
if (req.readyState == 4 && req.status == 200) {
alert(req.responseText);
}
};
req.send('param=1&ajax=1');
Серверная часть (url в req.open) может быть написана на чем угодно, лишь бы понимала запросы GET/POST. Возращаемое значение (req.responseText) формируется стандартным выводом.
Пример серверной части на php:
if (!empty($_POST['param'])) {
echo empty($_SERVER['REMOTE_ADDR']) ? 'IP неизвестен' : 'Your IP '.$_SERVER['REMOTE_ADDR'];
}
Немного справочных материалов
Методы класса XMLHttpRequest:| Метод | Описание |
|---|---|
| abort() | отменяет текущий запрос |
| getAllResponseHeaders() | возвращает полный список HTTP-заголовков в виде строки |
| getResponseHeader(headerName) | возвращает значение указанного заголовка |
| open(method, URL, async, userName, password) | определяет метод, URL и другие опциональные параметры запроса; параметр async определяет, происходит ли работа в асинхронном режиме |
| send(content) | отправляет запрос на сервер |
| setRequestHeader(label, value) | добавляет HTTP-заголовок к запросу |
| overrideMimeType(mimeType) | позволяет указать mime-type документа, если сервер его не передал или передал неправильно. |
Свойства класса XMLHttpRequest:
| Свойство | Описание |
|---|---|
| onreadystatechange | обработчик события, которое происходит при каждой смене состояния объекта |
| readyState | возвращает текущее состояние объекта
|
| responseText | текст ответа на запрос |
| responseXML | текст ответа на запрос в виде XML, который затем может быть распарсен посредством DOM |
| status | возвращает HTTP-статус в виде числа (404 — «Not Found», 200 — «OK» и т.д.) |
| statusText | возвращает статус в виде строки («Not Found», «OK» и т.д.) |
Быть добру!
Спасибо. Буду дерзать. После бездарной книжки начал было склоняться к мысли, что я слабоумен, так там замечательно описано было...
Просто и понятно. Спасибо!
Привет!
Не будет ошибкой использование responseText до открытия и отправки параметров? Пока не понял этого.
использование responseText до открытия и отправки параметров не имеет смысла, поскольку responseText это ответ серверной части на ajax запрос, поэтому до отправки параметров он не определен
То есть, onreadystatechange следит за состоянием всё время, и неважно, где он стоит? И всё же, почему не поставить обработчик после отправки? Спасибо.
Он не все время следит, а вызывается только после совершения события. Это как onclick или onmouseover. Если его поставить после отправки, то получится, что событие не знает какая функция должна его обработать...
Читаю и ничего не могу понять, посоветуйте какие нибудь книги по этому делу
Огромное спасибо, вот по этой статье я научился Ajax...
Для меня так проще jqueryвский .ajax(). Неохота на низкий уровень лезть.
великое cпасибо за азы...
Здравствуйте Автор!
Это действительно доступная в понимании и полезная инфа, для тех кто начинает осваивать такого рода программирование. Я до этого находил примеры такого типа но они у меня не работали. Данный пример работает, но к сожалению в IE7 (будь он проклят) почему то не хочет. я заключил верхний код обработчик в <script>function myajax() { код }</script>
а нижний код серверную часть как и полагается в файл xmlhttp.php
сделал гиперссылку для вызова функции <a onclick="myajax()"текст</a>
IE видит в строке выше какую-то ошибку, что там ни так?
За статью Спасибо
Огромное спасибо за статью. Сберегли мне уйму времени!
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, и как передавать картинки? Как только получить информацию, без передачи конкретных параметров?
Это правда, что аякс можно использовать с jquery и это намного удобнее, чем вышеописанный метод?
Модно говорить: "аджакс" :D
Спасибо, чуть было не скачал себе книгу.
А я скачал эту самую книгу и первый же код у меня отказался работать )). Погуглив попал на этот сайт, не скажу что и здесь все понял, но от книги точно откажусь
Здравствуйте. Прошу помочь - куча ресурсов пересмотрел по ajax но так ничего и не получается. Создал в одной папке файлы try.html и xmlhttp.php .В первом файле html код - в head-е функция вызова ajax скопированная с этой статьи, ну и в body кнопка с onClick вызовом этой функции. Перезагрузил локальный сервер, обновляю try.html - кликаю по кнопке - никакой реакции... вывожу свойства req.readyState (оно равно 4), и свойство req.status (оно почему-то равно 0). Нигде не нашёл что означает 0. Подскажите в чем может быть проблема.
Подскажите в чем может быть причина, у меня не работает POST запрос, GET проходит нормально, а в POST при req.readyState == 4 req.status равен 0.
Вот хороший ресур про XMLHTTPRequest, всем советую:
http://xmlhttprequest.ru/