HTTP protocol – Common status codes, request methods, HTTP headers, HTTP caches

This is the 17th day of my participation in Gwen Challenge

HTTP for a front-end engineer, is very need to understand a knowledge point, throughout the whole process of front-end development. If a front-end engineer doesn’t know HTTP, or knows very little about it, he or she is definitely not a good engineer. So what does HTTP do for going to the front end?

• Front-end engineers need to use it when developing interfaceshttpAgreement;
• The front end is used when calling the back-end interface, submitting (POST) or getting (GET) datahttpAgreement;
• …

The HTTP protocol will be explained in several ways below.

HTTP status code

1. Introduction

Before we talk about states, let’s look at what a status code is. For example, baidu website:

As you can see, the red circle in the figure above is the HTTP status code. Common status codes are 200,400,404, and so on. Next, some basic knowledge of status codes will be introduced.

2. Classification of status codes

The following table shows the classification of status codes.

Status code	meaning	explain
1xx	Server receives request	Receiving a request starting with 1xx indicates that the server has received the request but has not returned the message to the client
2xx	The request is successful, for example, 200	Indicates that the client has successfully requested data
3xx	Redirect, such as 302	When the client receives a status code starting with 3xx, it indicates that the server does not care about the address requested by the client and asks the client to request another address
4xx	Client error 404	A 4xx error is reported when a client requests an address unknown to the server
5xx	Server error, such as 500	Indicates that the error originates from the server. For example, the interface written by the server is buggy

3. Common status codes

The common ones are 200 (normal), 404 (the page resource cannot be found), 304 (jump page), 500 (server error), etc., as follows:

Status code	meaning	use
200	OK to success	Typically used for GET and POST requests
301	Redirect Permanently Redirects Permanently	With location, the browser handles it automatically
302	Found Temporary redirection	With location, the browser handles it automatically
304	Not Modified The resource is Not Modified	The requested resource is not modified, and the server does not return any resources when it returns this status code. Clients typically cache accessed resources by providing a header indicating that the client wants to return only resources that have been modified after a specified date
404	Not Found The resource was Not Found	The server could not find the resource (web page) based on the client’s request. With this code, a web designer can set up a personalized page that says “the resource you requested could not be found.
403	Forbidden No permission	The server understands the request from the requesting client, but refuses to execute the request
500	Internal server Error Indicates a server Error	Server internal error
504	Gateway time-out Indicates that the Gateway times out	The server acting as a gateway or proxy did not get the request from the remote server in time

Section 301 and 302 are detailed below.

301 Permanent Redirection:

Common scenarios include, for example, your website, the domain name expires, or you don’t want to use the domain name, then the old domain name can return a 301 status code and coordinate with location so that the value of location is equal to the new domain name, and finally jump, then the browser will remember the new domain name, will not visit the old domain name.

302 Temporary Redirection:

The common scene has Baidu, Zhihu, Jian Shu and so on. For example, we want to enter the rookie tutorial in Baidu, search out a series of lists, we can choose one to a click. Click that will not directly enter the rookie tutorial, but the first jump to baidu set a temporary address, and then jump to the real address of the rookie tutorial.

4. Agreements and specifications

• The HTTP protocol is a convention, a specification, and everyone has to follow it;
• So don’t do anything that goes against the norm, for exampleIEBrowsers, violating the specification will eventually fall behind the history of the situation.

HTTP method

1. Traditional methods

• Get Obtains server data.
• Post submits data to the server.
• Head The user gets the header.

2. Current methods

• Get get data;
• Post new data;
• Patch/PUT Updates data.
• Delete Deletes data.
• A head is similar to a GET request, except that the response is returned with no concrete content, and the user retrieves the header.
• Options, which allows the client to view the server performance, such as the server support requests, etc.
• Trace C.
• Connect, which requires the use of the tunnel protocol to connect to the agent.

3, Restful API

(1) What is a Restful API?

• Restful apis are a new approach to API design that has long been popularized.

• Traditional API design: Treat each URL as a function.

• Restful API design: Treat each URL as a unique resource.

(2) How to design a resource?

1) Try not to use URL parameters

• traditionalAPIDesign:/api/list? pageIndex=2
• Restful APIDesign:/api/list/2

2) Use method to indicate the operation type

Traditional API design:

• Post request: / API /create-article

• Post request: / API /update-article? id=100

• Get request: / API /get-article? id=100

Restful API design:

• Post request: / API /article

• Post request: / API /article/100

• Get request: / API /article/100

HTTP headers

1. Common Request Headers

Request header	meaning
Accept	Data format accepted by the browser
Accept-Encoding	Browsers can accept algorithms such as gzip
Accept-Language	A language that can be accepted by the browser, such as zh-CN
Connection	Keep-alive A TCP connection is used repeatedly
cookie	Cookie information received by the client
Host	Specify the host and port in the original URL
User-agent (UA for short)	Browser kernel Information
Content-type	Format to send data, such as Application/JSON

2, Common Response headers

Response headers	meaning
Content-type	The format of the data returned, such as Application/JSON
Content-length	The size of the returned data, in bytes
Content-Encoding	Returns a compression algorithm for data, such as Gzip
Set-Cookie	The server sets the cookie to the client

HTTP caching

1. Introduction to caching

(1) What is cache

Caching is a technique for saving a copy of a resource and using it directly on the next request.

(2) Why cache?

Without caching, a large number of images and resources are loaded on every network request, which makes the page load much slower. The purpose of caching is to minimize the volume and number of network requests and make pages load faster.

(3) Which resources can be cached? Static resources (JS, CSS, IMG)

• The web sitehtmlIt can’t be cached. Because the website is in usehtmlIt can be updated at any time. It can be replaced at any time.
• Business data from web pages cannot be cached. Such as message boards and comment sections, where users can comment at any time, the contents of the database will be updated frequently.

2. HTTP cache strategy (mandatory cache + negotiated cache)

(1) Mandatory cache

1) What is a mandatory cache?

Forced caching is when files are fetched directly from the local cache without sending a request.

2) legend

Let’s look at the first one.

As you can see from the above figure, the browser sends a request to the server. After receiving the request, the server returns the resource and a cache-control to the client. This cache-control usually sets the maximum expiration time of the Cache.

---

Let’s look at the second diagram.

As you can see from the above figure, the browser has received the value of cache-Control. When the browser sends a request again, it checks whether its cache-control is expired. If it is not, it pulls the resource from the local cache and returns it to the client without passing through the server.

---

Let’s look at the third diagram.

Forcing the cache to have an expiration time means that one day the cache will fail. So suppose one day, the client’s cache-control fails, and it can’t pull resources from the local cache. It then re-requests the server as in the first figure, after which the server returns the resource and cache-control values again.

So that’s how you enforce caching.

3) the cache-control

What is cache-control?

• Exists in the Response Headers;
• Control the logic of forced caching;
• Such as:Cache-Control: max-age = 31536000(In seconds).

The cache-control value

The cache-control values	meaning
max-age	Set the maximum expiration time of the cache
no-cache	No local cache, normal request to the server, the server does not care what we do
no-store	Simple and crude, pull the cache directly from the server
private	Only end users are allowed to cache, i.e. computers, phones, and so on
public	Allow intermediate routes or intermediate proxies to cache

4) Expires

• amenResponse Headers 中
• Also to control the expiration time of the cache (early use)
• ifThe cache-control and expiresAt the same time,cache-controlIs of higher priority thanexpires

(2) Negotiate cache

1) What is a negotiation cache?

• Negotiation cache, also known as contrast cache.
• It is a server-side caching strategy that determines whether something can be cached by the server.
• The server checks whether the resources on the client are the same as those on the server304, otherwise return200And the latest resources.

2) legend

Similarly, a few diagrams illustrate the negotiated cache.

Let’s look at the first picture.

In the figure above, the whole process of negotiating a cache is shown. First, if the client makes a request to the server for the first time, the server returns the resource and its corresponding resource id to the browser. This resource identifier is a unique identifier for the currently returned resource, which can be either Etag or Last-Modified, as described after the legend.

Later, if the browser sends a request again, the browser will carry the resource identifier. In this case, the server checks the resource identifier to determine whether the browser resources are the same as those on the server. If so, 304 is returned, indicating that the Not Found resource is Not modified. If the result is inconsistent, 200 is returned along with the resource and the new resource id. This completes the negotiation of the cache.

---

Let’s look at the second picture.

Suppose our negotiated cache is last-Modified at this point. When the browser first sends a request, the server returns the resource and returns a last-Modified value to the browser. After the last-Modified value is given to the browser, the browser saves the last-Modified value in the if-Modified-since field, which is stored in the request header.

Later, when the browser sends a request again, the request header goes back to the server with the if-modified-since value. The server now matches the if-Modified-since value that the browser sent to the server to see If it is the same as its Last last-modified value. If they are equal, 304 is returned, indicating that the resource has not been modified. If not, 200 is returned, along with the resource and the new last-Modified value.

---

Let’s look at the third picture.

Suppose our negotiated cache is judged by Etag at this point. When the browser first sends a request, the server returns the resource and an Etag value to the browser. After the Etag value is given to the browser, the browser saves the Etag value in the if-none-match field, and if-none-match is stored in the request header.

Later, when the browser sends a request again, the request header goes to the server with the if-modified-since value, and the server now matches the if-none-match that the browser sent to the server to see If it matches the value of its last Modified Etag. If they are equal, 304 is returned, indicating that the resource has not been modified. If not, 200 is returned, along with the value of the resource and the new Etag.

Through the legend, I believe you have a new understanding of the negotiation cache. Next, I’ll look at some of the fields just included in the legend.

3) Resource identification

In Response Headers, there are two resource identifiers:

• Last-ModifiedThe request header corresponding to the last modification time of the resource isIf-Modified-Since ；
• EtagThe unique identification of resources, the so-called unique, can be imagined as the fingerprint of human beings, with uniqueness; butEtagIs essentially a string; The corresponding request header isIf-None-Match 。

4) Last-Modified and Etag

• When the response headerResponse HeadersAt the same time there isLast-Modified 和 EtagIs used preferentiallyEtag ；
• Last-ModifiedOnly accurate to the second;
• If the resource is generated repeatedly without changing the contentEtagMore accurate.

5) Headers example

As can be seen from the figure above, last-modified in the response header corresponds to if-modified-since in the request header, and Etag corresponds to if-none-match in the request header.

6) Flow chart

Speaking of which, negotiating the cache is almost over! Finally, we use a flow chart to show the whole process of negotiating cache.

3. Refresh operation mode and its impact on cache

With caching out of the way, let’s talk about a slightly important but off-topic topic: the refresh operation. When we usually get online, there is always a moment of sudden network card, this time human nature is always very impatient, do not hesitate to refresh. However, the refresh also has some impact on the cache. Let’s take a look at the various refresh postures and their impact on the cache.

(1) Normal operation

Definition: Address bar input URL, jump link, forward and backward, etc.

Impact on cache: The mandatory cache is valid, but the negotiated cache is valid.

(2) Manually refresh

Definition: F5, click refresh button, right click menu refresh.

Impact on cache: Force cache invalidation and negotiate cache validity.

(3) Forcibly refresh

Definition: CTRL + F5.

Impact on cache: Force cache invalidation and negotiate cache invalidation.

This piece of content is only for entertainment supplement, you can learn according to their own needs ~

Write at the end

HTTP protocol is very important for the development of a very important piece of content, whether front-end or back-end, for the common status code, request method request header and response header, as well as strong cache and negotiation cache are knowledge points must be understood.

So much for HTTP protocol! If you have any questions or articles are wrong, please leave a message in the comments section or send me a private message 🧐

• Pay attention to the public number Monday laboratory, the first time to pay attention to learning dry goods, more selected columns for you to unlock ~

• If this article is useful to you, be sure to like it and follow it

• See you next time!