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

news2024/12/26 3:48:05

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.js

ajax的get请求示例：http://127.0.0.1:8000/ajax_get.html

ajax的post请求示例：http://127.0.0.1:8000/ajax_post.html

fetch的get请求示例：http://127.0.0.1:8000/fetch_get.html

fetch的post请求示例：http://127.0.0.1:8000/fetch_post.html

jQuery的get请求示例：http://127.0.0.1:8000/jQuery_get.html

jQuery的post请求示例：http://127.0.0.1:8000/jQuery_post.html

axios的get请求示例：http://127.0.0.1:8000/axios_get.html

axios的post请求示例：http://127.0.0.1:8000/axios_post.html

axios请求（高级用法）示例：http://127.0.0.1:8000/axios_other.html

axios请求（实例用法）示例：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和timeout
        axios.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.coloradmin.cn/o/891361.html

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

相关文章

分类预测 | MATLAB实现GAPSO-LSSVM多输入分类预测

分类预测 | MATLAB实现GAPSO-LSSVM多输入分类预测

分类预测 | MATLAB实现GAPSO-LSSVM多输入分类预测 目录 分类预测 | MATLAB实现GAPSO-LSSVM多输入分类预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 1.分类预测 | MATLAB实现GAPSO-LSSVM多输入分类预测 2.代码说明&#xff1a;要求于Matlab 2021版及以上版本。 程序…
阅读更多...
kernel的config加上 CONFIG_SND_ALOOP=y ，aplay不能播放声音

kernel的config加上 CONFIG_SND_ALOOP=y ，aplay不能播放声音

概念&#xff1a;CONFIG_SND_ALOOP CONFIG_SND_ALOOP 是 Linux 内核配置选项之一&#xff0c;用于启用 ALSA Loopback 驱动程序。 ALSA&#xff08;Advanced Linux Sound Architecture&#xff09;是 Linux 上的音频架构&#xff0c;提供了一个统一的音频接口&#xff0c;使应…
阅读更多...
雷军写的代码上热搜了

雷军写的代码上热搜了

“雷军写的代码”一词突然上了微博热搜&#xff1a; 一瞬间&#xff0c;我想起了这张图&#xff1a; 到底发生了什么&#xff0c;好奇的我点进去一看&#xff0c;原来是因为雷军预告年度演讲的微博里配了一张海报&#xff1a; 这张海报信息量非常大&#xff0c;一眼就能看到有很…
阅读更多...
如何使用Vue和C++实现OJ《从零开始打造 Online Judge》

如何使用Vue和C++实现OJ《从零开始打造 Online Judge》

课程简介 课程链接&#xff1a;https://www.lanqiao.cn/courses/20638 邀请码&#xff1a;x8pGd60V 本课程采用前后端分离架构&#xff0c;基于 Vue.js 和 C 技术&#xff0c;从零开始打造 Online Judge。 课程介绍 OJ 是 Online Judge 系统的简称&#xff0c;用来在线检测…
阅读更多...
算法通关村第3关【白银】| 双指针思想

算法通关村第3关【白银】| 双指针思想

1. 双指针思想 双指针不仅指两个指针&#xff0c;也可以是两个变量&#xff0c;指向两个值。 有三种类型&#xff1a; 快慢型&#xff1a;一前一后对撞型&#xff1a;从两端向中间靠拢背向型&#xff1a;从中间向两端分开 2. 删除元素专题 2.1原地移除元素 (1)快慢指针 思…
阅读更多...
我的创作纪念日（128天）

我的创作纪念日（128天）

机缘 CSDN账号创建已有3年了&#xff0c;本篇是第一篇纪念文。。。有点偷懒的感觉了。。。 从第一篇文章的发布&#xff0c;到现在已经过了128天了&#xff0c;回想起当时发布文章的原因&#xff0c;仅仅只是因为找不到合适的云笔记&#xff0c;鬼使神差的想到了CSDN&#xff…
阅读更多...
第十一课：Qt 快捷键大全

第十一课：Qt 快捷键大全

功能描述&#xff1a;Qt 中的快捷键查看方式和自定义快捷键 一、快捷键查看/自定义 Qt Creator 中提供了各种快捷键&#xff0c;如需查看或自定义快捷键&#xff0c;选择菜单栏“工具” -> “选项” -> “环境” -> “键盘”。 快捷键按类别列出&#xff0c;可以在过…
阅读更多...
Windows 11 + Ubuntu20.04 双系统 坑里爬起来

Windows 11 + Ubuntu20.04 双系统 坑里爬起来

ThinkPad x390 安装双系统&#xff0c;原有的磁盘太小&#xff0c;扩充了磁盘重新装系统&#xff0c;出现的问题&#xff0c;加以记录。 1. windows和ubuntu谁先安装&#xff0c;两个都可以&#xff0c;一般建议先安装windows&#xff0c;后安装ubuntu 2. 安装windows后&…
阅读更多...
小O网兜0231新版 -- 用户入门指南

小O网兜0231新版 -- 用户入门指南

本文介绍小O网兜入门功能&#xff0c;通过本文用户能够掌握数据采集的基本操作&#xff0c;使用软件提供的模板任务采集指定页面的数据。 基本概念 任务文件&#xff1a;新建任务文件&#xff0c;扩展名为 xop&#xff0c;任务的配置、采集数据等信息保存在该文件中&#xff…
阅读更多...
Android进阶之路 - 去除EditText内边距

Android进阶之路 - 去除EditText内边距

正如题名&#xff0c;在Android中的EditText是自带内边距的&#xff0c;常规而言设置背景为null即可&#xff0c;但是因为使用了并不熟悉的声明式框架&#xff0c;本是几分钟解决的事儿&#xff0c;却花费了小半天~ 其实这只是一个很简单的小需求&#xff0c;不想却遇到了一些小…
阅读更多...
WIN+ALT+R无法开始录制

WIN+ALT+R无法开始录制

winr打开注册表regedit 依次展开 计算机\HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\GameDVR 修改AppCaptureEnabled数值为1 wing打开 Xbox Game Bar点击捕获 WINALTR开始录制
阅读更多...
Zabbix技术分享——Proxy加密代理：共享密钥(PSK)加密与证书加密

Zabbix技术分享——Proxy加密代理：共享密钥(PSK)加密与证书加密

一、加密介绍 Zabbix版本从3.0之后&#xff0c;开始支持Zabbix server, Zabbix proxy, Zabbix agent, zabbix_sender and zabbix_get之间的通信加密&#xff0c;加密方式有预共享密钥(PSK)和证书加密&#xff0c;加密配置是可选项&#xff0c;一些proxy和agent可以使用证书认证…
阅读更多...
PHP-MD5注入

PHP-MD5注入

0x00 前言 有些零散的知识未曾关注过&#xff0c;偶然捡起反而更加欢喜。 0x01 md5 注入绕过 md5函数有两个参数&#xff0c;第一个参数是要进行md5的值&#xff0c;第二个值默认为false&#xff0c;如果为true则返回16位原始二进制格式的字符串。意思就是会将md5后的结果当…
阅读更多...
网络

网络

mcq Java 传输层&#xff1a;拆分和组装&#xff0c;完成端到端的消息传递&#xff0c;流量控制&#xff0c;差错控制等 网络层&#xff1a; 寻址、路由&#xff0c;复用&#xff0c;拥塞控制&#xff0c;完成源到宿的传递。 显然A选项是错误的&#xff0c;有流量控制的是传输层…
阅读更多...
谷歌推出首款量子弹性 FIDO2 安全密钥

谷歌推出首款量子弹性 FIDO2 安全密钥

谷歌在本周二宣布推出首个量子弹性 FIDO2 安全密钥&#xff0c;作为其 OpenSK 安全密钥计划的一部分。 Elie Bursztein和Fabian Kaczmarczyck表示&#xff1a;这一开源硬件优化的实现采用了一种新颖的ECC/Dilithium混合签名模式&#xff0c;它结合了ECC抵御标准攻击的安全性和…
阅读更多...
MySQL的安装以及卸载

MySQL的安装以及卸载

下载官网 https://www.mysql.com/ 切到下载tab页 找到 MySQL Community Server 或者 MySQL Community (GPL) Downloads --> MySQL Community Server 点击download按钮&#xff1a; 点击download进入下载页面选择No thanks, just start my download就可以开始下载了。 下…
阅读更多...
sqlserver数据库导出到mysql

sqlserver数据库导出到mysql

爱到分才显珍贵&#xff0c;很多人都不懂珍惜拥有&#xff0c;只到失去才看到&#xff0c;其实那最熟悉的才最珍贵的。 这里只介绍一种方式&#xff0c;有很多的方式。 1.使用Navicat 安装 下载 2.工具 数据传输 3.选择源和目标 然后开始 4.最好导入前备份一下库
阅读更多...
C++学习系列之动态库报错问题

C++学习系列之动态库报错问题

C学习系列之动态库报错问题 啰嗦问题解决总结 啰嗦 动态库已建&#xff0c;C文件一加&#xff0c;全是报错&#xff0c;一片红。 问题 解决 解决办法就是加标头 总结 小问题&#xff0c;记录一下。
阅读更多...
海外网红营销：指标选择与ROI评估，量化推广效果的关键

海外网红营销：指标选择与ROI评估，量化推广效果的关键

随着互联网的快速发展&#xff0c;海外网红营销已经成为了品牌推广和营销的重要策略之一。网红作为社交媒体平台上备受关注的个体&#xff0c;拥有庞大的粉丝群体和影响力&#xff0c;成为了品牌推广的有力助手。然而&#xff0c;如何科学地衡量海外网红营销的效果以及投入产出…
阅读更多...
GraphQL strawberry的使用回顾和体会

GraphQL strawberry的使用回顾和体会

GraphQL vs RESTful 简单来说GraphQL 比起 RESTful 集成额外一些功能 出入参校验、序列化 (简化后端编程)自由可选的返回数据字段 (简化一些多余接口开发和沟通联调成本) 这些都是优点了。 开发效率在项目初期是很重要的&#xff0c;需要快速原型化。 但是后期稳定后&#…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023