Blog. Just Blog

AJAX - это очень просто

Версия для печати Добавить в Избранное Отправить на E-Mail | Категория: Web-мастеру и не только | Автор: ManHunter
AJAX - это очень просто
AJAX - это очень просто

AJAX, от английского "Asynchronous Javascript and XML" - "асинхронный JavaScript и XML" - одна из технологий построения WEB-интерфейсов, заключающаяся в фоновом обмене данными браузера с сервером. При использовании этой технологии веб-страница не перезагружается полностью, и приложения становятся быстрее и удобнее. Сейчас сложно представить современные сайты или веб-приложения без применения этой технологии в том или ином виде. Практически все существующие нынче JavaScript-фреймворки предоставляют инструменты для реализации AJAX-запросов, но я предпочитаю работать с чистым JavaScript. Если вам интересно, как устроена технология AJAX изнутри, то предлагаю вашему вниманию эту статью.

Краеугольным камнем, на котором базируется вся технология AJAX, является XMLHttpRequest - особый объект, через который выполняются все запросы к серверу и возвращается ответ в вызывающий скрипт. В разных браузерах он создается по-разному, вот кроссбраузерный вариант:
  1. // Mozilla, Safari, Opera, Chrome
  2. if (window.XMLHttpRequest) {
  3.     http_request = new XMLHttpRequest();
  4. }
  5. // Internet Explorer
  6. else if (window.ActiveXObject) {
  7.     try {
  8.         http_request = new ActiveXObject("Msxml2.XMLHTTP");
  9.     }
  10.     catch (e) {
  11.         try {
  12.             http_request = new ActiveXObject("Microsoft.XMLHTTP");
  13.         }
  14.         catch (e) {
  15.             // Браузер не поддерживает эту технологию
  16.         }
  17.     }
  18. }
  19. else {
  20.     // Браузер не поддерживает эту технологию
  21. }
После того, как объект XMLHttpRequest будет создан, можно отправлять данные на сервер. Делается это методом POST и GET, точно так же, как и при отправке обычной web-формы.
  1. // Имя скрипта для приема данных
  2. var ajax_file 'ajax.php';
  3.  
  4. //--------------------------------------------------------------
  5. // Отправка данных методом POST
  6. //--------------------------------------------------------------
  7. http_request.open('POST'ajax_filetrue);
  8. http_request.setRequestHeader('Content-Type',
  9.                                   'application/x-www-form-urlencoded');
  10. http_request.setRequestHeader('Accept-Language''en');
  11. http_request.setRequestHeader('Accept-Charset''windows-1251');
  12. // Отправить на сервер данные
  13. http_request.send('login=123&password=SUPER');
  14.  
  15. //--------------------------------------------------------------
  16. // Отправка данных методом GET
  17. //--------------------------------------------------------------
  18. http_request.open('GET'ajax_file+'?login=123&password=SUPER'true);
  19. http_request.send('');
При использовании отправки данных через POST, нет необходимости их еще дополнительно кодировать, экранировать или заменять служебные символы, а также нет ограничений на размер отправляемых данных. При отправке запросов через GET придется следить за отправляемыми данными и за их объемом. Данные передаются в формате "поле=значение" и разделяются амперсандом, примерно как в адресной строке браузера.

Отлично, отправлять данные на сервер мы научились. Но вся прелесть AJAX заключается не только в отправке данных, но и в их получении с сервера. Как это сделать? Можно воспользоваться синхронным AJAX, как бы парадоксально это словосочетание ни было. За синхронность AJAX-запроса отвечает третий параметр метода open. Если он false, то запрос выполняется синхронно и он же возвращает данные от сервера. Если этот параметр равен true, то запрос выполняется асинхронно, этот случай мы рассмотрим чуть позже.
  1. //--------------------------------------------------------------
  2. // Синхронная отправка данных методом POST
  3. //--------------------------------------------------------------
  4. http_request.open('POST'ajax_filefalse);
  5. http_request.setRequestHeader('Content-Type',
  6.                                   'application/x-www-form-urlencoded');
  7. http_request.setRequestHeader('Accept-Language''en');
  8. http_request.setRequestHeader('Accept-Charset''windows-1251');
  9. // Отправить данные и получить ответ сервера
  10. http_request.send('login=123&password=SUPER');
  11. alert('Получен ответ: ' http_request.responseText);
  12.  
  13. //--------------------------------------------------------------
  14. // Синхронная отправка данных методом GET
  15. //--------------------------------------------------------------
  16. http_request.open('GET'ajax_file+'?login=123&password=SUPER'false);
  17. // Отправить данные и получить ответ сервера
  18. http_request.send('');
  19. alert('Получен ответ: ' http_request.responseText);
Плюсами синхронного метода являются его линейность и простота реализации, но минусы более весомы: браузер намертво "клинит" до окончания запроса и практически невозможно отследить ошибку, если скрипт или сервер не отвечает. Тем не менее, синхронный способ тоже имеет место быть.

Особенностью асинхронного запроса является то, что после его выполнения браузер не останавливается, а продолжает выполнять следующие команды. Как в этом случае получить результат выполнения? Очень просто. В объекте XMLHttpRequest предусмотрено событие onreadystatechange, значит нам достаточно поставить на него свой обработчик. Но сперва немного теории. В атрибуте readyState объекта XMLHttpRequest устанавливается текущий статус выполнения запроса, и при каждом его изменении вызывается обработчик onreadystatechange. Финальным статусом, после которого запрос считается обработанным, является значение 4. В атрибуте status сохраняется HTTP-статус сервера, корректным будет значение 200. Значит в обработчике нам надо будет проверять оба атрибута, сперва запрос должен перейти в состояние readyState=4, и при этом сервер должен ответить с HTTP-статусом 200. Осталось собрать это в одну функцию:
  1. http_request.onreadystatechange = function() {
  2.     // Запрос завершен с каким-то результатом
  3.     if (http_request.readyState==4) {
  4.         // Сервер отработал успешно
  5.         if (http_request.status==200) {
  6.             alert('Получен ответ: ' http_request.responseText);
  7.         }
  8.         else {
  9.             // Произошла ошибка при выполнении запроса типа
  10.             // "страница не найдена", "внутренняя ошибка сервера",
  11.             // "доступ запрещен" или что-то типа такого 
  12.         }
  13.     }
  14. };
Готовый пример синхронных и асинхронных AJAX-запросов вы можете посмотреть на демонстрационной странице. В нем используется серверный скрипт такого содержания:
  1. // Имитируем упорную работу
  2. sleep(5);
  3. echo 'Hello from AJAX';
Как видите, в технологии AJAX нет ничего сложного и таинственного. И совершенно необязательно таскать за собой десятки и сотни килобайт посторонних фреймворков ради одного AJAX, вы можете реализовать весь этот функционал самостоятельно.

Поделиться ссылкой ВКонтакте Поделиться ссылкой на Facebook Поделиться ссылкой на LiveJournal Поделиться ссылкой в Мой Круг Добавить в Мой мир Добавить на ЛиРу (Liveinternet) Добавить в закладки Memori Добавить в закладки Google
Просмотров: 6985 | Комментариев: 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, у Вас же все прописано прямо в функции. Подскажите пожалуйста, как это сделать...
Василий (11.07.2013 в 14:37):
Спасибо. Все просто и понятно. Очень помогли.

Добавить комментарий

Заполните форму для добавления комментария
Имя*:
Текст комментария (не более 2000 символов)*:

*Все поля обязательны для заполнения.
Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2018
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.09 сек. / MySQL: 2 (0.005 сек.) / Память: 4.75 Mb
Наверх