前端AJAX入门到实战，学习前端框架前必会的（ajax+node.js+webpack+git）

在这个系列中，我们将使用AJAX、Node.js、Webpack和Git来构建一个简单的前端应用程序。以下是第四部分的内容，其中我们将介绍如何使用AJAX发送GET和POST请求。

1. 使用AJAX发送GET请求

// 创建一个新的XMLHttpRequest对象
const xhr = new XMLHttpRequest();
 
// 配置请求类型、URL 以及是否异步处理
xhr.open('GET', 'https://api.example.com/data', true);
 
// 设置请求完成的回调函数
xhr.onreadystatechange = function () {
  // 请求完成并且响应状态码为 200
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      // 处理请求成功的响应数据
      console.log(xhr.responseText);
    } else {
      // 处理请求失败
      console.error('AJAX Request failed');
    }
  }
};
 
// 发送请求
xhr.send();

2. 使用AJAX发送POST请求

// 创建一个新的XMLHttpRequest对象
const xhr = new XMLHttpRequest();
 
// 配置请求类型、URL 以及是否异步处理
xhr.open('POST', 'https://api.example.com/data', true);
 
// 设置请求头，如内容类型
xhr.setRequestHeader('Content-Type', 'application/json');
 
// 设置请求完成的回调函数
xhr.onreadystatechange = function () {
  // 请求完成并且响应状态码为 200
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      // 处理请求成功的响应数据
      console.log(xhr.responseText);
    } else {
      // 处理请求失败
      console.error('AJAX Request failed');
    }
  }
};
 
// 发送包含数据的请求
xhr.send(JSON.stringify({ key: 'value' }));

以上代码演示了如何使用原生JavaScript的XMLHttpRequest对象来发送GET和POST请求。这是现代前端开发中一个非常基础且重要的概念，因为它允许我们从浏览器中异步获取数据。虽然现代开发中我们通常会使用更现代的API，如fetch，但是XMLHttpRequest对象在所有现代浏览器中都得到了支持，而且是理解AJAX基础的关键。