JavaScript请求数据的4种方法总结（Ajax、fetch、jQuery、axios）

JavaScript请求数据有4种主流方式，分别是Ajax、fetch、jQuery和axios。

一、Ajax、fetch、jQuery和axios的详细解释：

1、 Ajax

Ajax（Asynchronous JavaScript and XML）是一种使用JavaScript在用户的浏览器上发送请求的技术，可以在不重新加载整个网页的情况下从服务器获取数据。它允许网页在后台与服务器进行少量数据交换，从而实现网页的异步更新。这意味着可以在不干扰用户浏览体验的情况下，从服务器获取数据并更新网页的部分内容。

2、fetch

fetch API是现代浏览器提供的一种用于发起网络请求的新方法。它返回一个Promise对象，可以用来替代传统的XMLHttpRequest。fetch API提供了一个更现代、更强大的方式来处理网络请求，并支持包括CORS在内的更多功能。

3、jQuery

jQuery是一种流行的JavaScript库，旨在简化HTML文档遍历和操作、事件处理、动画和Ajax操作。它提供了一组简单易用的API，使得JavaScript编程更为简单、快速和有趣。jQuery大大简化了跨浏览器的DOM操作、事件处理和动画效果，同时它也提供了一些工具函数，使得JavaScript编程更加高效。

4、axios

axios是一个基于Promise的HTTP客户端，用于浏览器和node.js。它提供了一种简单且灵活的方式来进行HTTP请求，包括XMLHttpRequests和HTTP请求。axios返回的是一个包含响应数据的Promise对象，这使得异步处理更加简单和直观。axios还支持拦截请求和响应、转换请求和响应数据、取消请求等功能，使得HTTP请求的管理更加方便。

二、Ajax、fetch、jQuery和axios的主要区别：

1、Ajax 数据请求：

原生js提供的(内置)，核心使用XMLHttpRequest对象，多个请求之间如果有先后关系的话，就会出现回调地狱。

2、fetch 数据请求：

原生js提供的(内置)，和ajax同级，使用promise形式，关注分离思想，但兼容性不太好，所以用的不是很多。

3、jquery数据请求：

第三方库提供的，封装原生的ajax请求，使用回调形式，可能出现回调地狱。

4、axios数据请求：

第三方库提供的，封装原生的ajax请求，使用promise的形式，并且可以在请求和响应阶段进行拦截。

三、Ajax、fetch、jQuery和axios的代码详解：

在测试Ajax、fetch、jQuery和axios的示例代码之前，这里使用nodejs写一个简单的web服务器（server.js）做响应。

启动命令：node server.jsajax的get请求示例：http://127.0.0.1:8000/ajax_get.htmlajax的post请求示例：http://127.0.0.1:8000/ajax_post.htmlfetch的get请求示例：http://127.0.0.1:8000/fetch_get.htmlfetch的post请求示例：http://127.0.0.1:8000/fetch_post.htmljQuery的get请求示例：http://127.0.0.1:8000/jQuery_get.htmljQuery的post请求示例：http://127.0.0.1:8000/jQuery_post.htmlaxios的get请求示例：http://127.0.0.1:8000/axios_get.htmlaxios的post请求示例：http://127.0.0.1:8000/axios_post.htmlaxios请求（高级用法）示例：http://127.0.0.1:8000/axios_other.htmlaxios请求（实例用法）示例：http://127.0.0.1:8000/axios_instance.html

代码如下：

const http = require('http');
const path = require('path');
const url = require('url')
const fs = require('fs');const server = http.createServer()
server.on('request',(req,res)=>{const urlObj = url.parse(req.url, true);if(urlObj.pathname === '/test'){if(req.method === 'GET'){const str = JSON.stringify(urlObj.query);res.end(str);}if(req.method === 'POST'){let params = '';req.on('data', chunk=>{params += chunk;});req.on('end', ()=>{res.end(params);});}}else{fs.readFile(path.join(__dirname, urlObj.pathname), 'utf8', function(err, dataStr){if(err){return console.log(err.message)}res.setHeader('Content-type', 'text/html; charset=utf-8');res.end(dataStr);})}
})
server.listen(8000, ()=>{console.log('server running at http://127.0.0.1:8000')
})

1、Ajax请求

Ajax使用五个步骤：

步骤1：创建一个XMLHttpRequest对象

var xmlhttp=new XMLHttpRequest();

步骤2：设置请求方式和请求地址（使用open(method,url,async)方法）

method：请求方式，get或者post。（默认为get）

url：请求路径,文件在服务器上的位置

async：是否为异步请求。（默认为true，异步请求）

步骤3：发送send() 请求

若为post方式时需要使用setRequestHeader()来添加http头

步骤4：监听状态的变化

每当readyState状态改变时，就会触发 onreadystatechange事件，执行回调函数。readyState存有XMLHttpRequest的5种状态。从 0 到 4 发生变化。

0: 请求未初始化

1: 服务器连接已建立

2: 请求已接收

3: 请求处理中

4: 请求已完成，且响应已就绪

步骤5：处理返回的结果

根据请求服务器返回状态码(status)，大于200，小于300，或等于304，则表示请求成功, 否则服务器请求失败。获取服务器中响应，使用XMLHttpRequest对象的responseText或responseXML属性。

responseText：获得字符串形式的响应数据。

responseXML：获得 XML 形式的响应数据。

ajax的get请求示例代码：

<button>ajax的get请求</button>
<script>
const btn = document.querySelector("button");
btn.onclick = function () {var xmlhttp = new XMLHttpRequest();xmlhttp.open("GET", "http://127.0.0.1:8000/test?param1=ajax&param2=get&param3=公众号：愤怒的it男", true);xmlhttp.send();xmlhttp.onreadystatechange = function () {if (xmlhttp.readyState === 4) {if (xmlhttp.status >= 200 && xmlhttp.status < 300 || xmlhttp.status === 304) {console.log(JSON.parse(xmlhttp.responseText));} else {console.log("没有接收到服务器的数据");}}}
}
</script>

ajax的post请求示例代码：

<button>ajax的post请求</button>
<script>
const btn = document.querySelector("button");
btn.onclick = function () {var xmlhttp=new XMLHttpRequest();xmlhttp.open("POST","http://127.0.0.1:8000/test",true);xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");xmlhttp.send(JSON.stringify({'param1':'ajax','param2':'post','param3':'公众号：愤怒的it男'}));xmlhttp.onreadystatechange=function () {if (xmlhttp.readyState === 4) {if (xmlhttp.status>=200 && xmlhttp.status<300 ||xmlhttp.status===304 ){console.log(JSON.parse(xmlhttp.responseText));}else{console.log("没有接收到服务器的数据");}}}
}
</script>

2、fetch请求

（1）POST请求的2种内容类型：

//如果是application/x-www-form-urlencoded，body请求体内容为FormData对象：
var formData = new FormData()
formData.append('param1','fetch')
formData.append('param1','post')
formData.append('param1','公众号：愤怒的it男')
//如果是application/json，body请求体内容为JSON字符串：
JSON.stringify({'param1':'fetch','param2':'post','param3':'公众号：愤怒的it男'})

（2）response返回的3种数据格式：

//如果是json格式
fetch(url [,options]).then(rsp => {return rsp.json()}).then(data => {console.log(data)})
//如果是文本格式
fetch(url [,options]).then(rsp => {return rsp.text()}).then(data => {console.log(data)})
//如果是二进制流
fetch(url [,options]).then(rsp => {return rsp.blob()}).then(data => {console.log(data)})

fetch的get请求示例代码：

<button>fetch的get请求</button>
<script>const btn = document.querySelector("button");btn.onclick = function() {fetch('http://127.0.0.1:8000/test?param1=fetch&param2=get&param3=公众号：愤怒的it男', {'method': 'GET','body': null,'headers': {"accept": "*/*","sec-fetch-dest": "empty","sec-fetch-mode": "cors","sec-fetch-site": "none",'content-type': 'application/json, text/plain, */*'}}).then(res => {return res.json()}).then(data => {console.log(data)});}
</script>

fetch的post请求示例代码：

<button>fetch的post请求</button>
<script>const btn = document.querySelector("button");           btn.onclick = function() {fetch('http://127.0.0.1:8000/test', {'method': 'POST','body': JSON.stringify({'param1':'fetch','param2':'post','param3':'公众号：愤怒的it男'}),'headers': {"accept": "*/*","sec-fetch-dest": "empty","sec-fetch-mode": "cors","sec-fetch-site": "none",'content-type': 'application/json; charset=UTF-8'}}).then(res => {return res.json()}).then(data => {console.log(data)});}
</script>

3、jQuery请求

jQuery的get请求示例代码：

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<button>jQuery的get请求</button>
<script>const btn = document.querySelector("button");btn.onclick = function() {$.get("http://127.0.0.1:8000/test?param1=jQuery&param2=get&param3=公众号：愤怒的it男",function(data,status){console.log(JSON.parse(data));});}
</script>

jQuery的post请求示例代码：

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<button>jQuery的post请求</button>
<script>const btn = document.querySelector("button");           btn.onclick = function() {data = JSON.stringify({'param1':'fetch','param2':'post','param3':'公众号：愤怒的it男'});$.post("http://127.0.0.1:8000/test", data, function(data,status){console.log(JSON.parse(data));});}
</script>

$.get等价于jQuery.get，$.post等价于jQuery.post。

4、axios请求

axios的get请求基础使用示例代码：

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<button>axios的get请求</button>
<script>const btn = document.querySelector("button");btn.onclick = function() {axios.get("http://127.0.0.1:8000/test?param1=axios&param2=get&param3=公众号：愤怒的it男").then(response => {console.log(response.data)});}
</script>

axios的post请求基础使用示例代码：

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<button>axios的post请求</button>
<script>const btn = document.querySelector("button");           btn.onclick = function() {data={param1:'axios',param2:'post',param3:'公众号：愤怒的it男'}axios.post('http://127.0.0.1:8000/test',data).then(response => {console.log(response.data)});}
</script>

axios支持多请求并发，可以添加全局或局部配置，也可以添加请求拦截器和响应拦截器。拦截器会在发生响应请求之前和收到响应数据之后第一时间被调用，其中请求拦截器是先发的请求先拦截，而响应拦截器则是先发的请求后拦截。如下代码涉及axios的多个高级用法：

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<button>axios请求（高级用法）</button>
<script>const btn = document.querySelector("button");btn.onclick = function() {// 全局配置baseURL和timeoutaxios.defaults.baseURL = 'http://127.0.0.1:8000';axios.defaults.timeout = 3000;// 添加请求拦截器axios.interceptors.request.use(config =>{   console.log(config);return config;},err => {console.log(err);})// 添加响应拦截器axios.interceptors.response.use(res=>{console.log(res);return res;},err=>{console.log(err);})// 多个请求并发axios.all([axios({method:"get",        // 请求方式不写则默认为get请求//单个axios配置baseURL和timeout//baseURL:'http://127.0.0.1:8000',//timeout:3000,url:"/test",params:{        // get请求中，url后面的参数可以分开单独放在params中param1:'axios1',param2:'get',param3:'公众号：愤怒的it男'}}),axios({method:"post",//单个axios配置baseURL和timeout//baseURL:'http://127.0.0.1:8000',//timeout:3000,url:"/test",data:{param1:'axios2',param2:'post',param3:'公众号：愤怒的it男'}}),]).then(response => {console.log(response[0].data);console.log(response[1].data);});}
</script>

输出结果如下：

有时候请求不想使用全局的配置或者拦截器，则我们可以创建axios实例，在该axios实例中配置或者添加拦截器，则之后只在该实例内有效。具体示例代码如下：

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<button>axios请求（实例用法）</button>
<script>const btn = document.querySelector("button");btn.onclick = function() {// 创建实例并为实例配置const instance = axios.create({baseURL:'http://127.0.0.1:8000',timeout:3000,});// 为实例添加请求拦截器instance.interceptors.request.use(config =>{   console.log(config);return config;},err => {console.log(err);});// 为实例添加响应拦截器instance.interceptors.response.use(res=>{console.log(res);return res;},err=>{console.log(err);});// 发起get请求instance({method:"get",url:"/test",params:{param1:'axios1',param2:'get',param3:'公众号：愤怒的it男'}}).then(response => {console.log(response.data);});// 发起post请求instance({method:"post",url:"/test",data:{param1:'axios2',param2:'post',param3:'公众号：愤怒的it男'}}).then(response => {console.log(response.data);});}
</script>

输出结果如下：

 更多爬虫知识以及实例源码，可关注微信公众号【愤怒的it男】

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/40837.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

使用低版本vcpkg时，bootstrap-vcpkg.bat无法生成vcpkg.exe的可能原因

使用低版本vcpkg时，bootstrap-vcpkg.bat无法生成vcpkg.exe的可能原因

缘由 需要使用vcpkg中低版本的第三方库&#xff0c;下载vcpkg后&#xff0c;回退至指定版本&#xff0c;运行bootstrap-vcpkg.bat生成vcpkg.exe时&#xff0c;命令行窗口总是一闪而过&#xff0c;但是vcpkg.exe却没有生成。 添加pause&#xff0c;查看错误 编辑bootstrap-vc…
阅读更多...
docker的网络模式

docker的网络模式

docker0网络 docker容器的 虚拟网关loopback &#xff1a;回环网卡、TCP/IP网卡是否生效virtual bridge&#xff1a;linux 自身继承了一个虚拟化功能&#xff08;kvm架构&#xff09;&#xff0c;是原生架构的一个虚拟化平台&#xff0c;安装了一个虚拟化平台之后就会系统就会自…
阅读更多...
区间预测 | MATLAB实现QRBiLSTM双向长短期记忆神经网络分位数回归时间序列区间预测

区间预测 | MATLAB实现QRBiLSTM双向长短期记忆神经网络分位数回归时间序列区间预测

区间预测 | MATLAB实现QRBiLSTM双向长短期记忆神经网络分位数回归时间序列区间预测 目录 区间预测 | MATLAB实现QRBiLSTM双向长短期记忆神经网络分位数回归时间序列区间预测效果一览基本介绍模型描述程序设计参考资料 效果一览 基本介绍 区间预测 | MATLAB实现QRBiLSTM双向长短…
阅读更多...
【网络爬虫】模拟登录与代理

【网络爬虫】模拟登录与代理

代理
阅读更多...
【回溯】总结

【回溯】总结

1、 组合和子集问题 组合问题需要满足一定要求才算作一个答案&#xff0c;比如数量要求&#xff08;k个数&#xff09;&#xff0c;累加和要求&#xff08;target&#xff09;。 子集问题是只要构成一个新的子集就算作一个答案。 进阶&#xff1a;去重逻辑。 一般都是要对同…
阅读更多...
Linux 5种网络IO模型

Linux 5种网络IO模型

Linux IO模型 网络IO的本质是socket的读取&#xff0c;socket在linux系统被抽象为流&#xff0c;IO可以理解为对流的操作。刚才说了&#xff0c;对于一次IO访问&#xff08;以read举例&#xff09;&#xff0c;数据会先被拷贝到操作系统内核的缓冲区中&#xff0c;然后才会从操…
阅读更多...
LL库实现SPI MDA发送方式驱动WS2812

LL库实现SPI MDA发送方式驱动WS2812

1&#xff0c;首先打卡STM32CubeMX&#xff0c;配置一下工程&#xff0c;这里使用的芯片是STM32F030F4P6。 时钟 SPI外设 SPI DMA 下载接口&#xff0c;这个不配置待会下程序后第二次就不好下载调试了。 工程配置&#xff0c;没啥说的 选择生成所有文件 将驱动都改为LL库 然后直…
阅读更多...
jmeter errstr :“unsupported field type for multipart.FileHeader“

jmeter errstr :“unsupported field type for multipart.FileHeader“

在使用jmeter测试接口的时候&#xff0c;提示errstr :"unsupported field type for multipart.FileHeader"如图所示 这是因为我们 在HTTP信息头管理加content-type参数有问题 直接在HTTP请求中&#xff0c;勾选&#xff1a; use multipart/form-data for POST【中文…
阅读更多...
22、touchGFX学习Model-View-Presenter设计模式

22、touchGFX学习Model-View-Presenter设计模式

touchGFX采用MVP架构&#xff0c;如下所示&#xff1a; 本文界面如下所示&#xff1a; 本文将实现两个操作&#xff1a; 1、触摸屏点击开关按键实现打印开关显示信息&#xff0c;模拟开关灯效果 2、板载案按键控制触摸屏LED灯的显示和隐藏 一、触摸屏点击开关按键实现打印开…
阅读更多...
docker搭建LNMP

docker搭建LNMP

docker安装 略 下载镜像 nginx:最新版php-fpm:根据自己需求而定mysql:根据自己需求定 以下是我搭建LNMP使用的镜像版本 rootVM-12-16-ubuntu:/docker/lnmp/php/etc# docker images REPOSITORY TAG IMAGE ID CREATED SIZE mysql 8.0…
阅读更多...
Linux的基本权限（文件，目录）

Linux的基本权限（文件，目录）

文章目录 前言一、Linux权限的概念二、Linux权限管理 1.文件访问者分类2.文件类型和访问类型3.文件访问权限的相关设置方法三、目录的权限四、权限的总结 前言 Linux下一切皆文件&#xff0c;指令的本质就是可执行文件&#xff0c;直接安装到了系统的某种路径下 一、Linux权限的…
阅读更多...
SpringCloud实用篇6——elasticsearch搜索功能

SpringCloud实用篇6——elasticsearch搜索功能

目录 1 DSL查询文档1.1 DSL查询分类1.2 全文检索查询1.2.1 使用场景1.2.2 基本语法1.2.3 示例1.2.4 总结 1.3 精准查询1.3.1 term查询1.3.2 range查询1.3.3 总结 1.4.地理坐标查询1.4.1 矩形范围查询1.4.2 附近查询 1.5 复合查询1.5.1 相关性算分1.5.2 算分函数查询1&#xff0…
阅读更多...
【大数据Hive】hive 事务表使用详解

【大数据Hive】hive 事务表使用详解

目录 一、前言 二、Hive事务背景知识 hive事务实现原理 hive事务原理之 —— delta文件夹命名格式 _orc_acid_version 说明 bucket_00000 合并器(Compactor) 二、Hive事务使用限制 参数设置 客户端参数设置 客户端参数设置 三、Hive事务使用操作演示 操作步骤 客…
阅读更多...
【C语言】回调函数，qsort排序函数的使用和自己实现，超详解

【C语言】回调函数，qsort排序函数的使用和自己实现，超详解

文章目录 前言一、回调函数是什么二、回调函数的使用1.使用标准库中的qsort函数2.利用qsort函数对结构体数组进行排序 三、实现qsort函数总结 先记录一下访问量突破2000啦&#xff0c;谢谢大家支持&#xff01;&#xff01;&#xff01; 这里是上期指针进阶链接&#xff0c;方便…
阅读更多...
【100天精通python】Day37：GUI界面编程_PyQT从入门到实战（上）

【100天精通python】Day37：GUI界面编程_PyQT从入门到实战（上）

目录 专栏导读 1 PyQt6 简介&#xff1a; 1.1 安装 PyQt6 和相关工具&#xff1a; 1.2 PyQt6 基础知识&#xff1a; 1.2.1 Qt 的基本概念和组件&#xff1a; 1.2.2 创建和使用 Qt 窗口、标签、按钮等基本组件 1.2.3 布局管理器&#xff1a;垂直布局、水平布局、网格布局…
阅读更多...
mysql与redis区别

mysql与redis区别

mysql和redis的数据库类型 mysql是关系型数据库&#xff0c;主要用于存放持久化数据&#xff0c;将数据存储在硬盘中&#xff0c;读取速度较慢。 redis是NOSQL&#xff0c;即非关系型数据库&#xff0c;也是缓存数据库&#xff0c;即将数据存储在缓存中&#xff0c;缓存的读取速…
阅读更多...
网络

网络

mcq Java 传输层&#xff1a;拆分和组装&#xff0c;完成端到端的消息传递&#xff0c;流量控制&#xff0c;差错控制等 网络层&#xff1a; 寻址、路由&#xff0c;复用&#xff0c;拥塞控制&#xff0c;完成源到宿的传递。 显然A选项是错误的&#xff0c;有流量控制的是传输层…
阅读更多...
netty学习分享（一）

netty学习分享（一）

TCP与UDP TCP 是面向连接的、可靠的流协议&#xff0c;通过三次握手建立连接&#xff0c;通讯完成时要拆除连接。 UDP是面向无连接的通讯协议&#xff0c;UDP通讯时不需要接收方确认&#xff0c;属于不可靠的传输&#xff0c;可能会出现丢包现象 端口号&#xff1a; 端口号用…
阅读更多...
【uniapp】uniapp设置安全区域：

【uniapp】uniapp设置安全区域：

文章目录 一、效果图:二、实现代码: 一、效果图: 二、实现代码: {"path": "pages/index/index","style": {"navigationStyle": "custom","navigationBarTextStyle": "white","navigationBarTitle…
阅读更多...
Matlab工具NIFTI包的基本功能函数

Matlab工具NIFTI包的基本功能函数

Matlab工具NIFTI包的基本功能函数 Nifti 格式最初是为神经影像学发明的。神经影像信息学技术计划&#xff08;NIFTI&#xff09;将 NIfTI 格式预设为 ANALYZE7.5 格式的替代品。它最初的应用领域是神经影像&#xff0c;但是也被用在其他领域。这种格式的主要特点就是它包含两个…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023