Network Principles—Getting to Know the HTTP Protocol: Requests and Responses

Article directory

  • Recognition request
    • first line
      • URL
        • URL format
        • URL encode and decode
      • version number
      • method
        • GET method
        • POST method
        • GET VS POST
    • Request header: header
      • Host
      • Content-Length and Content-Type
      • User-Agent(UA)
      • Referer
      • Cookies
    • blank line
    • Text: body
      • How to construct an HTTP request?
        • The browser constructs its own
        • HTML structure
        • ajax construct
        • Third-party tools: postman construction
  • recognition response
    • first line
    • Response header: header
    • blank line
    • Text: body
      • status code
      • Content-Type

Recognition request

First line

URL

What we usually call “website” is actually a URL. There is a similar concept called URI

URL: is a unique resource locator, used to find unique resources on the Internet.
URI: is a unique resource identifier used to distinguish resources on the network

These two concepts are very similar, and generally we do not make a distinction.

URL format

What the format of a URL looks like is described by the “RFC standard document”. We introduce a typical URL below:

A complete URL includes:
Protocol: //Host name (domain name): port number/path/query string query string

Note:

  1. The default port number of HTTP protocol is 80
  2. The default port number of HTTPS protocol is 443
URL encoding and decoding

URL encoding: Convert original characters into escaped characters
URL decoding: convert escaped characters into original characters

Reason for encoding and decoding:
The URL already contains some symbols with special meanings, such as: /?
In case these characters also appear in the value of the query string. This may lead to truncation errors (incorrectly distinguishing how many characters each field contains), the browser may incorrectly recognize the URL, and the server may incorrectly parse the URL.

Escaping rules:
Express each character of the string to be escaped in hexadecimal and add a % before each byte.

Version number

Version number: indicates the current version

Method

There are many methods for HTTP requests, and each method has its own purpose. But there are only two commonly used ones: GET and POST. We will only introduce these two methods below:

GET method

Features:

  1. The first one in the first line is GET
  2. The query string in the URL can be empty or not.
  3. There are several sets of key-value pairs such as headers in the GET request.
  4. The body of the GET request is empty
POST method

Features:

  1. The first one in the first line is POST
  2. The query string in the URL is empty
  3. There are several sets of key-value pairs such as headers in the POST request.
  4. The body of a POST request is generally not empty. When POST wants to transmit information to the server, the information is placed in the body and passed.
GET VS POST

  1. There is no essential difference between GET and POST. Scenarios that use GET can basically be replaced by POST; scenarios that use POST can basically be replaced by GET.

  2. The difference in semantics: GET means “obtaining data from the browser”; POST means “submitting data to the browser”

  3. The difference in usage habits: When transmitting data to the server, GET usually puts the data in the query string of the URL; POST usually puts the data in the body.

  4. GET requests are recommended to be implemented as “idempotent”; POST is generally not required to be implemented as “idempotent” Idempotence: means that the input is deterministic and the output is deterministic

  5. On the basis of “idempotence”, GET request results can be cached; POST request results are generally not cached.

    If the current GET is idempotent, let the browser cache it
    If the current GET is not idempotent, the browser must avoid caching (for example: make the URL of each GET request different)

  6. Neither GET requests nor POST requests are safe. The transmitted information is not encrypted, and there is little difference between putting it in the query string and putting it in the body.

Request header: header

Most of the headers contain some prescribed key-value pairs, and each set of key-value pairs has a fixed meaning. Of course, you can also put some custom key-value pairs in the header.

Let’s introduce the meaning of these fixed key-value pairs:

Host

Host represents the host address and port of the server, which is actually the IP address and port number.

Don’t there be IP addresses and port numbers in the URL? Why do we need another Host?

In fact, the IP address and port number in the URL are not necessarily exactly the same as the IP address and port number in the Host. (This is different when the request is accessed to the server through a proxy)

Content-Length and Content-Type

Content-Length: Indicates the length of data in the body, which can be used to solve the “sticky problem”
Content-Type: Indicates the data format in the body

These two fields may not necessarily exist, but if they exist, they must have both.
When there is no body in the request (GET), there is none.
When there is a body (POST) in the request, there is.

Content-Type common formats:

  1. application/x-www-form-urlencoded：

    The format when submitting data from the form is the same as the query string. For example: username=”zhangsan” & password=”123456″

  2. multipart/form-data：

    Format when uploading files

  3. application/json：

    The data is in json format, and the data organization form in the body is as follows: {username: “zhangsan”, password: “123456”}

User-Agent (UA)

UA: Contains operating system information and browser information, describing what kind of devices users use to access the Internet, to provide different “support” for different devices (for example: page support, etc.)

Note: Nowadays, the function of UA has been weakened (browsers are basically unified), and it is used on the server side to count the user’s device status (how many users use which version and which device to access)

Referer

Referer: refers to the page from which the current page is redirected, and saves the address of the previous page. It may not be available (for example: when opening it directly)

Application scenario: Advertising billing (billing by click volume: CPC advertising)

Cookie

Cookie: It is a mechanism for the browser to store data locally, which is stored on the hard disk.

Most of the information needed has been saved on the server side, but there is some special information that needs to be saved persistently on the browser. However, for the sake of security, the browser prohibits JS from directly accessing your hard drive to prevent damage to your hard drive data. It specifically provides some APIs for web pages to use, allowing it to store some simple data. This is Cookie

Note:

  1. Cookies are organized by domain name, and some cookies are stored under each domain name.
  2. Each cookie is a key-value pair and is defined by the programmer.
  3. Cookies are stored in the browser, but the source is the server. The server can construct the cookie in the response.
  4. Cookies come from the server, are saved in the browser, and will eventually be returned to the server. After the current browser saves the cookie, the next time you visit the same website, the locally stored cookie will be passed to the server through an HTTP request.

Empty line

Text: body

The text body only exists in POST requests. There are three common formats Content-Type. These have been introduced when introducing Header above. If you want to see it, you can flip it up and take a look! ! !

How to construct an HTTP request?

The browser constructs it itself

Enter the URL address in the browser address bar and click Enter, and an HTTP request will be automatically constructed.

HTML structure
  1. Constructed through the href attribute of the a tag, clicking the a tag will initiate an HTTP request.
  2. Through the src attribute construction of the img tag, an HTTP request will be automatically initiated when an image needs to be loaded.
  3. Use form form construction through input tags

Note: The request constructed by the form form will definitely trigger a page jump.

ajax structure

Use JS with Jquery to initiate HTTP requests through ajax on the front-end page

Note: Requests initiated by ajax generally do not trigger page jumps. Of course, the jump can also be controlled manually.

Third-party tools: postman construction

Use postman software to construct any type of request

Understanding responses

First line

First line = protocol version + status code + status text

//For example: HTTP/1.1 200 OK

HTTP/1.1 is the HTTP protocol version, 200 is the response status code, and OK is the status text

Response header: header

The response headers are similar to the request headers in HTTP requests. We only need to recognize the common request headers introduced in the request headers.

Empty line

Text: body

There are four types introduced below: Content-Type

Status code

Status code: It is a number that describes the status of the current request (success, failure, reason for failure).

There are many status codes. Here are some common status codes:

200: Indicates successful access

There is a problem with the client:
404: Not Find, the request path is wrong (the resource you want to access is not on the server)
403: Forbidden, access denied (no permission)

There is a problem with the server:
500: Internal Server Error, server internal error
504: Gateway Timeout, access timeout (the server cannot respond when the traffic is heavy)

302: Redirect, automatically transfer the accessed old URL to the new URL

Summarize:

Content-Type

The response Content-Type has the following types:

  1. text/html: The data format of body is HTML
  2. text/css: The data format of body is CSS
  3. application/javascript: The data format of body is JS
  4. application/json: The data format of body is json