Getting started with Ajax and post

Time:2020-1-16

In the previous essay, in a nostalgic manner, I summarized a method of building XHR objects compatible with different browsers:

After the XHR object is established, what the client needs to do is to pass the data to the server in some way to get the corresponding response. Here, in the second quarter of Ajax technology summary, I will focus on two ways to submit the data.

Before that, we need to understand our HTTP transport protocol:

HTTP works as a request response protocol between the client and the server.

For example: the client (browser) submits an HTTP request to the server; the server returns a response to the client. The response contains information about the status of the request and what might be requested. If you want to transmit data based on HTTP protocol, you must use two request methods

Two HTTP request methods: get and post

The two most commonly used methods for request response between clients and servers are get and post.

  • Get – requests data from the specified resource.
  • Post – submit the data to be processed to the specified resource

This is the description of the usage scenario of GRT and post in W3C. Literally, get is used to get data from the server, and post is used to transfer data to the server

This can be seen from the URL of submission path and data:

The properties that can be used to point to a URL are:

1. Action in the form;

2. A in the tag

3. SRC attribute in img script (this attribute is not limited by “homology policy”, and can be used for “cross domain”. I want to summarize a cross domain problem in the near future, and dig a hole here first)

Here, let’s talk about their differences in form form form submission

1、 In Ajax form submission, get uses the open() function to submit data. The data is spliced after the URL in the form of URL? Key & Value:


xhr.open('get','xxx.php?name=tom & age=18');
xhr.send(null);

In the browser URL:

Get submit url

Here we can see: get is to add the parameter data queue to the URL indicated by the action attribute of the submission form. The value corresponds to each field in the form one by one. You can see it in the URL. The URL length of ID is limited. When the URL is too long, it will automatically intercept the extra long characters. In this way, it is easy to cause a problem: when too many parameters are passed, resulting in too long URL, the URL automatically intercepts the extra long characters, and finally the part of the passed parameters cannot be obtained. This also limits the size of data transferred by get to no more than 2KB;

Moreover, from the URL screenshot, we can see that get security is very low. When submitting data through get method, the user name and password will appear on the URL. If:

-The landing page can be cached by the browser;
-Others can access the customer’s machine.

Then, others can read the account and password of this customer from the browser history. Therefore, in some cases, get method will bring serious security problems.

This is not to say that get method has no advantages. In speed test, get submission speed is dozens of times faster than post method.

2、 In Ajax form submission, post only needs to provide URL in open() function, and send() function submits data:

//Get form data
var formDom = document.querySelector('form');
var formData = new FormData(formDom);
//Send data
xhr.open('post',formDom.action);
xhr.send(formData);

Post is: through the HTTP post mechanism, each field in the form and its content are placed in the HTML header and sent to the URL address indicated by the action attribute. Users don’t see the process. High security

Post transfers a large amount of data, which is generally unlimited by default. You can use the formdata object in this demo to transfer images, rich text and other files, which is beyond the scope of get.

To summarize, get is to send a request for data to the server, while post is to submit data to the server. In form, method is “get” by default,

In fact, get and post are just different from each other in sending mechanism, not taking one sending!

In a word, there is no difference between the two forms submission methods. There are only different adaptation scenarios, which need to be grasped according to the needs in our daily work.

Later, I will summarize several different ways to write paths in the interaction between browser and server.

The above is a detailed explanation of the differences between get and post, which Xiaobian introduced to you. I hope it can help you. If you have any questions, please leave a message to me, and Xiaobian will reply you in time. Thank you very much for your support of the developepaer website!