跨域Ajax请求成功事件不会触发

Question

Here is the scenario which is surprisingly simple:

I send an ajax request which targets a different domain:

$(function(){
        $.ajax({
            url: "http://www.drivescheduler.com/functions.php?function=getHighSchools&code=" + $("#code").val(),
            type: 'get',
            async: true,
            crossDomain: true,
            beforeSend: function(xhr){
                xhr.withCredentials = true;
            },
            success: function(x, status, xhr){
                alert();
            }
        });
    });

On the domain which receives the ajax request, I've properly configured CORS headers:

header('Access-Control-Allow-Origin: http://temp.jfdin.net');
header('Access-Control-Allow-Methods: POST');
header('Access-Control-Allow-Headers: Content-MD5, X-Alt-Referer');
header('Access-Control-Allow-Credentials: true');
header("Content-Type: application/json; charset=utf-8");

And I can see the request being sent and the proper response being received through Chrome Debug Tools, but I get no alert() .
In other words, the success event never gets fired.
Why is that and how can I fix it?

Answer 1

The URL you are requesting responds with a JSON content type but an HTML body.

jQuery will fail to parse the HTML as JSON and error.