AJAX request failed with unknown reason (jQuery)

Question

I have a service which returns JSON data: http://api.drag2droid.shamanland.com/captcha?base64

I'm trying to execute simple AJAX request:

$.ajax({
    type: "get",
    url: "http://api.drag2droid.shamanland.com/captcha?base64",
    dataType: "json",
    success: function(data) {
        $("body").html(data);
    },
    error: function(jqXHR, textStatus, errorThrown) {
        $("body").html("ajax failed: " + textStatus + ", " + jqXHR.status + " " + errorThrown);
    }
});

Result is:

ajax failed: error, 0

But if I just paste this url into address-bar in my browser, I can see json response.

Does somebody knows about possible traps?

JSFiddle: http://jsfiddle.net/shomeser/n5TjL/

EDITED:

Actually, I already set up my server-side to allow all requests from any domain with any header, PHP-code:

if ($_SERVER["REQUEST_METHOD"] == "OPTIONS") {
    header("Access-Control-Allow-Origin: *");
    header("Access-Control-Allow-Credentials: true");
    header("Access-Control-Max-Age: 86400");
    header("Access-Control-Allow-Methods: GET, POST, PUT, OPTIONS");

    if (isset($_SERVER["HTTP_ACCESS_CONTROL_REQUEST_HEADERS"])) {
        header("Access-Control-Allow-Headers: {$_SERVER["HTTP_ACCESS_CONTROL_REQUEST_HEADERS"]}");
    }

    exit(0);
}

EDITED:

In the Network-tab of Firebug plugin I can see that there is no content retrieved: enter image description here

But direct GET-reqeust from a browser shows full content.

check the network tab of your dev tools, and look at the request, after the ajax call has failed what does it show. If its a crossdomain issue you should have some kind of error in your console. — Patrick Evans, Jan 31 '14 at 05:30
Are you running the site and the API on the same domain? I am sure you are aware that AJAX Calls don't work cross-domain. For that you'll have to use `JSONP` — Vivek Jain, Jan 31 '14 at 05:32

score 1 · Accepted Answer · edited May 23 '17 at 12:11

Thank you all, guys, I found my problem. After I copy-paste code PHP-from this post, I decided to optimize it - I placed all statements into if METHOD == OPTIONS. This is fault.

Header Access-Control-Allow-Origin should be returned not only for OPTIONS request.

My updated code works fine:

if (isset($_SERVER["HTTP_ORIGIN"])) {
    header("Access-Control-Allow-Origin: {$_SERVER["HTTP_ORIGIN"]}");
}

if ($_SERVER["REQUEST_METHOD"] == "OPTIONS") {
    if (isset($_SERVER["HTTP_ACCESS_CONTROL_REQUEST_METHOD"])) {
        header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
    }

    if (isset($_SERVER["HTTP_ACCESS_CONTROL_REQUEST_HEADERS"])) {
        header("Access-Control-Allow-Headers: {$_SERVER["HTTP_ACCESS_CONTROL_REQUEST_HEADERS"]}");
    }

    exit(0);
}

Thanks to @Patrick Evans second comment, but it's already deleted =)

score 0 · Answer 2 · answered Jan 31 '14 at 05:32

0

You are attempting to load a resource from another domain. Because the service you are requesting the JSON from is not configured to allow this, the request is failing.

See: https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS

answered Jan 31 '14 at 05:32

Sean Johnson

5,567
2
17
22

score 0 · Answer 3 · answered Jan 31 '14 at 05:43

When we give the type as "json", the response should be a strict json object. Please verify the response or post it here.

See below the excerpts from the URL: JQuery API

"json": Evaluates the response as JSON and returns a JavaScript object. The JSON data is parsed in a strict manner; any malformed JSON is rejected and a parse error is thrown. As of jQuery 1.9, an empty response is also rejected; the server should return a response of null or {} instead. (See json.org for more information on proper JSON formatting.)

"jsonp": Loads in a JSON block using JSONP. Adds an extra "?callback=?" to the end of your URL to specify the callback. Disables caching by appending a query string parameter, "_=[TIMESTAMP]", to the URL unless the cache option is set to true.

score -1 · Answer 4 · edited May 23 '17 at 10:31

-1

The reason is because of CORS (ie., Cross domain issue). To overcome use jsonp instead of json.

dataType: "jsonp",

edited May 23 '17 at 10:31

Community

1
1

answered Jan 31 '14 at 05:32

Praveen

55,303
33
133
164

AJAX request failed with unknown reason (jQuery)

4 Answers4

Linked