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

Автор: Николай Петрунин Дата публикации: 29.02.2012

Задача

Ситуация: в интерфейсе присутствует несколько кнопок/иконок/картинок клик по которым выполняет 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

По теме