📜  Vanilla JavaScript 中 GET 和 POST 请求的区别

📅  最后修改于: 2022-05-13 01:56:37.213000             🧑  作者: Mango

Vanilla JavaScript 中 GET 和 POST 请求的区别

在本文中,我们将了解 vanilla Javascript 中的 GET 和 POST 请求方法,并通过示例了解这两种方法。

GETPOST是两种不同类型的HTTP请求方法。 HTTP协议支持多种方法从服务器传输数据或在服务器上执行任何操作。 HTTP 协议支持的方法有 GET、POST、PUT、DELETE、PATCH、COPY、HEAD、OPTIONS 等。在深入探讨GETPOST请求方法的主要区别之前,我们先来看看这些 HTTP 方法是什么是。

  • GET request() 方法:正在从特定资源(通过某些 API URL)请求数据。在此示例中,使用了一个虚拟 API 来演示 GET 请求是如何实际工作的。
  • POST request() 方法:将要处理的数据发送到特定资源(通过一些 API URL)。在此示例中,使用了一个虚拟 API 来演示 POST 请求的实际工作方式。

GET 和 POST 请求方法由fetch() 方法使用,该方法用于向服务器请求并加载网页中的信息。

示例:示例演示了 GET 请求方法。

Javascript
// Instantiating new XMLHttpRequest() method
let xhr = new XMLHttpRequest();
  
// open() method to pass request
// type, url and async true/false 
xhr.open('GET',
    'https://jsonplaceholder.typicode.com/users/2', true);
  
// onload function to get data 
xhr.onload = function () {
    if (this.status === 200) {
        console.log(JSON.parse(this.responseText));
    }
}
  
// Send function to send data
xhr.send()


Javascript
// Instantiating new XMLHttpRequest()
let xhr = new XMLHttpRequest();
  
// open() method to pass request
// type, url and async true/false 
xhr.open('POST',
    'http://dummy.restapiexample.com/api/v1/create', true);
  
// Setting content-type
xhr.getResponseHeader('Content-type', 'application/json');
  
// Perform the following when the response is ready
xhr.onload = function () {
    if (this.status === 200) {
        console.log(this.responseText)
    }
    else {
        console.log("Some error occured")
    }
}
  
// Send the request as an object obj
obj = `{"name":"Selmon Bhoi", 
        "salary":"$10, 000", "age":"55"}`;
xhr.send(obj);


示例:示例演示了 POST 请求方法。

Javascript

// Instantiating new XMLHttpRequest()
let xhr = new XMLHttpRequest();
  
// open() method to pass request
// type, url and async true/false 
xhr.open('POST',
    'http://dummy.restapiexample.com/api/v1/create', true);
  
// Setting content-type
xhr.getResponseHeader('Content-type', 'application/json');
  
// Perform the following when the response is ready
xhr.onload = function () {
    if (this.status === 200) {
        console.log(this.responseText)
    }
    else {
        console.log("Some error occured")
    }
}
  
// Send the request as an object obj
obj = `{"name":"Selmon Bhoi", 
        "salary":"$10, 000", "age":"55"}`;
xhr.send(obj);

GET 和 POST 的区别:

S.No.

                      GET Request

                               POST Request

1.

GET retrieves a representation of the specified resource.

POST is for writing data, to be processed to the identified resource.

2.

It typically has relevant information in the URL of the request.

It typically has relevant information in the body of the request.

3.

It is limited by the maximum length of the URL supported by the browser and web server.

It does not have such limits.

4.

It is the default HTTP method.

In this, we need to specify the method as POST to send a request with the POST method.

5.

You can bookmark GET requests.

You cannot bookmark POST requests.

6.

It is less secure because data sent is part of the URL

It is a little safer because the parameters are not stored in browser history or in web server logs.

7.

It is cacheable.

It is not cacheable.

8.

For eg. GET the page showing a particular question.

For eg. Send a POST request by clicking the “Add to cart” button.