前端学习--Ajax部分

在Ajax中，我们可以使用JavaScript的XMLHttpRequest对象来发送异步的HTTP请求。以下是一些常见的Ajax请求的例子：

1. 使用原生的XMLHttpRequest对象发送GET请求：

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data", true);
xhr.onreadystatechange = function () {
  if (xhr.readyState == 4 && xhr.status == 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

2. 使用原生的XMLHttpRequest对象发送POST请求：

var xhr = new XMLHttpRequest();
xhr.open("POST", "https://api.example.com/data", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function () {
  if (xhr.readyState == 4 && xhr.status == 200) {
    console.log(xhr.responseText);
  }
};
xhr.send("key1=value1&key2=value2");

3. 使用JQuery的$.ajax方法发送GET请求：

$.ajax({
  url: "https://api.example.com/data",
  type: "GET",
  dataType: "json",
  success: function (response) {
    console.log(response);
  },
  error: function (xhr, status, error) {
    console.log("Error: " + error);
  },
});

4. 使用JQuery的$.ajax方法发送POST请求：

$.ajax({
  url: "https://api.example.com/data",
  type: "POST",
  data: { key1: "value1", key2: "value2" },
  dataType: "json",
  success: function (response) {
    console.log(response);
  },
  error: function (xhr, status, error) {
    console.log("Error: " + error);
  },
});

5. 使用fetch API发送GET请求：

fetch("https://api.example.com/data")
  .then(function (response) {
    return response.json();
  })
  .then(function (myJson) {
    console.log(myJson);
  });

6. 使用fetch API发送POST请求：

fetch("https://api.example.com/data", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({ key1: "value1", key2: "value2" }),
})
  .then(function (response) {
    return response.json();
  })
  .then(function (myJson) {
    console.log(myJson);
  });

以上代码都是在发送Ajax请求的时候处理常见的操作，比如设置请求头，设置请求体，设置请求的类型，设置请求的URL，以及处理请求成功和请求失败的情况。在实际的开发中，我们可以根据项目的需要和环境的限制来选择合适的方法来发送Ajax请求。