JS: Автоматический индикатор Ajax запроса или Ajax with loader

Библиотека Jquery имеет богатый функционал, который значительно упрощает жизнь разработчикам. Однако всегда можно упростить жизнь еще больше. Сегодня я приведу пример небольшого расширения стандартного метода $.ajax который может показывать или скрывать индикатор ajax loader.

Имея данную заготовку Вы вполне сможете дореализовать, например, автоматическое создание индикатора запроса. Давайте создадим файл extension.js со следующим кодом.

jQuery.extend({
	ajaxWithWaiter: function(params) {
    
		var waiterAction = function(selector, action) {
			var $waiterElement = null;
			if(typeof(selector) == 'string') {
				$waiterElement = $(selector);
			}    
			if($waiterElement != null && $waiterElement.length > 0) {
				action = action || 'toggle';
				switch(action) {
					case 'show':
						$waiterElement.show();
						break;
					case 'toggle':
						$waiterElement.toggle();
						break;
					case 'hide':
					default:
						$waiterElement.hide();
						break;        
				}    
			}
		}
		
		params = params || {};
		
		var fComplete = null;
		
		if(typeof(params.complete) == 'function') {
			fComplete = params.complete;
		}
		
		params.complete = function(jqXHR, status) {
			waiterAction(params.waiter, 'hide');
			if(fComplete != null) {
				fComplete(jqXHR, status);
			}	 
		}
		
		waiterAction(params.waiter, 'show');
		
		$.ajax(params);
	}
});

Если вкратце, то данный код расширяет библиотеку JQuery функцией ajaxWithWaiter, которая по сути является аналогом функции ajax. Отличае данной фунеции, что она имеет дополнительный параметр waiter — селектор элемента, который нужно показать перед отправкой запроса и скрыть после срабатывания его завершения.

Пример использования:

<html>
<head>
	<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
	<script src="extension.js"></script>

</head>
<body>
	<script>
		var sendAjax = function() {
			$.ajaxWithWaiter({
				url: 'ajax.php',
				data: {
					foo: 'bar'
				},
				type: 'post',
				waiter: '#ajax-loader', //Новый параметр - селектор нашего индикатора
				success: function(answer) {
					alert('Success');
				},
				error: function(jqXHR, status, error) {
					alert('Error');
				}
			});
		}
	</script>
	<input type="button" value="Ajax" onclick="sendAjax();" />
	<img src="http://cdn.osxdaily.com/wp-content/uploads/2013/07/dancing-banana.gif" id="ajax-loader" style="display:none;" />
</body>
</html>
Запись опубликована в рубрике JavaScript с метками , , , , , , , , , , , . Добавьте в закладки постоянную ссылку.