Home Web Front-end JS Tutorial Detailed explanation of the use of GET and POST in Ajax

Detailed explanation of the use of GET and POST in Ajax

Apr 02, 2018 pm 02:54 PM
ajax post Detailed explanation

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);
Copy after login

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);
Copy after login

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!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Detailed explanation of obtaining administrator rights in Win11 Detailed explanation of obtaining administrator rights in Win11 Mar 08, 2024 pm 03:06 PM

Windows operating system is one of the most popular operating systems in the world, and its new version Win11 has attracted much attention. In the Win11 system, obtaining administrator rights is an important operation. Administrator rights allow users to perform more operations and settings on the system. This article will introduce in detail how to obtain administrator permissions in Win11 system and how to effectively manage permissions. In the Win11 system, administrator rights are divided into two types: local administrator and domain administrator. A local administrator has full administrative rights to the local computer

Detailed explanation of division operation in Oracle SQL Detailed explanation of division operation in Oracle SQL Mar 10, 2024 am 09:51 AM

Detailed explanation of division operation in OracleSQL In OracleSQL, division operation is a common and important mathematical operation, used to calculate the result of dividing two numbers. Division is often used in database queries, so understanding the division operation and its usage in OracleSQL is one of the essential skills for database developers. This article will discuss the relevant knowledge of division operations in OracleSQL in detail and provide specific code examples for readers' reference. 1. Division operation in OracleSQL

How to solve the 403 error encountered by jQuery AJAX request How to solve the 403 error encountered by jQuery AJAX request Feb 20, 2024 am 10:07 AM

Title: Methods and code examples to resolve 403 errors in jQuery AJAX requests. The 403 error refers to a request that the server prohibits access to a resource. This error usually occurs because the request lacks permissions or is rejected by the server. When making jQueryAJAX requests, you sometimes encounter this situation. This article will introduce how to solve this problem and provide code examples. Solution: Check permissions: First ensure that the requested URL address is correct and verify that you have sufficient permissions to access the resource.

PHP and Ajax: Building an autocomplete suggestion engine PHP and Ajax: Building an autocomplete suggestion engine Jun 02, 2024 pm 08:39 PM

Build an autocomplete suggestion engine using PHP and Ajax: Server-side script: handles Ajax requests and returns suggestions (autocomplete.php). Client script: Send Ajax request and display suggestions (autocomplete.js). Practical case: Include script in HTML page and specify search-input element identifier.

How to solve the problem of jQuery AJAX error 403? How to solve the problem of jQuery AJAX error 403? Feb 23, 2024 pm 04:27 PM

How to solve the problem of jQueryAJAX error 403? When developing web applications, jQuery is often used to send asynchronous requests. However, sometimes you may encounter error code 403 when using jQueryAJAX, indicating that access is forbidden by the server. This is usually caused by server-side security settings, but there are ways to work around it. This article will introduce how to solve the problem of jQueryAJAX error 403 and provide specific code examples. 1. to make

Detailed explanation of the role and usage of PHP modulo operator Detailed explanation of the role and usage of PHP modulo operator Mar 19, 2024 pm 04:33 PM

The modulo operator (%) in PHP is used to obtain the remainder of the division of two numbers. In this article, we will discuss the role and usage of the modulo operator in detail, and provide specific code examples to help readers better understand. 1. The role of the modulo operator In mathematics, when we divide an integer by another integer, we get a quotient and a remainder. For example, when we divide 10 by 3, the quotient is 3 and the remainder is 1. The modulo operator is used to obtain this remainder. 2. Usage of the modulo operator In PHP, use the % symbol to represent the modulus

Detailed explanation of the linux system call system() function Detailed explanation of the linux system call system() function Feb 22, 2024 pm 08:21 PM

Detailed explanation of Linux system call system() function System call is a very important part of the Linux operating system. It provides a way to interact with the system kernel. Among them, the system() function is one of the commonly used system call functions. This article will introduce the use of the system() function in detail and provide corresponding code examples. Basic Concepts of System Calls System calls are a way for user programs to interact with the operating system kernel. User programs request the operating system by calling system call functions

How to get variables from PHP method using Ajax? How to get variables from PHP method using Ajax? Mar 09, 2024 pm 05:36 PM

Using Ajax to obtain variables from PHP methods is a common scenario in web development. Through Ajax, the page can be dynamically obtained without refreshing the data. In this article, we will introduce how to use Ajax to get variables from PHP methods, and provide specific code examples. First, we need to write a PHP file to handle the Ajax request and return the required variables. Here is sample code for a simple PHP file getData.php:

See all articles