Blog. Just Blog

Отмена AJAX-запроса

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

Вряд ли кто-то будет спорить, что технология AJAX для передачи данных - это очень удобно. В дополнение к предыдущим статьям я расскажу, как можно отменить AJAX-запрос. Зачем это надо? Пример из практики: есть карта, на видимую часть которой асинхронно подгружаются объекты. Пользователь перетаскивает карту, соответственно, на каждый новый видимый участок запрашивается новый список объектов. Иногда получается так, что запрос выполняется дольше, чем пользователь перемещает карту. Накапливается очередь из запросов на сервер, в свою очередь приводящая к очереди на отображение данных на клиентской стороне. Хотя правильно было бы показывать только результаты самого последнего запроса, а остальные запросы просто подавлять.

Для отмены AJAX-запроса в чистом JavaScript используется метод abort. Перед отправкой нового запроса проверяется наличие ранее созданного объекта XMLHttpRequest и, если он существует, то к нему применяется метод abort.
  1. // Запрос уже отправлен, отменить его
  2. if (http_request!=null) {
  3.     http_request.abort();
  4. }
  5.  
  6. // Mozilla, Safari, Opera, Chrome
  7. if (window.XMLHttpRequest) {
  8.     http_request = new XMLHttpRequest();
  9. }
  10. // Internet Explorer
  11. else if (window.ActiveXObject) {
  12.     try {
  13.         http_request = new ActiveXObject("Msxml2.XMLHTTP");
  14.     }
  15.     catch (e) {
  16.         try {
  17.             http_request = new ActiveXObject("Microsoft.XMLHTTP");
  18.         }
  19.         catch (e) {
  20.             // Браузер не поддерживает эту технологию
  21.         }
  22.     }
  23. }
  24. else {
  25.     // Браузер не поддерживает эту технологию
  26. }
  27.  
  28. // Получение результата
  29. http_request.onreadystatechange = function() {
  30.     // Запрос завершен с каким-то результатом
  31.     if (http_request.readyState==4) {
  32.         // Сервер отработал успешно
  33.         if (http_request.status==200) {
  34.             // Результат получен
  35.         }
  36.         else {
  37.             if (http_request.status==0) {
  38.                 // Запрос был отменен
  39.             }
  40.             else {
  41.                 // Произошла ошибка на стороне сервера
  42.             }
  43.         }
  44.         http_request=null;
  45.     }
  46. };
Готовый пример вы можете посмотреть на демонстрационной странице. При каждом нажатии на кнопку отправляется AJAX-запрос на сервер, который возвращает результат с секундной задержкой. Если до этого запрос уже был отправлен, то предыдущий запрос отменяется.

Поделиться ссылкой ВКонтакте
Просмотров: 2101 | Комментариев: 0

Метки: JavaScript, AJAX
Внимание! Статья опубликована больше года назад, информация могла устареть!

Комментарии

Отзывы посетителей сайта о статье
Комментариeв нет

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

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

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