首页 前端知识 xhr, jquery.ajax, axios前端发送请求

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

2024-04-07 08:04:18 前端知识 前端哥 344 27 我要收藏

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 有以下优势:

  • 基于 Promiseaxios 返回一个 Promise 对象,这使得它可以与 async/await 语法很好地结合使用,使异步代码更加简洁和易读。
  • 支持取消请求axios 提供了取消请求的功能,这在某些场景下非常有用。
  • 自动转换 JSON 数据axios 在发送请求时会自动将 JavaScript 对象转换为 JSON 字符串,并在收到响应时自动将 JSON 字符串转换为 JavaScript 对象。
  • 客户端支持防止 CSRF/XSRFaxios 提供了客户端防止跨站请求伪造的功能。
  • 提供了丰富的 APIaxios 提供了丰富的 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 结合使用时。
转载请注明出处或者链接地址:https://www.qianduange.cn//article/4561.html
标签
评论
发布的文章

PostgreSQL 操作json/jsonb

2024-04-20 17:04:16

Excel转json的两种办法

2024-04-20 17:04:09

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!