Ajax学习笔记：jQuery 中的 AJAX、axios发送AJAX请求、AJAX-jQuery通用方法发送AJAX请求、fetch发送AJAX请求、同源策略、JSONP、CORS

在前端开发中，AJAX技术被广泛使用以便于在不刷新页面的前提下与服务器进行数据交换。以下是几种使用AJAX的方法：

1. 原生JavaScript中的AJAX

var xhr = new XMLHttpRequest();
xhr.open("POST", "url", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(JSON.parse(xhr.responseText));
  }
};
xhr.send(JSON.stringify({ key: "value" }));

2. 使用jQuery中的$.ajax

$.ajax({
  url: "url",
  type: "POST",
  contentType: "application/json",
  data: JSON.stringify({ key: "value" }),
  dataType: "json",
  success: function (response) {
    console.log(response);
  },
});

3. 使用axios库发送AJAX请求

axios({
  method: 'post',
  url: 'url',
  data: {
    key: 'value'
  },
})
.then(function (response) {
  console.log(response);
});

以上代码展示了如何在前端使用AJAX技术与服务器进行数据交换。原生JavaScript和jQuery中的AJAX请求相对复杂，而axios则提供了一种更现代、更简洁的方式来发送HTTP请求。在实际开发中，可以根据项目需求和团队习惯选择合适的方法。