Javascript: can't load JSON file from localhost

Question

I'm currently working through the book "Head first HTML5 programming". I want to load the content of a file named sales.json from a web server on my own machine. I used wampserver for this.

In the folder wamp/www/gumball/ I put all relevant .html, .js and .css files, and also the sales.json file.

My JavaScript code is very simple:

window.onload = function() {
    var url = "http://localhost/gumball/sales.json";
    var request = new XMLHttpRequest();
    request.open("GET", url);
    request.onload = function() {
        if (request.status == 200) {
            updateSales(request.responseText);
        }
    };
    request.send(null);
}

function updateSales(responseText) {
    var salesDiv = document.getElementById("sales");
    salesDiv.innerHTML = responseText;
}

This doesn't do anything! Typing the link: http://localhost/gumball/sales.json in my browser opens the right file, so the link should be correct. Even when using the .js files that come with the book (with a finished version of the application I'm trying to make), nothing loads.

Testing with alert statements tells me the request.onload event never happens. I'm clueless as to why this is the case.

A fact I don't quite understand yet: when I type: http://localhost/gumball/sales.json: in my browser (I added a colon at the end of the link), I get a 403 Forbidden error! Why does this happen? Does this have something to do with my problem?

How do you open the initial file ? You must open it through http://localhost/..., not file:// — Denys Séguret
– Denys Séguret, Commented Sep 1, 2013 at 13:55
What do you mean? You can see the way I try to reach the file in my code, and typing localhost/gumball/sales.json in the browser returns the desired file. So I'm not opening it from file://. When I take the wamp server offline, the link I use doesn't work. — tauros_is_the_best_pokemon
– tauros_is_the_best_pokemon, Commented Sep 1, 2013 at 13:58
@Kappie001 — dystroy and SLaks are asking how you open the HTML document, not the JSON document. — Quentin
– Quentin, Commented Sep 1, 2013 at 13:58

Denys Séguret · Accepted Answer · 2013-09-01 14:03:32Z

3

I open html document with firefox

Your HTML document must be open with a URL in http://, not file://, if you want it to be able to open in javascript another document, unless the second document is served with relevant CORS headers.

This is due to same origin policy.

As you have a local WAMP server, there is no problem : simply open your file using a http:// URL like you do for your JSON file.

answered Sep 1, 2013 at 14:03

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tauros_is_the_best_pokemon Over a year ago

Yes, it's working. I totally understand now. Thanks for the quick replies!

Collectives™ on Stack Overflow

Javascript: can't load JSON file from localhost

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related