Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript AJAX Basics (retiring) Programming AJAX Processing JSON Data

Zoe Xiao
Zoe Xiao
7,195 Points

I can not load employee status using AJAX

I use XAMPP to set up a local host on my computer. I download the files of this project and put the folder Data which contains employees.json under the htdocs. In the javascript, I have already fixed as below xhr.open("GET", "http://localhost/data/employees.json");

When I click the index.html, I can not load the final page containing employee status. I use the original javascript file which is in the finish folder.

So what may cause this? Thanks

Dave McFarland
Dave McFarland
Treehouse Teacher

Have you looked at the JavaScript console to see if you have any errors? You can find a list of keyboard shortcuts for opening the console in different browsers in the teacher's notes on this page.

Open the console and re-load the page. Let us know what messages you see in the console.

Zoe Xiao
Zoe Xiao
7,195 Points

I don't know what you mean. CTRL+J? I asked my friend who is a programmer. He said I should put all the relevant files include index.html, the css folder, the js folder and the data folder under the htdocs together and then fix the path to xhr.open("GET", "../data/employees.json"). Finally it works. But I am wondering if I could only put the data folder in my local host and the other files in another place and then use an absolute path like http://localhost/xxxxx?

2 Answers

Dave McFarland
STAFF
Dave McFarland
Treehouse Teacher

Zoe Xiao

You need to make sure all of the files, HTML, CSS, and JavaScript are somewhere inside the local server folder -- htdocs. They don't all have to be in the same folder, but they all have to be accessed via http://localhost.

If you try to put JUST the JSON files in localhost, you'll run into the "same origin" policy, since a page that's not on the server is trying to access content that is on the server -- the browser won't allow that. I discuss AJAX security limitations in the video on this page: http://teamtreehouse.com/library/ajax-basics/ajax-concepts/ajax-security-limitations

Zoe Xiao
Zoe Xiao
7,195 Points

Thanks very much Dave. I watched this video before and knew how it worked. It is the first time for me to use a localhost so I don't understand completely how it works. Now with your explanations, I know the local host serves as a web server. By the way, may I ask did you write a book called javascript and jquery: the missing manual?

Zoe Xiao
Zoe Xiao
7,195 Points

Hi Dave, as you may be expert with javascript, could you explain my another question? https://teamtreehouse.com/forum/what-is-functione In the drawing application, I can not understand how the computer captures the last move of the mouse using lastEvent and function(e). Thanks very much if you could look at it.

Dave McFarland
STAFF
Dave McFarland
Treehouse Teacher

Hi Zoe Xiao

Yes!! I'm the author of JavaScript & jQuery: The Missing Manual. I'm finishing up the next edition right now!

Zoe Xiao
Zoe Xiao
7,195 Points

Cool! I was looking for some basic books to read yesterday and your book is highly recommended along with other good books on a post which was written a few years ago. Many people doubted if those books were outdated. It is good to hear you will finish a new edition. Congratulations! I will wait for the new edition!