Whether you are a user or a website owner, the one word you might come across when browsing is HTTP. It is important to get the basics of HTTP to understand how Internet works and the details sent and received between your browser and the web server. Here is a beginners guide to HTTP attempting to explain the basics.
A Beginners Guide to HTTP
In the following sections, we have explained how HTTP works, structure of request/response, status codes and checking the details using Chrome browser.
1. What is HTTP?
HTTP stands for HyperText Transfer Protocol. This is a basis for data communication in the internet. The data communication starts with a request sent from a client and ends with the response received from a web server.
- A website URL starting with “http://” is entered in a web browser from a computer (client). The browser can be a Chrome, Firefox, Edge, Safari, Opera or anything else.
- Browser sends a request sent to the web server that hosts the website.
- The web server then returns a response as a HTML page or any other document format to the browser.
- Browser displays the response from the server to the user.
The symbolic representation of a HTTP communication process is shown in the below picture:
The web browser is called as a User Agent and other example of a user agent is the crawlers of search engines like Googlebot.
2. HTTP Request Structure from Client
A simple request message from a client computer consists of the following components:
- A request line to get a required resource, for example a request GET /content/page1.html is requesting a resource called /content/page1.html from the server.
- Headers (Example – Accept-Language: EN).
- An empty line.
- A message body which is optional.
All the lines should end with a carriage return and line feed. The empty line should only contains carriage return and line feed without any spaces.
3. HTTP Response Structure from Web Server
A simple response from the server contains the following components:
- HTTP Status Code (For example HTTP/1.1 301 Moved Permanently, means the requested resource was permanently moved and redirecting to some other resource).
- Headers (Example – Content-Type: html)
- An empty line.
- A message body which is optional.
All the lines in the server response should end with a carriage return and line feed. Similar to request, the empty line in a response also should only have carriage return and line feed without any spaces.
4. Example of HTTP Session
Let us take an example that you want to open a page “home.html” from the site “yoursite.com”. Below is how the request from the client browser should look like to get a “home.html” page from “yoursite.com”.
GET /home.html HTTP/1.1 Host: www.yoursite.com
The response from the web server should look like below:
HTTP/1.1 200 OK Date: Sun, 28 Jul 2013 15:37:37 GMT Server: Apache Last-Modified: Sun, 07 Jul 2013 06:13:43 GMT Transfer-Encoding: chunked Connection: Keep-Alive Content-Type: text/html; charset=UTF-8 Webpage Content
Chunked transfer encoding is a method in which the server responds with a data in chunks and this used in place of Content-Length header. The communication is stopped when a zero length of chunk is received and this method is used in HTTP Version 1.1.
5. What is that HTTPS?
Now you understand HTTP then what is that HTTPS? HTTPS is the secured HTTP protocol required to send and receive information securely over internet. Nowadays it is mandatory for all websites to have HTTPS protocol to have secured internet. Browsers like Google Chrome will show an alert with “Not Secure” message in the address bar if the site is not served over HTTPS.
Besides the security and encryption, the communication structure of HTTPS protocol remains same as HTTP protocol as explained above.
Warning: We do not recommend using confidential information like credit card details on HTTP sites. Ensure the financial transactions happens through HTTPS protocol.
6. How to Check HTTP Request and Response on Chrome?
Well, it’s time to practical. Let us take Google Chrome the popular browser, but the process remains same in all other browsers to view the details.
- Open a webpage in Google Chrome and go to “View > Developer > Developer Tools” menu.
- You can also open the developer console by right clicking on the page and choose “Inspect” option.
- Go to “Network” tab and then reload the page. Now you will see the loading time for each single component on the page.
- Click on the “Show Overview” icon to remove the timeline so that you can view other details clearly.
- Click the page URL on the left bar and go to “Response” tab. (You can also view the same details under “Preview” tab).
You can see the details of request and responses as exactly we have explained in the above sections. The “Headers” tab will show you the details of HTTP header information for request and response for the selected item.
7. HTTP Header Checker Tool
Similar to Chrome, there are also many other free tools available to check the response code received in HTTP headers. For example, go to this HTTP header checker tool, enter any of the URL you wanted to check and click the submit button.
You will see the complete details of the header like below:
HTTP/1.1 301 Moved Permanently
Server: nginx
Date: Sun, 25 Feb 2018 16:32:55 GMT
Content-Type: text/html; charset=iso-8859-1
Connection: keep-alive
Location: https://www.webnots.com/
Cache-Control: max-age=3600
Expires: Sun, 25 Feb 2018 17:32:55 GMT
HTTP/1.1 200 OK
Server: nginx
Date: Sun, 25 Feb 2018 16:32:55 GMT
Content-Type: text/html; charset=UTF-8
Connection: keep-alive
Vary: Accept-Encoding
X-Frame-Options: SAMEORIGIN
X-Powered-By: W3 Total Cache/0.9.6
Link: ; rel="https://api.w.org/", ; rel=shortlink
Vary: X-Forwarded-Proto,User-Agent
Cache-Control: max-age=3600
Expires: Sun, 25 Feb 2018 17:32:55 GMT
Host-Header: 192fc2e7e50945beb8231a492d6a80248. Troubleshooting with HTTP Status Codes
There are many reasons, a request from browser will not get required response from web server. In such failure cases, the response information from the web server is important for troubleshooting. The status codes returned by the server can be seen in Chrome Developer Tools section clearly. In the above screenshot, line 4 – HTTP/1.1 200 OK code indicates the server successfully returned the requested resource without any problem. You can get these detail using HTTP header check tool as explained above.
The three digits code returned from the server is called HTTP status code, though some people refer it as error code though it is not an error. It is merely a status response and helps you to find the reason for the communication failure. Remember that the communication failure can also happen due to the browser and computer problems like local network issues. In these cases, modern browsers like Chrome will show browser errors like “err_network_changed“, “err_internet_disconnected“, etc.
9. Details of HTTP Status Codes
The HTTP status codes are developed as per the Internet standards defined by Internet Engineering Task Force (IETF). They are classified into five different categories as below:
- 1xx series – Informational Message
- 2xx – Success Message
- 3xx – Redirection Message
- 4xx – Error Messages Related to Client
- 5xx – Error Messages Related to Server
9.1. Informational Series – 1xx
These are the informational codes send by the server indicating that the request is received from the client successfully and the same is under processing at the server end. This is a provisional response from the server normally contains only the status line and optional headers and is terminated with an empty line. Learn more about each 1xx status codes in detail.
9.2. Success Series – 2xx
These are the success codes send by the server indicating that the request is received and processed successfully. Learn more about each 2xx status codes in detail.
9.3. Redirection – 3xx
These are the status codes for redirection. When a user agent (a web browser or a crawler) requesting URL1 is redirected to another resource URL2 then 2xx codes are returned as a response. These codes are not seen in the browser window since browsers are auto redirected to another URL. Learn more about each 3xx status codes in detail.
9.4. Client Errors – 4xx
These are the errors from the client side which the server could not resolve. Simple and well known example is a “404 – Page Not Found” error displayed in the browser window when an unavailable URL is requested by the browser. Learn more about each 4xx status codes in detail.
9.5. Server Errors Series – 5xx
When a web server can’t fulfill a valid request from a client it sends a 5xx error code in the response. An example is “504 – Gateway Timeout” error where the web server1 is acting as a proxy to get a response from another web server2 but failed to receive a timely response. Learn more about each 5xx status codes in detail.
10. Download HTTP Status Codes Guide
You can download the complete HTTP status codes guide for offline reference and learn more about each code in detail.
Final Words
We recommend all Internet users and website owners learn the basic concepts of HTTP. This will really help in troubleshooting the connection failure related issues. Hope we have covered all required details for a beginner level user in this guide. If you see any important details are missed, just drop in a comment. We will try to update this guide for the benefit of all readers.
5 Comments
Leave your reply.