原生JavaScript 与 jQuery 执行Ajax请求

原生JavaScript和jQuery都可以用来执行Ajax请求，以下是它们的基本实现方式的比较：

原生JavaScript实现Ajax请求：

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data", true);
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
        var response = JSON.parse(xhr.responseText);
        // 在这里处理响应数据
    }
};
xhr.send();

上述代码中，我们创建了一个XMLHttpRequest对象来执行GET请求。在回调函数onreadystatechange中，我们检查xhr.readyState和xhr.status来确保请求已成功完成，然后我们可以处理响应数据。

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('网络请求失败');
    }
    return response.json(); // 将响应解析为 JSON
  })
  .then(data => {
    // 在这里处理响应数据
  })
  .catch(error => {
    // 处理错误
    console.error('发生错误:', error);
  });

上述代码中，我们首先使用 fetch 函数传递目标 URL 来发起一个GET请求。fetch 返回一个 Promise，我们可以使用 .then 处理成功的响应，然后使用 .json() 方法将响应解析为 JSON 数据。如果响应状态码不在 200 到 299 范围内（即请求失败），我们会抛出一个错误。

你还可以使用 fetch 来执行其他类型的请求，如 POST 请求，以及设置请求头和发送数据。以下是一个 POST 请求的示例：

fetch('https://api.example.com/postData', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    key1: 'value1',
    key2: 'value2'
  })
})
  .then(response => {
    if (!response.ok) {
      throw new Error('网络请求失败');
    }
    return response.json();
  })
  .then(data => {
    // 在这里处理响应数据
  })
  .catch(error => {
    console.error('发生错误:', error);
  });

在这个示例中，我们指定了请求方法为 POST，设置了请求头的 Content-Type 为 application/json，然后将数据作为 JSON 字符串发送到服务器。

fetch API 提供了更灵活和现代的方式来处理网络请求

jQuery实现Ajax请求：

$.ajax({
    url: "https://api.example.com/data",
    method: "GET",
    dataType: "json",
    success: function (data) {
        // 在这里处理响应数据
    },
    error: function (xhr, status, error) {
        // 处理错误
    }
});

jQuery的$.ajax函数使得执行Ajax请求更加简单。您可以指定URL、请求方法、数据类型以及成功和错误处理函数。在success回调函数中，您可以处理响应数据。jQuery还提供了其他一些方便的方法来执行Ajax请求，如$.get和$.post等。