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: ".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* 

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* 

• javascript
• jquery
• ajax
• json

• 1 That looks like the jqXHR object to me. – Blazemonger Commented Jul 16, 2014 at 12:56
• i think although this is in error callback but your call got the response so {"readyState":4, "status":200, "statusText":"load"}. – Jai Commented Jul 16, 2014 at 12:58
• @Blazemonger what do you mean by this? (I am new to ajax) – eeadev Commented Jul 16, 2014 at 12:59
• Not to be rude, but a web search for "ajax readyState status" would turn up several promising results. – Blazemonger Commented Jul 16, 2014 at 13:11
• @Blazemonger, right but I cannot easily find "statusText":"load" – eeadev Commented Jul 16, 2014 at 13:44

3 Answers 3

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 patibility 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()

That object you're seeing is an XMLHTTPResponse; a representation of the actual AJAX request. You're getting it passed into your error handler because that's the first argument of jQuery's ajax error callback.

Figuring out why it's calling the error callback and not the success callback is harder. That statusText suggests that your server returned the string 'load' - is that a possibility? Another mon problem is if your data isn't actually valid JSON. JSON's quite a picky format; if you're producing it yourself, you might have invalid whitespace or the wrong kind of quotes (or pletely missing quotes). Check your data with a tool like JSONLint and make sure it's valid, and make sure that your server is only returning JSON - nothing else in the response body.

Just a work around 1. remove dataType:'json' 2. parse json in success function call data = $.parseJSON(data);