Detailed explanation of the use of GET and POST in Ajax

This time I will bring you a detailed explanation of the use of GET and POST in Ajax. What are the precautions when using GET and POST in Ajax. The following is a practical case, let's take a look.

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

After establishing the XHR object, all the client needs to do is , pass the data to the server in some way to obtain the corresponding response. Here, in the second quarter of Ajax Technology Summary, I will focus on two ways to submit data.

Before doing this, we need to understand our HTTP transmission protocol:

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

Example: The client (browser) submits an HTTP request to the server; the server returns a response to the client. The response contains status information about the request and the content that may have been requested. If you want to transmit data based on the HTTP protocol, you must use two request methods.

Two HTTP request methods: GET and POST

When request-response between the client and the server, the two most commonly used methods are: GET and POST.

• GET - Requests data from a specified resource.

• POST - Submit data to be processed to the specified resource

This is the usage scenario description of GRT and POST from W3C. Literally understood, it is: GET is used to obtain data from the server, and POST is used to transmit data to the server.

We can see this from the URL of the submission path and data:

The attributes that can be used to point to the URL are:

1. action in the form;

2. in the a tag href

3. The src attribute in img script (this attribute is not restricted by the "same origin policy" and can be used for "cross-domain". I would like to summarize some cross-domain issues in the near future. Here first Digging a hole)

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

1. In Ajax form submission, get Use the open() function to submit data, in which the data is spliced ​​behind the URL in the form of URL? key & value:

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

In the URL of the browser, it looks like this:

get Submit URL

It can be seen here: GET adds the parameter data queue to the URL pointed to by the action attribute of the submitted form, and the value is the same as the value in the form. Each field has a one-to-one correspondence and can be seen in the URL. The URL length of the ID is limited. When the URL is too long, overlong characters will be automatically intercepted. This can easily cause a problem: when too many parameters are passed, causing the URL to be too long, the URL automatically intercepts the overlong characters, and ultimately the passed parameters cannot be obtained. This also limits the size of data transmitted by GET to generally not exceed 2KB;

Moreover, as can be seen from the URL screenshot: GETsecurity is very low. When data is submitted through the GET method, The username and password will appear on the URL. If:

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

Then, others can read the customer's account number and password from the browser's history. Therefore, in some cases, the GET method can cause serious security issues.

This is not to say that the GET method has no advantages. In the speed test, the speed of GET submission is dozens of times that of the POST method.

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

//获取form数据
var formDom = document.querySelector('form');
var formData = new FormData(formDom);
//发送数据
xhr.open('post',formDom.action);
xhr.send(formData);

POST is: through the HTTPPOST mechanism, the form is Each field and its content are placed in the HTML HEADER and sent to the URL address pointed to by the action attribute. Users cannot see this process. Higher security

POST transmits a large amount of data and is generally unrestricted by default. You can use the FormData object in this demo to pass pictures, rich text and other files, which is something that get cannot do.

To summarize, Get is a request to the server for data, while Post is a request to submit data to the server. In FORM (form), the Method defaults to "GET",

In essence, GET and POST only have different sending mechanisms, not one is taken and the other is sent!

In short, there is no distinction between these two form submission methods, only different adaptation scenarios, which need to be grasped according to needs in our daily work.

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

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Methods for ajax to respond to json strings and json arrays

Using Ajax to achieve synchronization and asynchronous What’s the difference

The above is the detailed content of Detailed explanation of the use of GET and POST in Ajax. For more information, please follow other related articles on the PHP Chinese website!