JavaScript 如何使用HTTP GET或POST进行AJAX调用

我们需要使用JavaScript，和一个AJAX库，如jQuery，Axios，或Fetch API，使用HTTP GET或POST进行AJAX调用。Ajax（Asynchronous JavaScript and XML）通过异步更新内容来创建快速和动态的网页，而无需重新加载整个页面。它使用JavaScript从服务器发送和接收数据，数据的形式可以是XML、JSON或纯文本。本教程将教我们使用HTTP GET或POST进行Ajax调用。

Ajax有两种常见的请求类型。GET和POST。

GET请求

GET请求是用来从服务器上检索数据的。GET请求通常用于从API中检索数据，因为它们不对服务器做任何改变，因此被认为是安全的和可闲置的。

语法

用户可以按照下面的语法，使用javascript 的 ‘ XMLHttpRequest ‘对象来使用GET请求进行Ajax调用。

let xhr = new XMLHttpRequest();
xhr.open("GET", "URL", true);
xhr.send();

这将创建一个新的 “XMLHttpRequest “对象，并向给定的URL打开一个GET请求。最后，xhr.send( ) 方法被用来向服务器发送GET请求。

请注意，你将不得不提供你想要检索数据的API URL。

例子

下面的例子演示了如何用JavaScript发出GET请求，从 https://jsonplaceholder.typicode.com/posts API 中获取数据。该代码使用XMLHttpRequest对象来打开一个GET请求并处理来自服务器的响应。响应数据被解析成一个JSON对象，并使用innerHTML属性在页面上显示前三个帖子的标题。

JSONPlaceholder API是一个免费和开源的API，用于测试和原型设计。你也可以使用任何其他API。

<html>
<body>
   <h2><i>GET</i> Method Example</h2>
   <h3>Top 3 Blog Posts:</h3>
   <div id = "posts"> </div>
   <script>
      let xhr = new XMLHttpRequest();
      xhr.open("GET", "https://jsonplaceholder.typicode.com/posts", true);
      xhr.onreadystatechange = function() {
         if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
            let data = JSON.parse(xhr.responseText);
            let output = "";
            for (let i = 0; i < 3; i++) {
               output += "<p>" + data[i].title + "</p>";
            }
            document.getElementById("posts").innerHTML = output;
         }
      };
      xhr.send();
   </script>
</body>
</html>

使用XMLHttpRequest对象的POST请求

XMLHttpRequest可以用来进行POST请求，这与GET请求类似，但数据是在请求体中发送的，而不是URL。open方法用来设置请求方法为 “POST “和URL，send方法用来发送数据，onreadystatechange事件用来处理服务器的响应。内容类型和其他标头也可以根据需要进行设置。

语法

用户可以按照下面的语法来使用POST请求进行Ajax调用。

var xhr = new XMLHttpRequest(); 
xhr.open("POST", "URL", true);
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xhr.send(JSON.stringify(postData));

例子

下面的例子演示了一个使用XMLHttpRequest对象的POST请求。我们创建了一个带有两个输入字段的表单，用于输入文章标题和正文，还有一个提交按钮。当提交按钮被点击时，sendPostRequest()函数被调用，它创建一个POST请求到 “https://jsonplaceholder.typicode.com/posts “端点。该函数设置请求头以表明内容类型是JSON，并以JSON格式发送帖子数据。我们还显示成功状态。

<html>
<body>
   <h2><i>POST</i> request example</h2>
   <input type = "text" id = "title" placeholder = "Enter post title">
   <br> <br>
   <textarea id = "body" placeholder = "Enter post body"></textarea><br>
   <br>
   <button onclick = "sendPostRequest()">Submit</button> <br> <br>
   <div id = "response" ></div>
   <script>
      function sendPostRequest() {
         var postData = {
            title: document.getElementById("title").value,
            body: document.getElementById("body").value
         };
         var xhr = new XMLHttpRequest();
         xhr.open("POST", "https://jsonplaceholder.typicode.com/posts", true);
         xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
         xhr.send(JSON.stringify(postData));
         xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 201) {
               document.getElementById("response").innerHTML = "Post request successful: " + xhr.responseText;
            } else {
               document.getElementById("response").innerHTML = "Post request failed: " + xhr.responseText;
            }
         };
      }
   </script>
</body>
</html>

使用Fetch的POST请求

fetch 是一种现代的网络请求方法。它通过传递URL和一个选项对象作为参数来进行POST请求。选项对象指定请求方法为 “POST”，并将标题 “Content-Type “设为 “application/json”。请求数据在选项对象的body属性中以字符串化的JSON对象形式传递。然后使用.then()方法处理来自服务器的响应，该方法返回响应中的JSON数据。

例子

下面的例子演示了一个使用fetch的POST请求。一个简单的表单向JSON占位符API发送了一个POST请求。在提交时，响应数据被显示在一个HTML pre标签的格式化。

<html>
<body>
   <h2>Create New Blog Post:</h2>
   <form>
      <input type = "text" id = "title" placeholder = "Title" required>
      <textarea id = "body" placeholder = "Body" required> </textarea>
      <button type = "button" id = "submitBtn"> Submit </button>
   </form> <br>
   <h2>Response:</h2>
   <pre id = "response" ></pre>
   <script>
      document.getElementById("submitBtn").addEventListener("click", function() {
         let title = document.getElementById("title").value;
         let body = document.getElementById("body").value;
         let data = {
            title: title,
            body: body 
         };
         fetch("https://jsonplaceholder.typicode.com/posts", {
            method: "POST",
            headers: {
               "Content-Type": "application/json"
            },
            body: JSON.stringify(data)
         })
         .then(response => response.json())
         .then(data => {
            document.getElementById("response").innerHTML = JSON.stringify(
               data,
               null,
               2
            );
         });
      });
   </script>
</body>
</html>