JS Tutorial "AJAX and JSON" not working properly

General
1

Hey @Kevin,

while getting a closer look at the AJAX Tutorial, I noticed that the codepen examples where not working.

A glane at the console tells me that this is because of a mixed content problem.

The Happy Coding tutorial is provided over https, while the json comes from a http location. The browser automatically blocks the mixing of encrypted and unencrypted data, blocking the ajax from ever receiving a response.

I admit I stopped my research there. Either the tutorial should be updated, or there’s a tweak I can do to my browser to allow mixed content? I don’t know, but certainly should tell you about it. :slight_smile:

Addendum:
I actually had some trouble understanding ajax requests. But at some point during my investigating the problem in your example, I got around to fully comprhend when which part of the js code fires, processes and terminates. It’s quite a different order to the one you actually write the lines of code in, heh.

2

yes exactly. It is because of the Same site Origin policy.

3

Thanks for bringing this up. It was indeed because the CodePen examples use http but the site is now on https. I forgot to update these examples when I switched the site over to https. This should be fixed now.

By the way, this tutorial uses the old XMLHttpRequest way of sending a request. That’ll still work, but I’d now recommend the fetch function instead. Check that out: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

1 Like