当前位置：首页 > news >正文

四种常见的异步请求方式

news 2025/7/8 15:26:52

四种常见的异步请求方式

一、xhr异步老祖

XMLHttpRequest（简称XHR）是一种在JavaScript中创建异步请求的技术。XHR对象可以向服务器发送请求，并获取服务器返回的数据，而不会使页面刷新。

XHR对象的创建方式通常是通过构造函数，例如：

const xhr = new XMLHttpRequest();

XHR对象提供了几个属性和方法来帮助我们处理异步请求：

xhr.open()：用于指定请求的方法、URL和是否异步的布尔值。
xhr.setRequestHeader()：用于设置HTTP请求头。
xhr.send()：用于向服务器发送请求。
xhr.abort()：用于在请求发送过程中中止请求。
xhr.onreadystatechange()：用于指定当readyState属性发生变化时调用的函数。

请求的结果可以在xhr.responseText中获取到，如果想在页面的某处展示这个结果，可以将其设置到HTML元素的innerText或innerHTML属性中。请注意，由于XHR对象已被废弃，如果可能的话，请尝试使用fetch、axios或jQuery等现代方法来处理异步请求。

二、jquery

jQuery是一种基于JavaScript的快速、小巧、功能丰富的JavaScript库。它使得JavaScript编程变得更加简单，并且可以跨浏览器工作。

jQuery提供了各种实用的DOM操作方法和事件处理函数，使得在网页上实现各种交互效果变得轻而易举。例如，可以很方便地选择元素、修改元素样式、处理表单和处理Ajax异步请求等。 jQuery使用源语言的创新NoConflict方式解决了多库共存的问题。

以下是一些常用的jQuery方法：

$(selector).hide()：隐藏匹配的元素。
$(selector).show()：显示匹配的元素。
$(selector).addClass(className)：向匹配的元素添加类。
$(selector).removeClass(className)：从匹配的元素中删除类。
$(selector).toggle()：交替地显示和隐藏匹配的元素。
$(selector).click(function)：为匹配的元素绑定click事件。

通过使用这些方法，可以在与原生JavaScript相比更简洁而且易于理解。请注意，目前有许多现代的JavaScript库和框架可以替代jQuery，但是如果您已经习惯了使用jQuery，它仍然是一种非常强大和实用的JavaScript库。

jquery的cdn库：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>4

三、fetch

fetch是一种基于Promise的API，用于发送和接收HTTP请求。它可以用于获取数据、提交数据等，并支持Blob、JSON等数据类型。fetch方法被广泛运用于Web前端开发，特别是在React、Vue等现代JavaScript框架中。请注意，fetch在处理跨域请求时有一些限制，需要在服务器端或通过CORS等方式进行支持。如果在老旧的浏览器上运行fetch时，可能需要使用像unfetch这样的polyfill库。

四、axios

axios是一种基于Promise的HTTP库，用于浏览器和Node.js中发送HTTP请求。它可以同时处理浏览器中的XHR请求和Node.js中的http请求，并且具有很好的API设计。

axios支持各种请求类型，如GET、POST、PUT等，并支持并发请求、请求取消、请求拦截、响应拦截、错误处理等功能。axios也提供了丰富的配置选项，例如请求超时时间、请求头、响应类型等。

React、Vue等现代JavaScript框架中也经常使用axios来进行HTTP请求，如果您使用这些框架，建议使用npm安装axios并通过模块化方式引入。

axios的cdn：

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><div><button onclick="testXhr()">testXhr</button><br><button onclick="testFetch()">testFetch</button><br><button onclick="testJquery()">testJquery</button><br><button onclick="testAxios()">testAxios</button><br></div><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>function testXhr() {// 创建一个XHR对象var xhr = new XMLHttpRequest();// 设置请求方式和请求地址xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1');// 设置回调函数，处理异步响应xhr.onreadystatechange = function () {if (xhr.readyState === 4 && xhr.status === 200) {console.log(xhr.responseText);}};// 发送异步请求xhr.send();}function testFetch() {fetch('https://jsonplaceholder.typicode.com/posts/1').then(response => response.json()).then(data => console.log(data)).catch(error => console.error(error));}function testJquery() {$.ajax({url: 'https://jsonplaceholder.typicode.com/posts/1',method: 'GET',dataType: 'json',success: function (data) {console.log(data);},error: function (error) {console.error(error);}});}function testAxios() {axios.get('https://jsonplaceholder.typicode.com/posts/1').then(response => console.log(response.data)).catch(error => console.error(error));}</script></body></html>

四种常见的异步请求方式

四种常见的异步请求方式

一、xhr异步老祖

二、jquery

三、fetch

四、axios

相关文章：

四种常见的异步请求方式

Linux操作系统学习（进程间通信）

单目标追踪——【相关滤波】C-COT原理与ECO基于C-COT的改进

C++中栈是如何实现，以及常用的栈函数都有哪些

我就不信你还不懂HashSet/HashMap的底层原理

Qt中调用gtest进行单元测试及生成覆盖率报告

ChatGPT vs Bard 背后的技术对比分析和未来发展趋势

搜索引擎的设计与实现

动态规划之买卖股票问题

MySQL学习笔记之子查询

HCIP-5OSPF域内域间外部路由学习笔记

【编程实践】简单是好软件的关键：Simplicity is key to good software

Python|贪心|数组|二分查找|贪心|数学|树|二叉搜索树|在排序数组中查找元素的第一个和最后一个位置|计数质数 |将有序数组转换为二叉搜索树

操作系统——15.FCFS、SJF、HRRN调度算法

如何防止用户打开浏览器开发者工具？

C语言-基础了解-12-C数组

RocksDB 架构

MVVM和MVC的区别

c++11 标准模板（STL）（std::unordered_map）（三）

OpenGL环境配置

谷歌浏览器插件

使用VSCode开发Django指南

＜6＞-MySQL表的增删查改

Spark 之入门讲解详细版（1）

Appium+python自动化（十六）- ADB命令

MFC内存泄露

从深圳崛起的“机器之眼”：赴港乐动机器人的万亿赛道赶考路

《基于Apache Flink的流处理》笔记

佰力博科技与您探讨热释电测量的几种方法

PAN/FPN