Happy Coding

JS Tutorial "AJAX and JSON" not working properly

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.

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

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