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 e 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?

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 e 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?

• javascript
• json
• localhost

• How do you open the initial file ? You must open it through http://localhost/..., not file:// – Denys Séguret Commented Sep 1, 2013 at 13:55
• What URL are you loading from? – SLaks Commented Sep 1, 2013 at 13:57
• 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 Commented Sep 1, 2013 at 13:58
• @Kappie001 — dystroy and SLaks are asking how you open the HTML document, not the JSON document. – Quentin Commented Sep 1, 2013 at 13:58
• @Kappie001 have you receive any errors in console? – user2368299 Commented Sep 1, 2013 at 13:58

1 Answer 1

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.