Ajax 简明教程

AJAX - Types of Requests

AJAX 是一种用于创建动态网页的 Web 技术。它允许网页更新其内容，而无需重新加载整个页面。总体而言，AJAX 支持四种类型的请求，它们是：

GET request
POST request
PUT request
DELETE request

GET Request

GET 请求用于从服务器检索数据。在此请求中，数据以 URL 的一部分发送，该 URL 附加在请求的末尾。我们可以使用 open() 方法发出此请求。

Syntax

open(GET, url, true)

其中，open() 方法接受三个参数：

GET - 用于从服务器检索数据。
url - url 表示将在 Web 服务器上打开的文件。
true - 对于异步连接，将值设置为 true。或者，对于同步连接，将值设置为 false。此参数的默认值为 true。

Example

<!DOCTYPE html>
<html>
<body>
<script>
   function displayRecords() {
      // Creating XMLHttpRequest object
      var zhttp = new XMLHttpRequest();
      // Creating call back function
      zhttp.onreadystatechange = function() {
         if (this.readyState == 4 && this.status == 200) {
            document.getElementById("example").innerHTML = this.responseText;
         }
      };
      // Open the given file
      zhttp.open("GET", "https://jsonplaceholder.typicode.com/todos/6", true);
      // Sending the request to the server
      zhttp.send();
   }
</script>
<div id="example">
   <p>Please click on the button to fetch 6th record from the server</p>
   <button type="button" onclick="displayRecords()">Click Here</button>
</div>
</body>
</html>

Output

在上面的示例中，我们使用 XMLHttpRequest 中的 GET 请求 "https://jsonplaceholder.typicode.com/todos/6" API 从服务器获取第 6 条记录。因此，单击按钮后，我们将在服务器中获取第 6 条记录。

POST Request

POST 请求用于将数据从网页发送到 Web 服务器。在此请求中，数据通过与 URL 分开的请求正文发送。我们可以将此请求与 open() 方法配合使用。

Syntax

open('POST', url, true)

其中，open() 方法接受三个参数：

POST − 它用于向 Web 服务器发送数据。
url − url 表示服务器（文件）位置。
true - 对于异步连接，将值设置为 true。或者，对于同步连接，将值设置为 false。此参数的默认值为 true。

Example

<!DOCTYPE html>
<html>
<body>
<script>
   function sendDoc() {
      // Creating XMLHttpRequest object
      var qhttp = new XMLHttpRequest();
      // Creating call back function
      qhttp.onreadystatechange = function() {
         if (this.readyState == 4 && this.status == 201) {
            document.getElementById("sample").innerHTML = this.responseText;
            console.log("Data Send Successfully")
         }
      };
      // Open the given file
      qhttp.open("POST", "https://jsonplaceholder.typicode.com/todos", true);
      // Setting HTTP request header
      qhttp.setRequestHeader('Content-type', 'application/json')
      // Sending the JSON document to the server
      qhttp.send(JSON.stringify({
         "title": "MONGO",
         "userId": 11,
         "id": 21,
         "body": "est rerum tempore"
      }));
   }
</script>
<h2>Example of POST Request</h2>
<button type="button" onclick="sendDoc()">Post Data</button>
<div id="sample"></div>
</body>
</html>

Output

在上述示例中，我们使用 PUT 请求使用以下给定数据更新记录。

"https://jsonplaceholder.typicode.com/todos/21" API:
{
   "title": "MONGO",
   "userId": 11,
   "id": 21,
   "body": "est rerum tempore"
}

DELETE Request

DELETE 请求用于从 Web 服务器删除数据。在此请求中，要删除的数据通过请求正文发送，Web 服务器将从其存储中删除该数据。

Syntax

open('DELETE', url, true)

其中，open() 方法接受三个参数：

DELETE − 它用于从 Web 服务器中删除数据。
url − 它表示将在 Web 服务器上打开的文件 URL。或者我们可以说服务器（文件）位置。
true - 对于异步连接，将值设置为 true。或者，对于同步连接，将值设置为 false。此参数的默认值为 true。

Example

<!DOCTYPE html>
<html>
<body>
<script>
   function delDoc() {
      // Creating XMLHttpRequest object
      var qhttp = new XMLHttpRequest();
      // Creating call back function
      qhttp.onreadystatechange = function() {
         if (this.readyState == 4 && this.status == 200) {
            document.getElementById("sample").innerHTML = this.responseText;
            console.log("Record Deleted Successfully")
         }
      };
      // Deleting given file
      qhttp.open("DELETE", "https://jsonplaceholder.typicode.com/todos/2", true);
      // Sending the request to the server
      qhttp.send();
   }
</script>
<div id="sample">
   <h2>Example of DELETE Request</h2>
   <button type="button" onclick="delDoc()">Deleteing Data</button>
</div>
</body>
</html>

Output

在上述示例中，我们使用 DELETE 请求 "https://jsonplaceholder.typicode.com/todos/2" API 删除 Id = 2 上的记录。

AJAX 还支持其他一些请求，例如 OPTIONS、HEAD 和 TRACE，但它们是 AJAX 应用程序最不常用的请求。现在在下一篇文章中，我们将看到 AJAX 如何处理响应。