Created
May 2, 2016 16:19
-
-
Save auchomage/374422c06dcfc85a5c07c1db7628b7cb to your computer and use it in GitHub Desktop.
Following a tutorial and am unable to get the code to work
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>Example JSON Discoveryvip</title> | |
| <meta name="description" content"Discoveryvip.com> | |
| <link href="style.css" rel="stylesheet" type="text/css" /> | |
| </head> | |
| <body> | |
| <div id="container"> | |
| <div id="output">Nothing Yet</div> | |
| </div> | |
| <script src="script4.js"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "firstName": "John2", | |
| "lastName": "Smith2", | |
| "isAlive": true, | |
| "age": 125, | |
| "address": { | |
| "streetAddress": "21 2nd Street", | |
| "city": "New York", | |
| "state": "NY", | |
| "postalCode": "10021-3100" | |
| }, | |
| "phoneNumbers": [ | |
| { | |
| "type": "home", | |
| "number": "212 555-1234" | |
| }, | |
| { | |
| "type": "office", | |
| "number": "646 555-4567" | |
| }, | |
| { | |
| "type": "mobile", | |
| "number": "123 456-7890" | |
| } | |
| ], | |
| "children": [], | |
| "spouse": null | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* This file simulates how to access a native json file*/ | |
| var output = document.getElementById('output'); | |
| var ajaxhttp = new XMLHttpRequest(); // creates a js object with required functiionality | |
| var url = "http://localhost/opt/lampp/htdocs/json.json"; // the external json file | |
| ajaxhttp.open("GET", url, true); // access the json file | |
| ajaxhttp.setRequestHeader("content-type", "application/json"); // value sent over to the server, indicating | |
| // what type of content the browser expects to receive | |
| /* | |
| readyState - represents communication with an external file | |
| status - a flag used to indicate the success or failure of communication | |
| */ | |
| ajaxhttp.onreadystatechange = function(){ | |
| if(ajaxhttp.readyState == 4 && ajaxhttp.status == 200){ | |
| var jcontent = ajaxhttp.responseText; | |
| console.log( jcontent); // displays the response text | |
| console.log("ajaxhttp = ", ajaxhttp); // displays the object | |
| } | |
| }; | |
| ajaxhttp.send(null); // currently sending nothing back | |
| output.innerHTML ="nothing"; | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I was following along with the tutorial. I executed the code which didn't work on my machine. I was told to create localhost. A local host has been created on a linux 14.04 machine. All 3 files :
Have been placed in a folder called 'htdocs' which can be found on '/opt/lampp/'
When the html file is loaded into google chrome, I get an error message:
" ex2_accessingJSONdata.html:1 XMLHttpRequest cannot load http://localhost/opt/lampp/json.json. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. "
I'm stuck!!