Shulou(Shulou.com)06/02 Report--

This article will explain in detail the example analysis of the front-end HTTP protocol. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

In fact, the front-end function will often come into contact with the browser web-related in the actual development, a total of four parts.

1. Reason

As shown in the figure, then why will we introduce the http protocol in the front end, because the vast majority of web applications are built on top of the http protocol.

2. What is it

To put it simply, http protocol is a stateless application layer protocol based on TCP (browser and server) mode.

3. What does it include

Now let's analyze what the http protocol I want to introduce contains.

Because the http protocol is an application in browser and server mode, then it must contain both the request and the response. What I want to talk about here is what is contained in the request and what else is contained in the response. The format of the message in the request includes header, body, URI, then request method, request header, and so on. The response includes the response status code, message header and response body.

4 、 FAQ

There are also some problems that people often encounter in the process of learning the web front end, such as what are the common request headers? For example, "user-aget", "cookle", "Referrer" and the common response headers "Content-Type", "Content-Length" and "Cache", as well as some content that controls the resource cache, and the common status code is the status code of the response. The "2xx" in the status code indicates that the request is successful or outgoing, "3xx" means jump, "4xx" means client request error, and "5xx" indicates server-side error.

So in order to give you a detailed introduction to a http request and response section.

As shown in the picture, open the developer tool of Google browser, there are three horizontal bar symbols in the upper right corner, click on this symbol, then select more tools "more tools" and click developer tools to appear.

As shown in the figure, then click under the network, and then look at the first one in the list, and then you can see that "Request headers" is the request header, and you can see that there are several key points under it, such as "accept" is what type of encoding you can accept, and whether you support compression and so on.

Then another key point is "cookie", because it was mentioned earlier that http is a connectionless, stateless protocol, that is, between two requests, the next request does not know the status of the previous request, so "cookie" is introduced to solve this problem.

In addition, "referer" jumps to the current page, which page I come from, which is very useful when doing website statistics, because this referer is not allowed to be changed in the browser's security policy, that is, no one else can control this referer.

As shown in the figure, there is also an important one called "user agent", which is simply understood as a user agent, which is something that identifies the current browser.

As shown in the figure, the "Request Headers" I just said is a request header, so the first line of the http request is actually this content, followed by the request header.

As shown in the figure, this is the real request. For example, the green part of the picture represents what I am currently requesting, then it is requested with the "GET" method, and then I get a response status code of 200.

As shown in the figure, you can see that the response status code is here, first the protocol, then the status code, and then the ok. "content-type" is an important response header, so content indicates the type of content currently transmitted, that is, the http protocol limit is that only one type of content can be found in a link, but this restriction is broken in http2.

This is the end of this article on "sample analysis of front-end HTTP protocols". I hope the above content can be helpful to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.