Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed JavaScript Data Fetching!
You have completed JavaScript Data Fetching!
Preview
Discover how HTTP works, including request and response structure, methods, headers, and status codes. See how servers communicate with browsers behind the scenes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
In the last video, we introduced APIs,
what they are and why they matter.
0:00
Now we're going to look into the language
that makes APIs possible, HTTP.
0:05
This is how your browser and servers
actually communicate.
0:10
HTTP stands for hypertext transfer
protocol.
0:14
Hypertext, at its most basic, is just text
which contains links to other text.
0:18
So HTTP is just the rules and structure
or protocol for how browsers and servers
0:24
talk to each other, sending and receiving
data or transferring.
0:30
Every time you visit a website, click
a link, or load an image, HTTP is at work.
0:34
There's also HyperText Transfer Protocol
Secure.
0:40
In HTTPS, the browser and server establish
a secure, encrypted connection
0:43
before transferring data.
0:48
It's safer, as the name suggests,
0:50
but that's way
outside the scope of this course.
0:52
To bring back the restaurant analogy,
think of HTTP like the conversation
0:54
between you and the waiter
and the waiter and the cook.
0:59
You send a request,
and the server sends back a response.
1:02
Let's look at a simple HTTP request.
1:06
Imagine we want a list of all dog
breeds from the dog API.
1:09
A GET request
might look like this in writing.
1:13
Let's walk
1:16
through each part of this HTTP request
so you can see exactly what it means.
1:16
And don't worry.
1:21
You won't be needing
to write these out yourself.
1:22
This is the HTTP method, which basically
means what we want the server to do.
1:24
Get is the method we use
when we just want to retrieve data.
1:30
We're not sending anything
new to the server.
1:34
We're just asking it
to give us information.
1:36
There are other methods
like post, put, and delete,
1:38
which are used to add
or adjust data in the server.
1:41
This is the path on the server.
1:45
You can think of it
like a folder path on your computer.
1:47
It tells the server exactly
which piece of information we want.
1:50
In this case, we're asking for the list
of all dog breeds from the dog API.
1:54
This path will differ for each API
and what information you're requesting.
1:58
This is where we would inspect
2:03
the API's documentation
to make sure we're using the correct path.
2:04
This is the version of HTTP
the request is using.
2:08
You can think of it like saying,
we're speaking the HTTP 1.1 language.
2:11
Servers and browsers
2:17
both need to agree on the version
so they can communicate properly.
2:18
This is the host header,
which tells the server which website
2:22
we're trying to reach.
2:25
If multiple sites are running
on the same server, this helps it know,
2:26
this request is meant for dog.ceo.
2:31
This header tells the server
what kind of data we want back.
2:34
Here, we're saying,
please send the response in JSON format.
2:37
JSON is the standard format for API data
because it works well with JavaScript.
2:41
More on that later. Don't worry.
2:46
An HTTP
request is made of these three core parts.
2:48
First, there's the request line,
2:51
which includes the method,
the path, and the HTTP version.
2:52
Next come the headers, which give the
server important details like the host,
2:57
the type of data we want back,
and how to interpret the request.
3:01
And finally, there's an optional body.
3:05
That's where the data goes
when we send information to a server.
3:07
For a GET request,
we don't need to worry about that.
3:10
Okay. So say we sent this off.
3:13
The server
would then send back a response.
3:15
It includes the status code.
3:17
Status codes are
3:19
how the server tells us what happened,
whether it was successful or it failed.
3:20
Here are some important ones
for developers. 200.
3:24
This means okay,
that the request succeeded.
3:28
404. This means it was not found.
3:31
The wrong URL was sent.
3:34
500. This means there was a server error.
3:36
Checking
these status codes in your code or
3:40
dev tools is crucial
to handling errors gracefully.
3:42
It will also include headers,
which is extra
3:46
info about the response,
like the content type.
3:49
Then there's the body.
3:52
This is the actual data we wanted.
3:53
For our dog API request, it will be a JSON
object with all the dog breeds.
3:55
When working with APIs, servers
can send back data in many different
4:01
formats, like plain text, HTML, or XML.
4:04
But the most common format you'll
encounter is JSON, and for good reason.
4:08
It's lightweight, easy to read, and works
perfectly with JavaScript.
4:12
JSON stands for JavaScript
Object Notation,
4:17
and it represents data as key
value pairs inside curly braces.
4:20
Arrays are used for a list of items,
and values
4:25
can be strings, numbers, Booleans,
or even other objects.
4:27
For example,
a simple JSON object might look like this.
4:32
It looks like JavaScript, but it's not.
4:35
So a little parsing will be necessary
before we can use it
4:38
like a JavaScript object.
4:41
We'll get to that. Don't worry.
4:43
Two important things
to keep in mind with JSON
4:45
is the keys need to be surrounded
by double quotes, not singles,
4:47
and all the key value pairs
need to be separated by commas.
4:51
And that's the essence of HTTP.
4:58
Every time you visit a website
or talk to an API,
5:00
your browser is sending and receiving
these messages behind the scenes.
5:03
Understanding HTTP is like understanding
the language
5:07
of the web itself, and it's the foundation
for everything we'll do moving forward.
5:10
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up