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?

Answer 1

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

Answer 2

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: http://stackoverflow.com/questions/983451/where-can-i-find-a-list-of-escape-characters-required-for-my-json-ajax-return-typ)

Answer 3

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.