Json file read failure

Question

If I browse to http://wwwendt.de/tech/fancytree/demo/ajax-tree-plain.json

I get the following displayed in my browser:

[
{"title": "simple node (no explicit id, so a default key is generated)" },
{"key": "2", "title": "item1 with key and tooltip", "tooltip": "Look, a tool tip!" },
{"key": "3", "title": "<span>item2 with <b>html</b> inside a span tag</span>" },
{"key": "4", "title": "node 4" },
{"key": "5", "title": "using href", "href": "http://www.wwWendt.de/" },
{"key": "6", "title": "node with some extra classes (will be added to the generated markup)", "extraClasses": "my-extra-class" },
{"key": "10", "title": "Folder 1", "folder": true, "children": [
    {"key": "10_1", "title": "Sub-item 1.1", "children": [
        {"key": "10_1_1", "title": "Sub-item 1.1.1"},
        {"key": "10_1_2", "title": "Sub-item 1.1.2"}
    ]},
    {"key": "10_2", "title": "Sub-item 1.2", "children": [
        {"key": "10_2_1", "title": "Sub-item 1.2.1"},
        {"key": "10_2_2", "title": "Sub-item 1.2.2"}
    ]}
]},
{"key": "20", "title": "Simple node with active children (expand)", "expanded": true, "children": [
    {"key": "20_1", "title": "Sub-item 2.1", "children": [
        {"key": "20_1_1", "title": "Sub-item 2.1.1"},
        {"key": "20_1_2", "title": "Sub-item 2.1.2"}
    ]},
    {"key": "20_2", "title": "Sub-item 2.2", "children": [
        {"key": "20_2_1", "title": "Sub-item 2.2.1"},
        {"key": "20_2_2", "title": "Sub-item 2.2.2"}
    ]}
]},
{"key": "30", "title": "Lazy folder", "folder": true, "lazy": true },
{"key": "31", "title": "Lazy folder 2", "folder": true, "lazy": true },
{"key": "32", "title": "Lazy folder 3", "folder": true, "lazy": true }
]

Which, according to jsonlint.com, is valid json data.

But if I run this jsfiddle: http://jsfiddle.net/5a6e3/

Which contains this code:

$.getJSON( "http://wwwendt.de/tech/fancytree/demo/ajax-tree-plain.json", function() {
alert( "success" );
}).fail(function() {
alert( "error" );
})

It returns an error. What am I missing here?

Answer 1

It appears that your problem is due to not having a required header:

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

From this link:

The Cross-Origin Resource Sharing standard works by adding new HTTP headers that allow servers to describe the set of origins that are permitted to read that information using a web browser.

You need to have your server send this header down to the browser. Without the header you will not be able to make requests outside of the domain the page came from.