xhr, jquery.ajax, axios前端发送请求

XMLHttpRequest (XHR), jQuery 的 AJAX 方法, 和 axios 都是用于在浏览器中发起 HTTP 请求的技术。它们各有特点，并且在不同的时代和场景下被使用。

1.XMLHttpRequest (XHR)

XMLHttpRequest 是最早的浏览器提供的 JavaScript API，用于在浏览器中发起 HTTP 请求。它是一个底层 API，需要手动设置请求参数、发送请求、以及处理响应。虽然它可以用于发送 AJAX 请求，但由于其 API 较为底层和繁琐，很多开发者选择使用更高级的库或框架来简化 HTTP 请求的处理。

1.1 xhr

// 创建一个新的 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
 
// 设置请求的 URL 和方法
xhr.open('GET', 'https://api.example.com/data', true); // 第三个参数为 true 表示异步请求
 
// 设置请求完成后的回调函数
xhr.onload = function () {
    if (xhr.status === 200) { // 请求成功
        // 获取响应数据
        var response = xhr.responseText;
        // 处理响应数据
        console.log(response);
    } else {
        // 处理请求错误
        console.error('请求失败:', xhr.status);
    }
};
 
// 设置请求错误时的回调函数
xhr.onerror = function () {
    console.error('请求发生错误');
};
 
// 发送请求
xhr.send();复制

 1.2 fetch()

// 使用 fetch API
fetch('https://api.example.com/data')
    .then(response => response)
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));复制

2.jQuery 的 AJAX 方法

随着 jQuery 的流行，jQuery 提供了更简洁、更易用的 AJAX 方法，如 $.get(), $.post(), $.ajax() 等。这些方法封装了 XMLHttpRequest，提供了更高级的接口，使得开发者能够更方便地发起 HTTP 请求，并处理响应。然而，随着现代前端框架和库的兴起，jQuery 在很多项目中逐渐被替代。

 $.ajax 的 API
$.ajax 方法接受一个配置对象，该对象可以包含多种属性来定义请求的行为。以下是一些常用的属性：

url: 请求的 URL。
type: 请求类型（GET、POST 等）。
dataType: 预期的服务器响应的数据类型（如 'json', 'xml', 'html' 等）。
data: 要发送到服务器的数据。
success: 请求成功时调用的回调函数。
error: 请求失败时调用的回调函数。
beforeSend: 发送请求之前调用的函数，可以修改请求的配置。
complete: 请求完成后调用的回调函数，无论成功或失败。

$.ajax({
  url: 'https://api.example.com/data',
  type: 'GET',
  dataType: 'json',
  success: function(data) {
    console.log('Success:', data);
  },
  error: function(jqXHR, textStatus, errorThrown) {
    console.error('Error:', textStatus, errorThrown);
  }
});复制

2.1简写的请求方式

jQuery 还提供了几个简写的 AJAX 方法，这些方法实际上是 $.ajax 的特殊形式，用于处理常见的 HTTP 请求类型。这些简写方法包括：

• $.get(url, data, success, dataType): 发送 GET 请求。
• $.post(url, data, success, dataType): 发送 POST 请求。
• $.getJSON(url, data, success): 发送 GET 请求并自动将响应解析为 JSON。
• $.getScript(url, success): 加载并执行 JavaScript 文件。

2.2 使用 $.get

$.get('https://api.example.com/data', function(data) {
  console.log('Success:', data);
}).fail(function(jqXHR, textStatus, errorThrown) {
  console.error('Error:', textStatus, errorThrown);
});复制

 2.3使用 $.post

$.post('https://api.example.com/save', { param1: 'value1', param2: 'value2' }, function(data) {
  console.log('Success:', data);
}).fail(function(jqXHR, textStatus, errorThrown) {
  console.error('Error:', textStatus, errorThrown);
});复制

2.4使用 $.getJSON

$.getJSON('https://api.example.com/data.json', function(data) {
  console.log('Success:', data);
}).fail(function(jqXHR, textStatus, errorThrown) {
  console.error('Error:', textStatus, errorThrown);
});复制

2.5 jQuery返回的是jqXHR对象

3.Axios

axios 是一个基于 Promise 的 HTTP 客户端，它提供了更现代、更强大、更易于使用的 API。与 XMLHttpRequest 和 jQuery 的 AJAX 方法相比，axios 有以下优势：

• 基于 Promise：axios 返回一个 Promise 对象，这使得它可以与 async/await 语法很好地结合使用，使异步代码更加简洁和易读。
• 支持取消请求：axios 提供了取消请求的功能，这在某些场景下非常有用。
• 自动转换 JSON 数据：axios 在发送请求时会自动将 JavaScript 对象转换为 JSON 字符串，并在收到响应时自动将 JSON 字符串转换为 JavaScript 对象。
• 客户端支持防止 CSRF/XSRF：axios 提供了客户端防止跨站请求伪造的功能。
• 提供了丰富的 API：axios 提供了丰富的 API，如拦截器、请求和响应转换、取消请求等。

Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 node.js。它提供了丰富的 API，允许你发送各种类型的 HTTP 请求，并且具有很多有用的特性，比如拦截请求和响应、转换请求和响应数据、取消请求等。

3.1Axios API

Axios 的 API 主要通过 axios 函数和 axios.create 方法来使用。以下是一些常用的方法：

• axios(config): 发送一个请求。config 是一个对象，包含请求的配置信息。
• axios.create([config]): 创建一个新的 Axios 实例。
• axios.get(url[, config]): 发送一个 GET 请求。
• axios.delete(url[, config]): 发送一个 DELETE 请求。
• axios.head(url[, config]): 发送一个 HEAD 请求。
• axios.options(url[, config]): 发送一个 OPTIONS 请求。
• axios.post(url[, data[, config]]): 发送一个 POST 请求。
• axios.put(url[, data[, config]]): 发送一个 PUT 请求。
• axios.patch(url[, data[, config]]): 发送一个 PATCH 请求。

每个请求方法都返回一个 Promise，你可以使用 .then() 和 .catch() 来处理成功和失败的响应。

3.2执行 GET 请求

// 发送 GET 请求
axios.get('https://api.example.com/data')
  .then(function (response) {
    // 处理响应数据
    console.log(response.data);
  })
  .catch(function (error) {
    // 处理错误
    console.log(error);
  });
 
 
 
 
// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
 
 
 
// 上面的请求也可以这样做
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });复制

3.3执行 POST 请求

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
 
 
 
 
// 发送 POST 请求
axios.post('https://api.example.com/data', { param1: 'value1' })
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });复制

 3.3执行多个并发请求

function getUserAccount() {
  return axios.get('/user/12345');
}
 
function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}
 
axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 两个请求现在都执行完成
  }));复制

3.4axios API

可以通过向 axios 传递相关配置来创建请求

axios(config)

// 发送 POST 请求
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});复制

3.5async与await 

(async function (){
            const {data: res} = await axios.post('/api/test/')
            // 返回真实的数据
            console.log(res)
        })();复制

总结

• XMLHttpRequest：是最底层的 API，适用于需要直接控制 HTTP 请求的场景。
• jQuery 的 AJAX 方法：提供了更高级、更简洁的接口，适用于使用 jQuery 的项目。
• Axios：是一个现代、功能丰富的 HTTP 客户端，适用于大多数现代前端项目，特别是与 async/await 结合使用时。