Why does $.ajax call for json data trigger the error callback when http status code is "200 OK"?

Question

I have the following ajax request:

        jQuery.ajax({
            async: true,
            type: "GET",
            url: url,
            data: data,
            dataType: "json",
            success: function(results){
                currentData = results;
            },
            error: function(xhr, ajaxOptions, thrownError){
                if (xhr.status == 200) {
                    console.debug("Error code 200");
                }
                else {
                    currentData = {};
                    displayAjaxError(xhr.status);
                }
            }
        });

For some reason the error callback is called event though the http status code is 200 ie. the request is OK. Why is this?

score 10 · Accepted Answer · edited May 23 '17 at 12:19

The problem might be that the json data returned from the url is malformed. When the server actually returns something, the http status code is 200. But that doesn't mean that the data is proper json. Check that the stringified json data returned is correctly formed.

I'm answering my own guestion because I learned this the hard way. I hadn't escaped a "-quote character in my json data. This resulted in very odd behaviour. Luckily the double quote character is pretty much the only character that needs to be escaped from data delivered via JSON. (More on this issue: Where can I find a list of escape characters required for my JSON ajax return type?)

score 1 · Answer 2 · answered Dec 04 '09 at 10:24

1

Does your callback return a page with Content-type: application/json? If not, that could well be the reason.

answered Dec 04 '09 at 10:24

Greg

316,276
54
369
333

I've tested this and it seems that it doesn't matter. It works (when it works) both ways with and without the content-type declaration. – kosoant Dec 04 '09 at 14:00
hmmm maybe that was the prototype library not jquery then – Greg Dec 04 '09 at 14:22

score 0 · Answer 3 · answered Dec 10 '09 at 06:14

I do a lot of testing with file: urls instead of using a web server. My JSON code will always have the wrong MIME type. To take care of this I use the following code:

$(document).ready(
    function (){

        myData = {};
        $.ajax({
            type: "GET",
            // url: "json.php?fn=jsonData.json",        // with Apache
            url: "jsonData.json",                       // As a file:/// URL
            contentType: "application/json; charset=utf-8",
            data: myData,
            beforeSend: function(x) {
                if(x && x.overrideMimeType) {
                    x.overrideMimeType("application/json; charset=UTF-8");
                }
            },
            dataType: "json",

            success: function(returnData){
                 $("#jsonData").html("Success:"+returnData.tag);
            },
            error: function(returnData) {
                 $("#jsonData").html("Error:"+returnData.tag);
            }
        });
    }
);

This will force the MIME type to be correct for JSON data.

Why does $.ajax call for json data trigger the error callback when http status code is "200 OK"?

3 Answers3

Linked