玩转Web开发：XMLHttpRequest、jQuery和自定义Ajax

2023-04-17 04:11:11

JavaScript中处理HTTP请求：原生XMLHttpRequest、jQuery和自定义Ajax

XMLHttpRequest：原生灵活性

XMLHttpRequest是Web开发中处理HTTP请求的核心原生JavaScript API。它提供了对请求过程的精细控制，允许你自定义每个步骤，从设置请求参数到处理响应。它的使用需要编写更复杂的代码，但它也提供了最大的灵活性。

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://example.com/api/v1/users", true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 请求成功，处理响应结果
  }
};
xhr.send();

jQuery：便捷封装

jQuery是JavaScript库，它为XMLHttpRequest提供了更简洁、更易用的封装。$.ajax函数允许你用更少的代码行发送HTTP请求，同时仍能保持对请求过程的控制。

$.ajax({
  url: "http://example.com/api/v1/users",
  method: "GET",
  success: function(data) {
    // 请求成功，处理响应结果
  },
  error: function(error) {
    // 请求失败，处理错误信息
  }
});

自定义Ajax：最大自由度

自定义Ajax函数允许你完全控制HTTP请求过程。它提供了最大的灵活性，但你需要编写更多代码来处理请求的每个方面。自定义Ajax函数非常适合需要精细控制请求行为的高级应用程序。

function ajax(url, method, data, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open(method, url, true);
  xhr.setRequestHeader("Content-Type", "application/json");
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      callback(xhr.responseText);
    }
  };
  xhr.send(JSON.stringify(data));
}