In web development, submitting data to the server is a basic function, which is largely done with XHR/FETCH API or axios, a library that encapsulates one layer.

You’ve probably written a lot of HTTP/HTTPS code, but haven’t looked at what they are?

In fact, there are basically five ways to transmit data to the server through HTTP/HTTPS: URL Param, Query, form-urlencoded, form-data, json.

url param

Restful specifications allow arguments to be written in urls, such as:

http://guang.zxg/person/1111
Copy the code

In this case, 1111 is the parameter in the path (URL param), and the server framework or single-page application routing supports fetching parameters from the URL.

query

Through the url? The subsequent ampers-delimited string passes the data. Such as:

http://guang.zxg/person?name=guang&age=20
Copy the code

Here name and age are the data passed by Query.

Non-english characters and special characters are encoded using the encodeURLComponent API or the qeury-String library, which encapsulates one layer.

const queryString = require('query-string');

queryString.stringify({
  name: 'light'.age: 20
});
/ /? name=%E5%85%89&age=20
Copy the code

There are only two ways to pass data through a URL, and the last three are ways to pass data through a body.

form-urlencoded

This is done by submitting data directly with a Form form, which differs from a Query string only by putting it in the body and specifying that the content-type is Application/X-www-form-urlencoded.

Since it is a query string, it is also processed using the encodeURIComponent API or the Query-String library.

This design is also easy to understand. Get puts the data in a query string after the URL, so when designing the form’s POST submission, it puts the data in the body in the same way.

Form-urlencoded content requires URL encode, which is not suitable for transferring large amounts of data, such as uploading files, because it takes too long to encode files once, so form-data can be used.

form-data

Form Data is no longer separated by &, but is separated by ——— + a string of numbers. Because it’s not the URL way, it doesn’t have to do url encode.

Form-data needs to specify content Type as multipart/form-data and then specify boundary which is the dividing line.

The body is the content segmented by boundary line.

This is obviously a good way to transfer files, and you can transfer multiple files.

However, after all, more boundary is only used for separation, so the request experience increases.

json

Form-urlencoded content requires URL encode, while form data requires long boundary. Both methods have some disadvantages. You don’t need either if you’re just transferring JSON data.

You can specify the content type as Application /json:

This is what we usually use to transfer JSON data.

These are the three ways to pass data through the body.

conclusion

It is a basic function to transmit data to the server in web development. The commonly used methods are URL Param, Query, Form urlencoded, form Data and JSON.

The first two are ways to transmit data through URL (url encode is required for data), and the last three are ways to transmit data through body.

The form urlencoded only put Query in the body, which also required URL encoded data, so processing files was not appropriate. (Content type must be application/ X-www-form-urlencoded)

Form data is used to separate the content through boundary without doing URL encode, so it is very suitable for transferring files. There is no need to use boundary strings if you are not transferring files. (Content type must be multipart/form-data)

Json is now the most commonly used way to transfer data without the need for EITHER URL encoded or unnecessary boundary. (Specify content Type as Application /json).

Of course, you can specify other Content types, such as application/ XML, text/plain, etc., but they are generally not used.

99% of the time, we interact with the server through these five HTTP/HTTPS submission methods.