- [Instructor] A common use of JSON data is on websites.
Many websites you interact with regularly receive
and send JSON data in the background
in response to your interactions.
For instance, as I type a query into the search box,
the webpage is sending what I've typed to the back end
and receiving back JSON containing possible terms
I might be searching for.
Then the page displays those possibilities
in the menu below the box,
which enable me to quickly select my full query.
Website data is exchanged using
the Hypertext Transfer Protocol, or HTTP for short.
When a webpage sends data to the back end,
it creates an HTTP request that specifies the web address
where it's sending the request,
provides details about the request format,
and includes data, usually in JSON format.
When the receiving system has processed the request
and has an answer, it sends a response,
which can include its own data.
These requests and responses happen all the time
for a lot of websites.
When I place an order online and get a confirmation message
containing my order number,
that's generally data that just arrived
from the back end system in JSON format.
I can view these requests and responses in my browser
using the developer tools that are built
into all major desktop browsers.
I'm using Firefox, but these are available
in Chrome and Edge as well.
Probably the easiest way to open these
if you don't use them all the time is to right click
anywhere on the web page and select Inspect.
That's going to open up the developer tools.
And once I'm there, I want to click Network.
That's going to let me look at network requests.
After I load a page, all the HTTP requests and responses
for the information on that page will be displayed here.
I'm going to open nps.gov,
(quick typing)
which is the webpage for the U.S. National Park Service.
Then I'm going to open the menu
and I'm going to choose the Events page.
Now there are a lot of HTTP requests for this page,
but I can filter those a little
to avoid getting overwhelmed.
HTTP is used for a lot of things on the web,
but I'm most interested in XHR requests,
which are a common request that returns JSON.
In Firefox, I can click the XHR button right here
and now only XHR requests are displayed.
And there are a few, but the one I'm most interested in
is the Event Calendar Service, which is here.
Because calendars are updated regularly,
it's common for a calendar page to load events as JSON
and then add them to the webpage.
So I want to check out if that's what's going on here.
So I'll click that line in the network list
and then over on the right, I'm going to click Response.
And I can see right there the data is labeled as JSON.
I see the structure,
which is an array containing multiple objects,
and below that, there's a bunch of data for each object.
And each object here is an individual event in the calendar.
I can scroll down the webpage and match up the event info
with the data I see down in the JSON.
These HTTP requests and responses happen all over the web
and a lot of the content that you interact
with online everyday was provided
in an HTTP response as JSON data.