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

Подготовил: Анатолий Петушков Дата публикации: 05.12.2014 Cooking Fever [iOS,RU,Incent]

Задача

Ситуация: в интерфейсе присутствует несколько кнопок/иконок/картинок, клик по которым выполняет AJAX запрос. При этом необходимо, чтобы выполнился только последний: такой вариант нужен, когда результаты ответа могут (или должны) повлиять на результаты остальных запросов. Чтобы не блокировать весь интерфейс при выполении запросов, можно выполнить только последний запрос. Фактически нужно отменить все предыдущие запросы и пропустить только последний.

Решение

Для отмены AJAX запроса используем метод abort():

var searching = {
	checkAjax: null,//переменная для проверки выполнения аякс запроса
	checkSearch: function(){//функция проверки заполнености поля поиска историй
		$("#searchText").keyup(function(){
			var searchForm =  $("#search");//форма поиска
			if(searching.checkAjax!=null){//удаляем предыдущий запрос если есть такой 
				searching.checkAjax.abort();			
			}
			searching.checkAjax = $.ajax({//данные для аякс запроса
				url: searchForm.attr("action"),//путь к php скрипту берем с атрибута aсtion формы
				data: searchForm.serialize(), // отправляем на сервер данные формы	
				dataType: "json", // определяем тип получаемых данных
				timeout: 20000,
				type: "POST",
				success: function(msg){
					//действия при получении ответа
					$("#answers").append("<p>" + msg.answer + "</p>");
				},
				error: function(XMLHttpRequest){
					if(XMLHttpRequest.statusText!="abort"){//если запрос отменен не выводим сообщение об ошибке
						// действие при возникновении ошибки
						alert("При попытке отправить сообщение произошла неизвестная ошибка. \n Попробуй еще раз через несколько минут.");		
					}
					else{			
						var	count = parseInt($("#count").text());		
						count++;
						$("#count").text(count);
					}
				}
			});
		});
	}
}

Демо пример в живую. Проверено в:

  • IE 7-9
  • Firefox 10
  • Opera 11
  • Safari 5
  • Chrome

По теме

Теги: ,
Показать комментарии