Я думаю, вы правы. Этот метод слишком глобален ...
Однако - это хороший вариант по умолчанию, когда ваш вызов AJAX не влияет на саму страницу. (фон сохранить, например). (вы всегда можете отключить его для определенного вызова ajax, передав «global»: false - см. документацию в jquery
Когда вызов AJAX предназначен для обновления части страницы, мне нравится, когда мои «загружаемые» изображения относятся к обновленному разделу. Я хотел бы увидеть, какая часть обновляется.
Представьте, как было бы здорово, если бы вы могли просто написать что-то вроде:
$("#component_to_refresh").ajax( { ... } );
И это будет показывать «загрузку» в этом разделе. Ниже приведена функция, которую я написал, которая также обрабатывает отображение «загрузки», но она относится к области, которую вы обновляете в ajax.
Во-первых, позвольте мне показать вам, как его использовать
<!-- assume you have this HTML and you would like to refresh
it / load the content with ajax -->
<span id="email" name="name" class="ajax-loading">
</span>
<!-- then you have the following javascript -->
$(document).ready(function(){
$("#email").ajax({'url':"/my/url", load:true, global:false});
})
И это функция - базовый старт, который вы можете улучшить по своему желанию. это очень гибкий.
jQuery.fn.ajax = function(options)
{
var $this = $(this);
debugger;
function invokeFunc(func, arguments)
{
if ( typeof(func) == "function")
{
func( arguments ) ;
}
}
function _think( obj, think )
{
if ( think )
{
obj.html('<div class="loading" style="background: url(/public/images/loading_1.gif) no-repeat; display:inline-block; width:70px; height:30px; padding-left:25px;"> Loading ... </div>');
}
else
{
obj.find(".loading").hide();
}
}
function makeMeThink( think )
{
if ( $this.is(".ajax-loading") )
{
_think($this,think);
}
else
{
_think($this, think);
}
}
options = $.extend({}, options); // make options not null - ridiculous, but still.
// read more about ajax events
var newoptions = $.extend({
beforeSend: function()
{
invokeFunc(options.beforeSend, null);
makeMeThink(true);
},
complete: function()
{
invokeFunc(options.complete);
makeMeThink(false);
},
success:function(result)
{
invokeFunc(options.success);
if ( options.load )
{
$this.html(result);
}
}
}, options);
$.ajax(newoptions);
};