Библиотека 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>
