HTTP Protocol Request and Response Explained
In this video you will learn everything that you need to know about http requests, responses, headers, body, how to check them in devtools and much much more. This is the core knowledge for every developer which will help you to better understand and debug network requests.
So let's jump right into it.
So the first question what is http? It's the most popular protocol where client and server communicate. Every single page on internet is using http requests. To check this out we can simply open developer tools in chrome in any page. Here we have a network tab. When we load page again you can see lots of requests here. So every line is a request.
So what is client and what is server? Client is a user machine (in our case a browser) which downloads everything that it needs in order to show a page. At the bare minimum you can see an http requests to the server where we are getting a complete html page.
It's important to remember that http requests are stateless and completely independent. Every request is completely separate from others and server doesn't get anything expect of information that goes with this request.
Requests can be of a lot of types like scripts, styles, documents but mostly we are interested in API requests. Why? Because nowadays lots of projects are building separately frontend or mobile application and additionally API in server with which we can communicate.
To show you different requests I will use demo.realworld.io. It's a project which is build in different programming languages using the same API. For us is important that API is public and we can check or test all types of requests.
So when I'm jumping to https://demo.realworld.io/#/ you can see lots of requests in network tab. Here are fonts, images and xhr request.
For us are interesting only xhr requests because this are requests to API. To simplify finding them we can put a filter on the top.
Now let's check all information that you need to know because I don't want to teach you rarely used stuff.
Let's click on 1 of them. The first this that we see is a request URL. This is the URL that we are getting.
The next goes Request method. This is important. There are several types of requests: GET, POST, PUT, DELETE, PATCH. Get is obviously to get some data. Most of the requests are get. It's gettings an index page or getting a current user data. The next is POST which means create. So creating an article, registering the user, signing in are all posts requests. The main difference from get is that we can pass additional information which is called body with POST request. But we will talk about it a little bit later. The next one is PUT. We are using it to update our data. updating an article or user profile is put request. We can also pass data inside it. Delete request is obvious. We are using it to delete article or user. Patch request is like partial update. It is planned as a method where you can update not all first of article or user but only some of them.
The next post is status code. It is super important information for us and I alreadt made a full video about them. I will link it down in the description. Just to touch it shortly green is good. Red is bad. every status which start from 2 like 200 is good.
Now let's talk about request and response. Actually all that you see here is a request. Except of this part with response headers. But we will touch it a bit later. So request is what client (our browser or user) is sending to the server. Response is what server gives for client back for this specific request. We can see it in the response tab or in preview. Preview shows the prettified version of the response so I recommend you to always you only preview tab and use response tab if you need to copy response somewhere else.
I said previously that we can attach additional data to put, post and patch requests. And it is called body. Let's have a look. If we scroll to the bottom of any get request we don't see anything about body. Because there is no body.
But let's try to register. As you can see we have a post request because it's registration (creation of the user) and on the bottom we have "request payload". This is our body. As you can see we are passing some user data from the form inside this request. You can also click view source if you need to copy it somewhere.
The last important thing that you need to know in http request are headers. It's the way to pass some information to server automatically without specifying it by hands. Let's have a look. There are 2 sections: request headers and response headers. So request header are all headers that client attaches automatically or by hands. Normally browser attaches most of the headers. Response headers are from the server after our request finished. There can be lots of useful information for us but I will focus on most important.
Origin - this header browser sets automatically and it shows from which page the request was made.
ContentType - we are telling server in what format we want to get data. Some server can give data in different formats based on the provided header. Normally we are using application/json for APIs because we want to get data back in json structure.
User agent - also is set automatically. Has lots of information about client browser, operational system or device
And we can of course set our own headers, for example user token in order to notify server that we are registered.
Now let's talk about response headers. This are headers that server sends back after it gets a request.
contentType - is really a contentType of the data that server sends back.
set-cookie - is super important. All cookies that are provided here will be set inside client browser automatically.
and we have a bunch of headers with word access at the beginning. They are super important.
access-control-allow-origin: specifies from which domains we are allowed to get responses.
access-control-allow-methods: specifies what methods are allowed like GET,POST,PUT,PATCH or DELETE. If it's not specified here it won't work.
access-control-allow-credentials: true means that for cross origin requests it is allowed to attach cookies to the requests.
So this where all things that you need to know about http request and how to check them.
Want to conquer your next JavaScript interview? Download my FREE PDF - Pass Your JS Interview with Confidence and start preparing for success today!
