in jquery how to call a function after an ajax request has been sent?

Question

How can I call my function: myFunc1 in jquery after the browser has completely sent an ajax request?

I want to run a callback function after a jquery ajax has been sent. I don't want to do this on complete or success because I don't want to wait for the request to complete. I want to fire it right after the ajax request has been sent from the browser.

This is use case for which i need this:

I want run a function after making an ajax request. My original code was this:

  $.ajax({url: 'x.html'});
  myFunc1();

In the case when `myFunc1() changes the browsers location, the browser would cancel the pending ajax request.

My current solution is to do this:

  $.ajax({url: 'x.html', complete: myFunc1});

This makes sure that myFunc1 is not called till the ajax is complete. Although this solution works, it is inefficient because myFunc1 wont run till the request is complete. Since I don't care what the ajax request returns, whether it fails or succeeds, I dont need to wait for it to complete to run the myFunc1 function.

If you're not interested in a callback then just fire `myFunc1` at the same time as your ajax call. — Matt Ryan, Sep 07 '13 at 03:14

Scott · Answer 1 · 2013-09-05T17:52:48.137

0

If you look at the specification:

http://www.w3.org/TR/XMLHttpRequest/

You'll see 2 means the headers have been returned already.

const unsigned short **HEADERS_RECEIVED** = 2;

This is essentially the same as jqXHR success. Your browser may vary =)

No seriously.. they will vary, another reason jquery can't support them all and chooses to abstract them:

http://msdn.microsoft.com/library/ie/ms534361.aspx

https://developer.mozilla.org/en-US/docs/Web/API/document.readyState

(couldn't find an authoritative source for chrome)

edited Sep 05 '13 at 17:52

answered Sep 05 '13 at 17:47

Scott

1,012
7
14

well i want an event after a request has been `sent` from the browser, not necessarily `readystate=2`. I have updated my question to reflect that. – user566245 Sep 05 '13 at 17:53
I am basically saying there is no way to do this in every browser. For example Mozilla only fires loading and complete according to spec. jQuery can only serve as the lowest common denominator when it comes to event and data provided by the browser. The events they provide are the only ones that can be gleaned consistently. http://jsfiddle.net/KpXBP/1/ They all appear, maybe if I have some more time I can try to actually figure out when they are firing. Some could just be BS. – Scott Sep 05 '13 at 18:28

score 0 · Answer 2 · answered Sep 07 '13 at 07:52

0

Actually sounds like you want the function to fire upon the start of the AJAX request.

$("#btn-ajax").ajaxStart(myFunc1);

function myFunc1() {
   $("#message").html("I don't really care if the ajax call succeeds.");
}

answered Sep 07 '13 at 07:52

jive137

92
7

score 0 · Accepted Answer · answered Sep 28 '13 at 17:24

This is what i did to run my callback function sufficiently after the AJAX call had been made so the browser doesn't cancel it and without having to wait for the server to complete the resquest:

  var cb = function(){
    window.document.location.href="http://google.com";
  }

  $.ajax({
    url: 'x.html',
    complete: cb,
    timeout: 100
  });

Here the timeout makes sure that if my server doesn't repond in 100ms, the callback is executed. 100ms also is sufficient time for the browser to send the request.

I experimented with status codes and finally ended up not using them. I found them to unreliable cross browser and for JSONP requests missing.

score -1 · Answer 4 · answered Sep 07 '13 at 04:00

-1

I think you want to use the beforeSend option.

see http://api.jquery.com/jQuery.ajax/

answered Sep 07 '13 at 04:00

Dorren Chen

206
2
3

1

OP explicitly asks for callback *after* request is sent. – sznowicki Jun 17 '16 at 10:48

in jquery how to call a function after an ajax request has been sent?

4 Answers4