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: - 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…

Accepted Answer

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

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

Solution

Problem