XMLHttpRequest GET&POST：高效沟通的制胜法宝

2022-11-30 08:52:12

XMLHttpRequest：解锁动态交互式网页的秘密

引言

在当今复杂多变的网络世界中，XMLHttpRequest (XHR) 扮演着至关重要的角色，充当着前端和服务器之间沟通的桥梁。它不仅是前端开发的基石，更是构建动态交互式网页的利器，让网页不再局限于被动地展示内容，而是成为与用户对话的纽带。

GET 请求：从服务器获取数据

GET 请求就像一个请求数据的信使，它向服务器发出这样的信息："喂，服务器，把你的数据给我看看。"这个过程就如同你在网上购物时查看商品详情，只需轻轻一点，商品信息便跃然眼前。借助 XHR，你可以发送 GET 请求来获取任何你拥有访问权限的数据。

POST 请求：向服务器发送数据

POST 请求则肩负着将数据发送到服务器的使命，就好比你向朋友发送信息："嘿，我有件重要的事要告诉你。"POST 请求通常用于提交表单数据、上传文件或执行其他需要修改服务器端数据的操作。你可以通过 XHR 发起 POST 请求，将想要发送的数据打包成一个数据包，然后像投递一封信一样发送给服务器。

代码实例：掌握 XHR 的实际用法

为了更深入地理解 XHR 的实际应用，我们提供了一个简单的代码示例，展示如何使用 XHR 发起 GET 和 POST 请求：

// GET 请求示例
const xhr = new XMLHttpRequest();
xhr.open("GET", "https://example.com/api/data");
xhr.send();

xhr.onload = function() {
  if (xhr.status === 200) {
    // 请求成功，处理服务器返回的数据
    console.log(xhr.responseText);
  } else {
    // 请求失败，处理错误信息
    console.error(xhr.statusText);
  }
};

// POST 请求示例
const xhr = new XMLHttpRequest();
xhr.open("POST", "https://example.com/api/submit");
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send(JSON.stringify({ name: "John Doe", age: 30 }));

xhr.onload = function() {
  if (xhr.status === 200) {
    // 请求成功，处理服务器返回的数据
    console.log(xhr.responseText);
  } else {
    // 请求失败，处理错误信息
    console.error(xhr.statusText);
  }
};