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

Editor to share with you node.js from the http specification point of view of the xmlhttprequest send request example analysis, I hope you will learn something after reading this article, let's discuss it!

First, let's take a look at the simple http protocol.

When the browser communicates with the server, all requests sent are basically based on the http protocol.

The simplest model of the http protocol is request-> process-> response.

The information sent when a request is called a request message.

The request message contains the following three parts:

Request line (request message line)

Request header (request header)

Request style (request style)

Each request must contain these three parts. A picture is shown as follows:

This information can be seen in the network control bar of the browser, as shown in the figure:

The figure above is still a little confusing, which information belongs to the request line, which information belongs to the request header, and which information belongs to the request body? As shown in the figure:

Let's start with the request line, which contains three basic information:

A. Request method

B. The requested url

C, version of the protocol.

The first two request methods and the url of the request can be set through the javascript code, while the protocol version is controlled by the browser.

The format of the information carried in the request header is generally key-value pairs, most of which are set according to http protocol specifications, such as Content-Type:application/x-www-form-urlencoded, Content-Type:application/json, Content-Type:multipart/form-data. The information in the request header is generally used to identify some specification information of the request, such as the three commonly used request headers mentioned above, which are the format of information transmission in the request body. In addition to identifying the format in the request body, there are other functions: the Referer request header that identifies where the request comes from, whether the cached Cache-Control request header is applied, and the User-Agent request header that identifies the client information. Wait.

It should be noted that there are two cases in which the client sets the request header. One is to set the request header strictly according to the http protocol specification. For example, some request header clients cannot be set by the user, as follows:

Another situation is to set custom request headers. When setting such request headers, you should also pay attention to: 1. Do not conflict with the standard name. 2. When sending ajax requests under different domain names to set custom request headers, the server must set a special response header "Access-Control-Allow-Header:*".

This is what you need to pay attention to when setting the request header. Let's talk about the request body. When the client sends a get request, it usually does not set the request body. If a request needs to pass parameters, it is usually spliced into the url, that is, the parameters are set in the request line.

Only when sending a post request will the request body be set. When setting the request body, you need to pay attention to the format of the request body. Generally speaking, when you send a post request using jquery, you will automatically convert the data into the query string format, that is, name=zs&age=18, which is the data in this format. And the request header Content-Type:application/x-www-form-urlencoded is set in the request header. This is a format that mimics the data submitted by the form. The reason for setting the request header is to tell the back-end server that the format of the data sent is in this format.

When using some vue frameworks or react frameworks, some students will use the axios library to send post requests. This library sets the data, that is, the request body, to json format by default, and adds the request header Content-Type:application/json by default, so you should pay attention to the distinction when using it. Why should this be emphasized here? Because you need to make an agreement with the server staff to transfer the format of the data, otherwise the server will not be able to correctly parse the information in the request body without knowing the format of the data you are passing. To take a simple example, the data format in the request body is a query string, and the server only supports json format parsing, which will lead to errors.

The above briefly talked about the http request, and then let's use the XMLHttpRequest constructor to send a request. Let's first take a look at sending the get request:

When setting the request header in the third step, in order to demonstrate the use of setRequestHeader, a custom request header is set.

What needs to be noted here is:

1. Call the open method to set the request method and request url in the request line. You cannot set the http version, as mentioned earlier. The version is controlled by the browser.

2. Call the setRequestHeader method to set the request header, which can only be placed after the open method.

3. After setting the request header and the request line, the request body is set. It should be noted here that the send method can not only set the request body, but also send the request. The get request does not need to set the request body. If post passes data, it passes the data in the specified format into the send method. Why specify the data? if you set the request header to Content-Type:application/x-www-form-urlencoded, then the data is in query string format. If it is Content-Type:application/json, then the data is in json format.

The last step is to set the callback function. The position set by the callback function can be placed either in the front or in the back, all states in the front can be monitored, and some states can not be monitored in the back, but this does not affect the sending of data and receiving response data.

It is only in this callback function that you can get the value of the response attribute of xhr.

Let's take a look at the sending of the post request:

I set the request header and pass the data in send. The data format is the same as the request header, both in query string format.

Take a look at network:

What if the request header is changed to json format? Then the data format in send should also be changed to json. The correct demonstration is as follows:

The network demo is as follows:

One thing to note here is, what would it be like to send a post request using xmlhttprequest without setting the request header? As shown in the figure, comment out all the functions that set the request header:

View network:

Xmlhttprequest automatically sets the Content-Type: text/plain;charset=UTF-8 request header.

After reading this article, I believe you have a certain understanding of "sample analysis of sending requests from http in node.js". If you want to know more about it, please follow the industry information channel and thank you for your reading!

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.