calling Web service via ajax - proper response in my error callback

Question

I am trying to get some data from a web service via ajax using the below function, but I get this response message:

{"readyState":4, "status":200, "statusText":"load"} 

The WS is supposed to return an array of json and, if I look in my chrome dev tool in network tab -> Response, I actually get the proper array of json.

Question:

1. Why am I getting the result in my errorFunction callback?

function callWebService(wsUrl, params, successFunction, errorFunction) {

    $.ajax({
        beforeSend: function (xhr) {
            xhr.setRequestHeader('Access-Control-Allow-Methods', ' GET');
            xhr.setRequestHeader("Content-Type",
                "application/json; charset=utf-8");
            xhr.setRequestHeader("Accept", "application/json");
        },
        type: "GET",
        url: wsUrl,
        data: params,
        dataType: "json",
        contentType: "application/json",
        success: successFunction,
        error: errorFunction
    });
}

Here is my console.log when I use this error function function(jqXHR, status, error)

*Resource interpreted as Script but transferred with MIME type text/html: "http://www.myweb.it/services/service.php?callback=jQu…y21109160579217132181_1405523828314&codice_istituto=150201&_=1405523828315". jquery.js:8691send jquery.js:8691jQuery.extend.ajax jquery.js:8152callWebService global.js:5(anonymous function) index.js:49jQuery.event.dispatch jquery.js:4409elemData.handle jquery.js:4095
an error occurred: index.js:52
parsererror index.js:53
Error {stack: (...), message: "jQuery21109160579217132181_1405523828314 was not called"}message: "jQuery21109160579217132181_1405523828314 was not called"stack: (...)get stack: function () { [native code] }set stack: function () { [native code] }__proto__: d index.js:54
readyState: 4 index.js:56
jqXHR.status: 200 index.js:57
jqXHR.statusText:load index.js:58
jqXHR.responseText: undefined* 

Answer 1

You're seeing the error callback fired because there's something wrong with your AJAX request, and it's not returning successfully. Identifying why this happens is another matter.

The first argument jQuery passes to your error callback is the jqXHR object:

error 
Type: Function( jqXHR jqXHR, String textStatus, String errorThrown )

This is different from the success callback, which begins with the data returned:

success
Type: Function( PlainObject data, String textStatus, jqXHR jqXHR )

jqXHR is a superset of the xmlHttpRequest object JavaScript returns. Inside it, you're seeing readyState of 4, which simply means "done", and status of 200 means a successful request. So, at least you know you're probably pointing your request at the right URL.

You should be able to get other information from your jqXHR object which might help you identify the cause of the error. From the docs:

For backward compatibility with XMLHttpRequest, a jqXHR object will expose the following properties and methods:

• readyState
• status
• statusText
• responseXML and/or responseText when the underlying request responded with xml and/or text, respectively
• setRequestHeader(name, value) which departs from the standard by replacing the old value with the new one rather than concatenating the new value to the old one
• getAllResponseHeaders()
• getResponseHeader()
• statusCode()
• abort()