CODEWITHSUNDEEP
javascriptjqueryajax
Pensierinmusica
Pensierinmusica

Reputation: 6958

jQuery: is there any difference between $.ajaxSetup(beforeSend) and $(document).ajaxSend?

Using jQuery (v2.1.4), is there any difference between these two methods?

1) $.ajaxSetup(beforeSend)

$.ajaxSetup({
  beforeSend: function (jqXHR, settings) {
    // whatever you need to do before
    // any jQuery Ajax request is sent
  }
});

2) $(document).ajaxSend

$(document).ajaxSend(function (event, jqXHR, settings) {
  // whatever you need to do before
  // any jQuery Ajax request is sent
});

Is there any reason to prefer one over the other?

Thanks!

Upvotes: 4

Views: 3442

Answers (3)

Joel Almeida
Joel Almeida

Reputation: 8037

From jQuery $.ajaxSetup() documentation:

All subsequent Ajax calls using any function will use the new settings, unless overridden by the individual calls, until the next invocation of $.ajaxSetup().

The $.ajaxSetup() does something like this: 

ajaxExtend(jQuery.ajaxSettings, target);

From $.ajaxSend() documentation:

Whenever an Ajax request is about to be sent, jQuery triggers the ajaxSend event. Any and all handlers that have been registered with the .ajaxSend() method are executed at this time.

And the jQuery source for $.ajaxSend(): 

function (fn) {
    return this.on(type, fn);
}

So, basically the $(document).ajaxSend() adds an event listener to all the document where you can make any handler to execute anytime a jQuery Ajax call is about to be sent (the handler intercepts it, but XMLHttpRequest.readyState value is already 1 - "Opened").

This means that if $.ajax() is called with the global option set to false, the ajaxSend() method will not fire.

While on the $.ajaxSetup() you are in fact creating defaults for every single jQuery Ajax call's settings, and the callback defined through the beforeSend option will always be called (XMLHttpRequest.readyState value is 0 - "Unsent").

Upvotes: 2

Rohit Kumar
Rohit Kumar

Reputation: 1958

Both do very similar function , but it always depend on the need There are some key points , on which you may focus

  1. ajaxSend() method, must be attached to document only.
  2. if $.ajax() is called with the global option set to false, the ajaxSend() method will not fire.
  3. the beforeSend option will be called regardless of the type of request.

From the perspective of priority, you can use in such a manner, do all setup options in ajaxSend and for custom or specific ajax request override it with beforeSend in $.ajax().

HTML

<body>

<div><h2>Let AJAX change this text</h2></div>

<button id="btn1">Change Content</button>
<button id="btn2">Change Content Override</button>

</body>

JS 

   $(document).ajaxSend(function(e, xhr, opt){
        $("div").append("<p>Requesting " + opt.url + "</p>");
    });
    $("#btn1").click(function(){
        $("div").load("yourpage.html");
    });
    $("#btn2").click(function(){
        $.ajax({
        global: false,
        beforeSend:function(){$("div").append("<p>Overriding</p>");}
        });
    $("div").load("yourpage.html");
    });

LIVE http://jsfiddle.net/mailmerohit5/w8t44247/

Upvotes: 0

Armitage.apk
Armitage.apk

Reputation: 131

From JQuery's documentation:

There are two types of events:

Local Events These are callbacks that you can subscribe to within the Ajax request object, like so:

 $.ajax({
     beforeSend: function(){
     // Handle the beforeSend event
  },
     complete: function(){
     // Handle the complete event
  }
  // ......
});

Global Events

These events are triggered on the document, calling any handlers which may be listening. You can listen for these events like so:

$(document).bind("ajaxSend", function(){
   $("#loading").show();
 }).bind("ajaxComplete", function(){
   $("#loading").hide();
 });

Global events can be disabled for a particular Ajax request by passing in the global option, like so:

$.ajax({
    url: "test.html",
    global: false,
    // ...
});

for more information

Upvotes: 0

Related Questions