Asad Mahmood Asad Mahmood - 3 months ago 12
HTML Question

Issue with the request using JSON?

I am trying out using JSON for the first time. I wanted to test out printing a simple "Hello" to see if I was getting any print statement however everytime I click on the button it says "There was a problem with the request":
enter image description here
enter image description here

I tried following my schools instructions on how to do it, and it seems there should be no issue, but here I am asking a question about this. Can anybody explain to me why I am getting this error?

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Lab06 - INT222_162 </title>
<script src="lab06.js" type="text/javascript"></script>
<style>
.lab06 {width:100%; margin:auto;text-align:center;}
.table-1 {width:900px; margin:auto; border:2px solid;}
.table-1 td {border:1px solid; text-align:center;}
.table-1 tr:nth-child(odd) {background: #cccccc; color:#000000;}
.table-1 tr:nth-child(even) {background: #ffffff; color:#000000;}
.table-1 th {background: #00ff00;border:1px solid;}
</style>
</head>
<body>
<div class="lab06">
<h3><mark>JSON TEST</mark></h3>
<div id="data">
<p><button title="ajaxButton" onclick="makeRequest();">list of Canadian Provinces &amp; Territories</button></p>
</div>
<footer>
<script type="text/javascript">
var dt=new Date(document.lastModified); // Get document last modified date
document.write('This page was last updated on '+dt.toLocaleString())
</script>
</footer>
</div>
</body>
</html>


JS:

var httpRequest;

function makeRequest() {
var url = 'https://zenit.senecac.on.ca/~emile.ohan/int222/labs/lab06/provTerr.json';
// make an HTTP request object

if (window.XMLHttpRequest) { // Mozilla, Safari, ...
httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
try {
httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {}
}
}

if (!httpRequest) {
alert('Giving up :( Cannot create an XMLHTTP instance');
return false;
}

// register a request listener
httpRequest.onreadystatechange = showContents;
// make the HTTP request
httpRequest.open('GET', url, true);
httpRequest.send(null);
}

// the function that handles the server response

function showContents() {

// check for response state
// 0 The request is not initialized
// 1 The request has been set up
// 2 The request has been sent
// 3 The request is in process
// 4 The request is complete

if (httpRequest.readyState === 4) {
// check the respone code
if (httpRequest.status === 200) { // The request has succeeded
// Javascript function JSON.parse to parse JSON data

var jsArray = JSON.parse(httpRequest.responseText);




document.write("Helloooo");





document.getElementById("data").innerHTML = str;
} else {
alert('There was a problem with the request.');
}
}
}

Answer

TL;DR

Your browser URL should start with http:// or https:// instead of file://, they're different protocols.

Full explanation

You're trying to access a page using https:// but you opened the file directly through a browser which means you're on file://, this is a security measure to prevent scripts from accessing your hard drive and sending it out over the internet.

Try installing a local web server like WAMP or the NodeJS http-sever module and run the script through that, once you're sure you're on HTTP(S) your script should work.

Side note: Try using the Chrome debugger tools (F12 on Windows and Command + Alt + I on OS X) and check the console for errors, it will save you lots of time