Jsonp doesn't fire before shipping?

Question

I am working on a project to call a web service from another domain using $ .ajax with the data type set to jsonp.

$.ajax({ type: "GET", url: testService.asmx, async: true, contentType: "application/json; charset=utf-8", dataType: "jsonp", beforeSend: function (XMLHttpRequest) { alert('Before Send'); //Nothing happnes }, success: function (response) { alert('Success'); //this was fired }, complete: function (XMLHttpRequest, textStatus) { alert('After Send'); //this was fired } }); 

The problem is that I have ... a loading animation that I want to display while processing a web service request. I tried using "beforeSend:" to show the loading animation, but it seems that "beforeSend" does not start.

Animation works fine when the application is in the same domain (using jsonp), but when I move the application to another server, everything works, except that "beforeSend" is not called. Thus, users will not be able to see the loading animation.

Is there a workaround for this?

Answer 1

JSONP cross-domain requests do not use XMLHTTPRequest, so the flow of events is different.

You can simply show your boot animation immediately after calling $ .ajax.

Answer 2

beforeSend jQuery JSONP implementation is running. At the moment, the solution:

 jQuery(document).ajaxStart(function(){alert('Before Send');}); // For all XHRs $('#id').ajaxStart(function(){alert('Before Send');}); // For unique XHR 

up to $.ajax({...}); .