A Practical Guide to HTTP
01. Initial HTTP
When we enter a URL or keyword in the address bar of the browser, it will redirect us to the corresponding webpage. During this process, how does it work internally?
To summarize the above picture process,represented by a flow chart,as follows:
Process input information→initiate a request→the server receives the request→the browser reads the server’s response→DOM tree CSS tree rendering→page loading complete
HTTP belongs to the application layer in the hierarchical structure of the computer network. The bottom layer is based on TCP.
What is HTTP?
HTTP stands for Hypertext Transfer Protocol. To sum up, it is the following characteristics:
- no status
- Application layer protocol, based on TCP protocol
- Simple and scalable (you can set request headers and the like)
- request response
02.HTTP protocol analysis
HTTP development history:
HTTP/2 was adopted by 68% of companies in 2015.
message
Requests method method
| GET | Requests a representation of the specified resource, requests using GET should only be used to fetch data |
|---|---|
| POST | Used to submit the entity to the specified resource, which will modify the state on the server side. Typical application: register account, change password |
| PUT | Replace the current information of the target resource with the requested information |
| DELETE | delete the specified resource |
| HEAD | Request a response identical to that of a GET request, but without a response body |
| CONNECT | Establishes a tunnel to the server identified by the target resource |
| OPTIONS | Communication options used to describe the target resource |
| TRACE | Perform a message loopback test along the path to the target resource |
| PATCH | Used to apply partial modifications to resources |
In the process of our front-end development, the more used ones have been indicated by the highlighted part.
The above characteristics can be roughly divided into two categories:
Safe: will not modify the data on the server side GET HEAD OPTIONS
Idempotent: == The same request is executed consecutively once and the effect of executing == is the same. The state of the server is also the same as GET HEAD OPTIONS PUT DELETE.
status code
- 1**: Indication information, indicating that the request has been received and needs to be processed, so it generally does not start with 1
- 2**: Success, indicating that the request has been successfully received, understood, and accepted. eg 200 OK - client request was successful
- 3**: Redirection, further operations are required to complete the request. 301 The resource is permanently transferred to another URL 302 Temporary jump
- 4**: The client is wrong, the request has a syntax error or the request cannot be realized. 401 Not authorized 404 Resource not found
- 5**: Server error, the server failed to fulfill a legitimate request. 500 An unexpected error occurred inside the server.
REST ful interface style
Common request headers
Because HTTP is stateless, the only way to make it stateful is Cookie
User-Agent is often used to obtain whether the user is PC mobile or Android
Common response headers
cache
Divided into strong cache and negotiation cache
The negotiation cache checks whether the file is updated by comparing the time of Last-Modified/if-Modified-Since. So as to decide whether to use the cache.
The browser's cache call mechanism
cookie
JavaScript has some APIs for getting cookies. HttpOnly can prevent this from happening.
HTTP/2
Faster, simpler and more stable.
HTTPS
encryption. But this encryption time requires a certain amount of time loss.
3. Scene Analysis
Case number one:
Is the status code 200 necessarily a request? It may also be from the local cache.
Case two:
How to submit user experience at a higher level:
Case three:
For chat rooms that require real-time communication, our HTTP can no longer meet the requirements. Need to use webSocket—browser and server for two-way action.