CODEWITHSUNDEEP
jqueryjsongoogle-chrome
Freesnöw
Freesnöw

Reputation: 32143

Using jQuery to read a JSON file errors in Google Chrome

I have a JSON file here:

http://dalexl.webs.com/products.json

I'm trying to read it on my site with Javascript/jQuery:

$.getJSON("http://dalexl.webs.com/products.json")

(Yes, I know that it isn't complete, I'm currently just trying to get it to load, I haven't worked on reading it yet)

I tried having in my own sites directory (I'm using Dreamweaver locally on my HD).

$.getJSON("json/products.json")

The problem is, in Chrome (I'm not sure about other browsers), the console gives me this error:

XMLHttpRequest cannot load http://dalexl.webs.com/products.json. Origin null is not allowed by Access-Control-Allow-Origin.

or:

XMLHttpRequest cannot load json/products.json. Origin null is not allowed by Access-Control-Allow-Origin.

At first, reading about the problem online suggested that it was Chrome thinking that a website was trying to read files on my computer. After moving the file online, however, the problem continues.

Does anybody have a solution to this? If it isn't supposed to be supported, why does jQuery have a native method of doing it?

Thanks!

Upvotes: 0

Views: 1547

Answers (3)

T.J. Crowder
T.J. Crowder

Reputation: 1074495

Unless the page on which the script executing the line

$.getJSON("http://dalexl.webs.com/products.json")

is also on http://dalex1.webs.com, you're running afoul of the Same Origin Policy, a restriction on what resources you can load via XMLHttpRequest (e.g., "ajax"). See the link for details.

Your options for getting around the SOP are:

  • JSON-P, which requires modifying the data you're returning, but in a trivial way.
  • Cross-Origin Resource Sharing, a relatively recent standard which the server and browser would both need to support. (Recent versions of Firefox, Opera, and Chrome all support it with XMLHttpRequest; IE8 and above support it, but only via XDomainRequest object rather than the standard XMLHttpRequest. Details here.)
  • In really tricky situations, you might look at using YQL as a cross-domain proxy.

Separately, note that the JSON you're returning is invalid (missing commas between properties), see jsonlint.com and others for validation tools. It is now you've fixed it.

Upvotes: 1

Tom
Tom

Reputation: 1052

http://dalexl.webs.com/products.json does not return valid json. I like using http://jsonviewer.stack.hu/ for testing (when you press the "viewer" button you get an error).

You have three missing commas:

After: "url": "#1"

After: "url": "#2"

Before: "Cakes": {

Upvotes: 1

Andreas Louv
Andreas Louv

Reputation: 47099

you are trying to open cross domain? See:

http://en.wikipedia.org/wiki/Same_origin_policy

Upvotes: 2

Related Questions