DEV Community

Cover image for HTTP Explained ...
BINAL MEHTA
BINAL MEHTA

Posted on

HTTP Explained ...

Everyone knows about HTTP, we see it at the beginning of every website we come across on the internet. We also know about the HTTP 500 error page whenever there is a problem with the server.
But only a few of us know how exactly HTTP works on the lower level. This is the major takeaway to understand the application's vulnerabilities and will help you to become a better web developer.
So let's dive in!

What is HTTP?

HTTP stands for HyperText Transfer Protocol.
In simple language, this means that the client(Browser in most cases), makes a request, and waits for the server to respond.
Eg: Browser uses HTTP requests to extract web pages.

What constitutes a HTTP requests and response

HTTP requests can be seen for any websites on the internet using the chrome (or any browser) developer tools which can be opened using the commands Ctrl + Shift + i / Cmd + Shift + i. Select the network tab in it.
Detailed information can be seen in the picture below.

Alt text of image
All the images, CSS files, JavaScript, or any other resources the website uses have an HTTP request for each.
There are various other important parameters of information that we can get from the networks tab like headers, Request URL, Request method, status codes etc.
Alt Text
Alt Text

HTTP Request Methods

The HTTP request methods get changed at our every action on the internet. But how can we know at what action which request method is implemented?
First things first let's see multiple types of request methods and their functionalities as well.

  • GET request:
    As the name suggests GET requests are used for getting resources from the server. They are used to only fetch data

  • POST request:
    POST requests play the role of a postman, it sends some data to the server. For example: to submit data from the web form, to upload a file from a server.

  • PUT request:
    PUT requests are used to update information on the server side. For example: Changing Instagram bio, updating Facebook status etc.

There are multiple request methods other than the above such as DELETE, PATCH, OPTIONS, CONNECT, HEAD, TRACE. More information can be found in HTTP Methods

HTTP Status Codes

Status codes are part of the HTTP response. It explains to the user what happened to the request using 3 digit numbers. We have come across various numbers like 400, 500 when a problem occurs at the server side. But what all the numbers mean? Let's understand it!

  • 2xx range:
    2xx family i.e. from 200-299 depicts that the HTTP request was successful. Example: when we receive the resource for our request.
    Alt Text

  • 3xx range:
    3xx family depicts that there is a need for actions or additional steps required by clients to complete a particular request. In most cases, there is URL redirection.
    For Example: when we navigate to http://www.flipkart.com instead of
    https://www.flipkart.com.
    Alt Text

  • 4xx range:
    We have come across this status code multiple times. It depicts that it had an error while making the HTTP request. In other words, we get this status code when the Syntax of the HTTP request is incorrect or the username or password is invalid. For example, we get this 4xx status code when we enter an invalid website or make an invalid request.

There are other multiple status codes as well like 1xx depicts information, 5xx depicts a server error, or when the server is overloaded with requests. You can find more status code on HTTP status codes. Or on HTTP status codes explained

2xx-👍
3xx-👉
4xx-👎
5xx-💩

References

That's it! Thank you for coming this so far. Now you know the basics of HTTP.
Important takeaways are:

  • HTTP is a text-based protocol.
  • It is made of requests and responses.
  • It's responses have status codes.

Top comments (0)