Question

I am working on a project to call a webservice from different domain using $.ajax with dataType 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 I have a …loading animation which I want to display while the web service request is being processed. I tried using “beforeSend:” to show the loading animation but it seems like “beforeSend” is not getting fired.

The animation works fine when the app is on the same domain (using jsonp) but when I move the app into a different server, everything works except “beforeSend” is not getting called. So users will not be able to see the loading animation.

Is there any workaround for this?

Answer 1

Cross-domain JSONP requests do not use XMLHTTPRequest, so the event flow is different.

You can simply show your loading animation right after calling $.ajax.