मेरे विचार से आप सही है। यह विधि बहुत वैश्विक है ...
हालाँकि - यह तब के लिए एक अच्छा डिफ़ॉल्ट है जब आपके AJAX कॉल का पेज पर कोई प्रभाव नहीं पड़ता है। (उदाहरण के लिए पृष्ठभूमि बचाओ)। (आप हमेशा "ग्लोबल" पास करके एक निश्चित अजाक्स कॉल के लिए इसे बंद कर सकते हैं: झूठी - jquery पर प्रलेखन देखें
जब AJAX कॉल पृष्ठ के भाग को ताज़ा करने के लिए होती है, तो मुझे ताज़ा अनुभाग में विशिष्ट होने के लिए मेरी "लोडिंग" छवियां पसंद हैं। मैं देखना चाहूंगा कि कौन सा हिस्सा ताज़ा है।
कल्पना करें कि यदि आप कुछ ऐसा लिख सकते हैं तो यह कितना अच्छा होगा:
$("#component_to_refresh").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);
};