jQuery API

.ajaxSend()

.ajaxSend( handler(event, jqXHR, ajaxOptions) ) Returns: jQuery

Description: Attach a function to be executed before an Ajax request is sent. This is an Ajax Event.

  • version added: 1.0.ajaxSend( handler(event, jqXHR, ajaxOptions) )

    handler(event, jqXHR, ajaxOptions)The function to be invoked.

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.

To observe this method in action, we can set up a basic Ajax load request:

<div class="trigger">Trigger</div>
<div class="result"></div>
<div class="log"></div>

We can attach our event handler to any element:

$('.log').ajaxSend(function() {
  $(this).text('Triggered ajaxSend handler.');
});

Now, we can make an Ajax request using any jQuery method:

$('.trigger').click(function() {
  $('.result').load('ajax/test.html');
});

When the user clicks the element with class trigger and the Ajax request is about to begin, the log message is displayed.

Note: Because .ajaxSend() is implemented as a method of jQuery instances, we can use the this keyword as we do here to refer to the selected elements within the callback function.

All ajaxSend handlers are invoked, regardless of what Ajax request is to be sent. If we must differentiate between the requests, we can use the parameters passed to the handler. Each time an ajaxSend handler is executed, it is passed the event object, the jqXHR object (in version 1.4, XMLHttpRequestobject), and the settings object that was used in the creation of the Ajax request. For example, we can restrict our callback to only handling events dealing with a particular URL:

$('.log').ajaxSend(function(e, jqxhr, settings) {
  if (settings.url == 'ajax/test.html') {
    $(this).text('Triggered ajaxSend handler.');
  }
});

Example:

Show a message before an Ajax request is sent.

$("#msg").ajaxSend(function(evt, request, settings){
        $(this).append("<li>Starting request at " + settings.url + "</li>");
      });

Support and Contributions

Need help with .ajaxSend() or have a question about it? Visit the jQuery Forum or the #jquery channel on irc.freenode.net.

Think you've discovered a jQuery bug related to .ajaxSend()? Report it to the jQuery core team.

Found a problem with this documentation? Report it on the GitHub issue tracker

  • http://twitter.com/alexbosworth Alex Bosworth

    This doesn't appear to trigger for JSONP reqs (jq1.4.0)

    • yaolei

      why?

  • http://twitter.com/melwynfurtado Melwyn Furtado

    beforeSend event is also not triggered for jsonp requests.

  • http://ae911truth.org/ Steve

    Where do I find out more about the “settings” properties. All I see is .url

    • http://www.learningjquery.com/ Karl Swedberg

      click the “settings object” link in the entry above.

      • Sushaogang1986

        i just learn jquery now ,how i should do to learn it well?

  • http://www.twitter.com/NicBright Nicolas B.

    It'd be nice if the documentation explained what will happen to the handler attached to an element once the element gets removed from the DOM. Does the handler cease to exist, too?

    • Liu_sl2005

      hello,if the element is removed,the handler will not be invoked!

  • http://twitter.com/criptkiller jonathan fontes

    I can use the next piece of code ?
    $(“#msg”).ajaxSend(function(evt, request, settings){
    alert(evt.loaded/evt.total);
    });

    If not, who i can do that ? To do a progressbar without a plugin .

  • Susshaogang1986

    how should i use it properly?

  • Susshaogang1986

    how should i use it properly?

  • Sushaogang1986

    i just learn jquery now ,how i should do to learn it well?

  • Wa

    asdsa