3 - Get JSON with the JavaScript XMLHttpRequest Method - JSON APIs and AJAX - freeCodeCamp Tutorial

TimeStamps: 00:00 - Challenge 00:34 - Introduction to JSON 01:33 - Processing JSON with Parse and Stringify 03:12 - XMLHTTPRequest 10:38 - Challenge Solution

We look into JSON notation and how to process this. Then we look at XMLHttpRequests and how they can be used to obtain JSON data. We open the request and give it properties, call the send method to send it of, and register a function to the onload property to run, once we have a response.

Link to Challenge : https://www.freecodecamp.org/learn/data-visualization/json-apis-and-ajax/get-json-with-the-javascript-xmlhttprequest-method Concepts: JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate. https://www.json.org/json-en.html

parse() The JSON.parse() method parses a JSON string, constructing the JavaScript value or object described by the string. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse

stringify() The JSON.stringify() method converts a JavaScript object or value to a JSON string, optionally replacing values if a replacer function is specified or optionally including only the specified properties if a replacer array is specified. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

XMLHttpRequest XMLHttpRequest (XHR) objects are used to interact with servers. You can retrieve data from a URL without having to do a full page refresh. This enables a Web page to update just part of a page without disrupting what the user is doing. XMLHttpRequest is used heavily in AJAX programming. https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

XMLHttpRequest.open() The XMLHttpRequest method open() initializes a newly-created request, or re-initializes an existing one. https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/open

XMLHttpRequest.send() The XMLHttpRequest method send() sends the request to the server. If the request is asynchronous (which is the default), this method returns as soon as the request is sent and the result is delivered using events. If the request is synchronous, this method doesn't return until the response has arrived. https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/send

XMLHttpRequest.onload The XMLHttpRequestEventTarget.onload is the function called when an XMLHttpRequest transaction completes successfully. https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequestEventTarget/onload

XMLHttpRequest.responseText The read-only XMLHttpRequest property responseText returns the text received from a server following a request being sent. https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/responseText -———————� ... https://www.youtube.com/watch?v=UtPS0WjEnC8