怎么练习AJAX get() 和 post() 方法

AJAX (Asynchronous JavaScript and XML) 的 GET 和 POST 方法主要用于客户端向服务器发送异步请求，而无需刷新整个页面。以下是练习 AJAX GET 和 POST 方法的基本步骤：

**GET 方法练习：**
1. **HTML 部分：** 创建一个链接或按钮，并设置 `onclick` 事件处理程序，调用 JavaScript 函数发送 GET 请求。

<button onclick="getData()">获取数据</button>
<div id="data-container"></div>

2. **JavaScript 部分：** 使用 XMLHttpRequest 对象发起请求，并监听响应。

function getData() {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "your-api-url", true);
  xhr.onreadystatechange = function () {
    if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
      document.getElementById("data-container").innerHTML = xhr.responseText;
    }
  };
  xhr.send();
}

**POST 方法练习：**
1. HTML 需要一个表单或隐藏域用于传递数据。

<form id="post-form" onsubmit="event.preventDefault(); sendData()">
  <input type="text" name="data">
  <input type="submit" value="提交">
</form>

2. JavaScript 里创建一个类似 GET 的函数，不过这次使用 `FormData` 或 JSON.stringify + `setRequestHeader` 发送 POST 数据。

function sendData() {
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "your-api-url", true);
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  xhr.onreadystatechange = function () {
    if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
      console.log(xhr.responseText);
    }
  };
  var formData = new FormData(document.getElementById("post-form"));
  xhr.send(formData);
}