AJAX - это очень просто
AJAX - это очень просто
AJAX, от английского "Asynchronous Javascript and XML" - "асинхронный JavaScript и XML" - одна из технологий построения WEB-интерфейсов, заключающаяся в фоновом обмене данными браузера с сервером. При использовании этой технологии веб-страница не перезагружается полностью, и приложения становятся быстрее и удобнее. Сейчас сложно представить современные сайты или веб-приложения без применения этой технологии в том или ином виде. Практически все существующие нынче JavaScript-фреймворки предоставляют инструменты для реализации AJAX-запросов, но я предпочитаю работать с чистым JavaScript. Если вам интересно, как устроена технология AJAX изнутри, то предлагаю вашему вниманию эту статью.
Краеугольным камнем, на котором базируется вся технология AJAX, является XMLHttpRequest - особый объект, через который выполняются все запросы к серверу и возвращается ответ в вызывающий скрипт. В разных браузерах он создается по-разному, вот кроссбраузерный вариант:
Code (JavaScript) : Убрать нумерацию
- // Mozilla, Safari, Opera, Chrome
- if (window.XMLHttpRequest) {
- http_request = new XMLHttpRequest();
- }
- // Internet Explorer
- else if (window.ActiveXObject) {
- try {
- http_request = new ActiveXObject("Msxml2.XMLHTTP");
- }
- catch (e) {
- try {
- http_request = new ActiveXObject("Microsoft.XMLHTTP");
- }
- catch (e) {
- // Браузер не поддерживает эту технологию
- }
- }
- }
- else {
- // Браузер не поддерживает эту технологию
- }
Code (JavaScript) : Убрать нумерацию
- // Имя скрипта для приема данных
- var ajax_file = 'ajax.php';
- //--------------------------------------------------------------
- // Отправка данных методом POST
- //--------------------------------------------------------------
- http_request.open('POST', ajax_file, true);
- http_request.setRequestHeader('Content-Type',
- 'application/x-www-form-urlencoded');
- http_request.setRequestHeader('Accept-Language', 'en');
- http_request.setRequestHeader('Accept-Charset', 'windows-1251');
- // Отправить на сервер данные
- http_request.send('login=123&password=SUPER');
- //--------------------------------------------------------------
- // Отправка данных методом GET
- //--------------------------------------------------------------
- http_request.open('GET', ajax_file+'?login=123&password=SUPER', true);
- http_request.send('');
Отлично, отправлять данные на сервер мы научились. Но вся прелесть AJAX заключается не только в отправке данных, но и в их получении с сервера. Как это сделать? Можно воспользоваться синхронным AJAX, как бы парадоксально это словосочетание ни было. За синхронность AJAX-запроса отвечает третий параметр метода open. Если он false, то запрос выполняется синхронно и он же возвращает данные от сервера. Если этот параметр равен true, то запрос выполняется асинхронно, этот случай мы рассмотрим чуть позже.
Code (JavaScript) : Убрать нумерацию
- //--------------------------------------------------------------
- // Синхронная отправка данных методом POST
- //--------------------------------------------------------------
- http_request.open('POST', ajax_file, false);
- http_request.setRequestHeader('Content-Type',
- 'application/x-www-form-urlencoded');
- http_request.setRequestHeader('Accept-Language', 'en');
- http_request.setRequestHeader('Accept-Charset', 'windows-1251');
- // Отправить данные и получить ответ сервера
- http_request.send('login=123&password=SUPER');
- alert('Получен ответ: ' + http_request.responseText);
- //--------------------------------------------------------------
- // Синхронная отправка данных методом GET
- //--------------------------------------------------------------
- http_request.open('GET', ajax_file+'?login=123&password=SUPER', false);
- // Отправить данные и получить ответ сервера
- http_request.send('');
- alert('Получен ответ: ' + http_request.responseText);
Особенностью асинхронного запроса является то, что после его выполнения браузер не останавливается, а продолжает выполнять следующие команды. Как в этом случае получить результат выполнения? Очень просто. В объекте XMLHttpRequest предусмотрено событие onreadystatechange, значит нам достаточно поставить на него свой обработчик. Но сперва немного теории. В атрибуте readyState объекта XMLHttpRequest устанавливается текущий статус выполнения запроса, и при каждом его изменении вызывается обработчик onreadystatechange. Финальным статусом, после которого запрос считается обработанным, является значение 4. В атрибуте status сохраняется HTTP-статус сервера, корректным будет значение 200. Значит в обработчике нам надо будет проверять оба атрибута, сперва запрос должен перейти в состояние readyState=4, и при этом сервер должен ответить с HTTP-статусом 200. Осталось собрать это в одну функцию:
Code (JavaScript) : Убрать нумерацию
- http_request.onreadystatechange = function() {
- // Запрос завершен с каким-то результатом
- if (http_request.readyState==4) {
- // Сервер отработал успешно
- if (http_request.status==200) {
- alert('Получен ответ: ' + http_request.responseText);
- }
- else {
- // Произошла ошибка при выполнении запроса типа
- // "страница не найдена", "внутренняя ошибка сервера",
- // "доступ запрещен" или что-то типа такого
- }
- }
- };
Code (PHP) : Убрать нумерацию
- // Имитируем упорную работу
- sleep(5);
- echo 'Hello from AJAX';
Просмотров: 8791 | Комментариев: 4
Метки: AJAX, JavaScript
Внимание! Статья опубликована больше года назад, информация могла устареть!
Комментарии
Отзывы посетителей сайта о статье
ManHunter
(20.09.2013 в 09:21):
Можно и так. Спасибо за дополнение!
ezfalc0n
(18.09.2013 в 15:54):
Может сначало пробывать подключать "Msxml2.XMLHTTP", т.к. он более "свежий", а, если не получилось, то старый "Microsoft.XMLHTTP"?
vagon
(01.08.2013 в 19:46):
Действительно, все как всегда расписано понятно и для тех кто ничего не понимает, для меня в том числе :)
Но обычно бывает нужно передать данные именно из onclick, у Вас же все прописано прямо в функции. Подскажите пожалуйста, как это сделать...
Но обычно бывает нужно передать данные именно из onclick, у Вас же все прописано прямо в функции. Подскажите пожалуйста, как это сделать...
Василий
(11.07.2013 в 14:37):
Спасибо. Все просто и понятно. Очень помогли.
Добавить комментарий
Заполните форму для добавления комментария
Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.
Вам помог этот сайт?
Поблагодарили 34,350 раз
Поблагодарили 34,350 раз
Буду очень благодарен, если размеcтите мою кнопочку:
 |
Яндекс ИКС: 380 |
 |
 |