AJAX——重复请求、jquery、axios、fetch函数

最新推荐文章于 2024-01-12 12:02:02 发布
最新推荐文章于 2024-01-12 12:02:02 发布
阅读量160 收藏
点赞数
分类专栏： javascript es6 node.js 文章标签： ajax jquery javascript node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/h_jQuery/article/details/120390527
版权
javascript 同时被 3 个专栏收录
123 篇文章 0 订阅
订阅专栏
es6
73 篇文章 0 订阅
订阅专栏
node.js
26 篇文章 0 订阅
订阅专栏

AJAX

避免重复发起请求（使用到节流）

<!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>
    <button id="btn">发送请求</button>
    <script>
        const btn = document.getElementById('btn');
        // 请求标识符，为false时，说明请求结束，为true时，说明正在请求中
        let isSending = false;
        let xhr = null;
        btn.onclick = function() {
            // 先判断上一个请求是否完成,若还未完成，则取消上一个请求，重新开启一个请求，保证只存在一个请求
            if (isSending) xhr.abort();
            xhr = new XMLHttpRequest();
            isSending = true;
            xhr.open('GET', 'http://127.0.0.1:8003/delay');
            xhr.send();
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) {
                    isSending = false;
                }
            }
        }
    </script>

</body>

</html>

接口

app.all('/delay', (req, res) => {
    res.setHeader('Access-Control-Allow-Origin', '*');
    setTimeout(() => {
        res.send('延时响应');
    }, 1000)
});
// 设置监听端口
//访问路径：http://127.0.0.1:8003/server
app.listen(8003, () => {
    console.log('使用nodemon服务器已启动');
})
jquery中的ajax

1.get请求

$.get(url,[data],[ccallback],[type])

url：请求的url地址；
data：请求携带的参数
callback：载入成功时的回调函数
type：设置返回内容格式，xml/html/script/json/text/_dedault

2.post请求

$.post(url,[data],[ccallback],[type])

url：请求的url地址；
data：请求携带的参数
callback：载入成功时的回调函数
type：设置返回内容格式，xml/html/script/json/text/_dedault

3.通用型请求

$.ajax({key:value,....})

<!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>
    <!-- <link rel="stylesheet" href="<link href=" https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap-grid.min.css " rel="stylesheet ">"> -->
    <!-- 在bootcdn找来的资源（src属性后面的东西） -->
    <!-- crossorigin="anonymous"：向指定资源请求时，不会携带当前域名下的cookie -->
    <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

<body>
    <div class="container">
        <h2>jquery发送ajax请求</h2>
        <button>get</button>
        <button>post</button>
        <button>通用型</button>

    </div>
    <script>
        $('button').eq(0).click(function() {
            // get方式所传的数据可以在地址后面显示
            $.get('http://127.0.0.1:8003/jquery', {
                a: 100,
                b: 200
            }, function(data) {
                // 这个data是接口响应回来的数据
                console.log(data);
            }, 'json');
            // 设置了接受的内容是json类型的，就不用JSON.parse将传过来的字符串类型的数据转为json，会自动转换
        });
        $('button').eq(1).click(function() {
            $.post('http://127.0.0.1:8003/jquery', {
                a: 100,
                b: 200
            }, function(data) {
                console.log(data);
            });
            // 这里没设置内容类型，数据就是字符串类型的
        });
        // 通用型
        $('button').eq(2).click(function() {
            // 里面是一个对象
            $.ajax({
                // url
                url: 'http://127.0.0.1:8003/jquery',
                // 参数
                data: {
                    a: 100,
                    b: 200
                },
                // 请求类型
                type: 'GET',
                // 响应体类型
                dataType: 'json',
                // 成功的回调
                success: function(data) {
                    console.log(data);
                },
                // 失败的回调
                error: function() {
                    console.log('请求失败，请重试');
                },
                // 超时时间
                // timeout: 2000,
                // 头信息
                headers: {
                    c: 300,
                    d: 400
                }
            });
        })
    </script>
</body>

</html>

接口

app.all('/jquery', (req, res) => {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Headers', '*');

    const obj = { name: 'zs', sex: '男' };
    res.send(JSON.stringify(obj));
});

axios发送ajax请求

<!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>
//bootcdn
    <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
</head>

<body>
    <button>get</button>
    <button>post</button>
    <button>ajax</button>

    <script>
        // 配置baseUrl
        axios.defaults.baseURL = 'http://127.0.0.1:8003';
        const btns = document.querySelectorAll('button');
        // get
        btns[0].onclick = function() {
                // axios成功时不是调用回调，而是.then，返回的是一个promise
                axios.get('/axios', {
                    // url参数
                    params: {
                        id: 100,
                        nanme: '张三'
                    },
                    //请求头 
                    headers: {
                        name: 'xxx'
                    }
                }).then(function(data) {
                    console.log(data);
                })
            }
            // post
        btns[1].onclick = function() {
            // axios成功时不是调用回调，而是.then，返回的是一个promise
            // post请求的第一个参数是url，第二个参数是请求体，第三个参数是其他配置信息
            axios.post('/axios', {
                uername: 'zs',
                userpwd: '123456'
            }, {
                // url参数
                params: {
                    id: 100,
                    nanme: '张三'
                },
                // 请求头
                headers: {
                    name: 'xxx'
                },
            }).then(function(data) {
                console.log(data.data);
                console.log(data);
            })
        };
        // 通用方法
        btns[2].onclick = function() {
            // 返回一个对象
            axios({
                // 请求方式
                method: 'POST',
                // url
                url: '/axios',
                // url参数
                params: {
                    id: 100
                },
                // 请求头
                headers: {
                    a: 100,
                    b: 200
                },
                // 请求体参数
                data: {
                    name: '李四',
                    age: 22
                }
            }).then(res => {
                console.log(res.config);
            })
        }
    </script>
</body>

</html>

接口

app.all('/axios', (req, res) => {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Headers', '*');

    const obj = { name: 'zs', sex: '男' };
    res.send(JSON.stringify(obj));
});
fetch函数

是属于全局对象，可以直接调用

<!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>
    <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
</head>

<body>
    <button>发送请求</button>
    <script>
        const btn = document.querySelector('button');
        btn.onclick = function() {
            // fetch函数返回的是一个promise对象，用.then的回调处理接收的数据
            // 如果要设置url参数，就直接写在uel后面，用？隔开
            fetch('http://127.0.0.1:8003/fetch?sex=boy', {
                // 请求方式
                method: "POST",
                // 请求头
                headers: {
                    name: 'zs'
                },
                // 请求体(如果是get请求就没有请求体这个配置项)
                body: 'name=zs&pwd=123456'
            }).then(res => {
                // .text()在__proto__里面
                // return res.text();
                // 将服务器传过来的数据转为json数据
                return res.json();
                console.log(res);
            }).then(res => {
                // 这里的res就是服务器响应过来的数据
                // console.log(JSON.parse(res));
                console.log(res);
            })
        }
    </script>
</body>

</html>

接口

app.all('/fetch', (req, res) => {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Headers', '*');

    const obj = { name: 'zs', sex: '男' };
    res.send(JSON.stringify(obj));
});
h_jQuery
关注
专栏目录
ajax尚硅谷笔记——跨域请求、axios发送ajax请求、jquery发送ajax请求
weixin_53317758的博客
11-21 2110
script标签作为函数被服务调用，其中加上该函数的参数作为用户需要看到的数据内容
axios，Ajax,jQuery ajax,axios和fetch的区别
沈圥笙，的博客
02-23 1105
提纲： 1.Axios的概念 2.安装 3.Axios简单示例 4.Axios的API 5.Axios的请求配置和响应数据格式 6.Axios的拦截器 7.Ajax,jQuery ajax,axios和fetch的区别 内容： 1.Axios的概念 axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 特点： 从浏览器中创建 XMLHttpRequest...
探秘 | 原生ajax、jquery-ajax、axios与fetch的区别与优缺点
青春木鱼的博客
07-26 1039
前端的技术发展速度非常的快，异步请求也是其重要的体现之一，从最早的原生XHR，再到JqueryAjax的统治时代，再到近来，fetch、axios等技术也开始出现并大量投入使用。其实有这么多种的请求方法和解决方案，总结一下：原生XHR几乎很少开发会用，JqueryAjax属于老当益壮的那种，虽然很老，但是很好用，Fetch是属于初生牛犊，还需要慢慢成长，axios就目前来说，算是非常好的了，无脑使用即可。
数据请求axios，Ajax，jQuery ajax，axios和fetch的区别
weixin_40381947的博客
06-25 672
Axios 在功能上比 Ajax 和 jQuery Ajax 更强大，而 Fetch 则是一个较新、更先进的 API，但它也存在一些问题。选择适合自己需求的工具，可以提高代码编写效率和减少出错风险。
前端请求数据方法 —— Ajax、Fetch、Axios、Get、Post
最新发布
qq_53895518的博客
01-12 1701
一、Ajax:（也写为AJAX 读作/ˈeɪdʒæks/或阿贾克斯. “Asynchronous JavaScript and XML”(异步JavaScript和XML)的缩写）是一组Web开发技术，Ajax不是一种技术，而是一个编程概念。AJAX 这个词就成为 JavaScript 脚本发起 HTTP 通信的代名词，也就是说，只要用脚本发起通信，就可以叫做 AJAX 通信。
【Ajax】(二）JQuery发送Ajax请求、Axios发送Ajax请求、fetch发送Ajax请求、跨域、jsonp、CORS
matmacchiato的博客
01-14 393
在CORS中你要发请求，你就按照ajax那一套去做就行了，至于跨域的问题，就交给服务端设置响应头就可以实现跨域。这个请求方法厉害之处在于他不用像jquery和axios那样需要引入第三方库，而是可以直接使用。声明handle函数，创建script标签，利用src属性请求数据。做一个案例，点击按钮，向8000端口发出请求，返回结果在div呈现。// 向服务器端发送请求，检测用户名是否存在。// 修改 p 标签的提示文本。//1. 创建script标签。//2. 设置标签的src属性。
AJAX —— 原生 AJAX / jQuery 发送 AJAX / axios 发送 AJAX / fetch 发送 AJAX
imByte的博客
11-13 1624
参考 「一」原生 AJAX 1. AJAX 简介 AJAX，即 Asynchronous JavaScript and XML 的缩写，指的是通过 JavaScript 的异步通信，从服务器获取 XML 文档从中提取数据，再更新当前网页的对应部分，而 不用刷新整个网页。 后来，AJAX 这个词就成为 JavaScript 脚本发起 HTTP 通信的代名词，也就是说，只要用脚本发起通信，就可以叫做 AJAX 通信。 AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。 具体来说，AJ.
ajax、axios、fetch的区别
猫老板的豆
05-09 1068
axios不是xhr的子集，axios利用xhr进行了二次封装的请求库，xhr只是axios中的其中一个请求适配器，axios在nodejs端还有个http的请求适配器；axios和vue没关系，axios也不是随着Vue的兴起才广泛使用的，axios本身就是独立的请求库，跟用什么框架没关系；很多小伙伴可能会误以为 Ajax 是发请求的一种方式，或者把 XMLHttpRequest 与 Ajax 划等号，其实这是错误和片面的。，是一个概念模型，它囊括了很多技术，并不特指某一技术，它很重要的特性之一就是。
Ajax,jQuery ajax,axios和fetch的区别
u010180452的博客
06-28 391
Ajax,jQuery ajax,axios和fetch的区别 Ajax： ajax，最早出现的发送后端请求技术，隶属于原始js中，核心使用XMLHttpRequest对象，多个请求之间如果有先后关系的话，就会出现回调地狱。 Jquery Ajax： 是jQuery框架中的发送后端请求技术，由于jQuery是基于原始的基础上做的封装，所以，jquery Ajax自然也是...
react 使用ajax axios,react中使用Ajax请求（axios，Fetch）
weixin_42515841的博客
08-06 1299
React本身只关注于界面, 并不包含发送ajax请求的代码，前端应用需要通过ajax请求与后台进行交互(json数据)，可以使用集成第三方ajax库(或自己封装)常用的ajax请求库jQuery: 比较重, 如果需要另外引入不建议使用axios: 轻量级, 建议使用，封装XmlHttpRequest对象的ajax，promise风格，可以用在浏览器端和node服务器端fetch: 原生函数, 但...
数据请求的几种方式(ajax、fetch、jQuery、axios)，token过期自动刷新
qq_45700583的博客
08-27 2917
一个context import React, { Component, createContext } from 'react'; const BatteryContext = createContext(); //声明一个孙组件 class Leaf extends Component { render() { return ( <BatteryContext.Consumer> { battery => <h1&g
数据交互——Promise、Ajax、axios和fetch的优缺点
qq_44905636的博客
04-13 1812
一、Promise Promise主要用于解决异步回调嵌套的问题。 当多个ajax请求之间存在依赖关系，也就是说一个请求必须使用另一个请求返回的结果时，需要将这个请求嵌套在另一个请求的回调函数上，才能使用另一个请求的结果来发送这个请求。 Promise的思路是将异步请求作为一个对象，将执行成功和失败作为这个对象的方法，执行成功的时候将结果放到这个对象的then方法中处理后续的逻辑，失败调用catc...
日期时间选择器——el-date-picker设置默认时间
热门推荐
h_jQuery的博客
08-03 1万+
组件使用
文件上传——将文件转成base64传给后端
h_jQuery的博客
10-25 4317
文件上传转base64
js原生——搜索框，模糊匹配（查询）
h_jQuery的博客
07-09 4083
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do
js处理——获取当前月第一天和最后一天
h_jQuery的博客
12-29 2903
js时间处理
javascript——数组、数组遍历、forEach、增加删除元素
h_jQuery的博客
08-10 2312
数组(Array) 数组也是一个对象，它和普通对象的功能类似，也是用来存储数据的；不同的是普通对象是使用字符串作为属性名的，而数组是使用数字来作为索引操作元素的 对象中是用属性，数组中用索引 索引：数组的索引是从0开始的整数，数组的存储性能比普通对象更好，在开发中我们经常使用数组来存储一些数据 <script> // 创建数组对象 var arr = new Array(); // 使用typeof检查数组时，会返回object /
javascript——事件防抖、节流处理
h_jQuery的博客
08-05 2017
防抖 在规定时间内，多次触发一个事件，事件内会执行一个函数。 应用场景：输入框内搜索，输入关键词就会触发搜索事件函数，一直输入一直触发。用防抖，防止连续发送请求，在规定的时间内（如2000ms内），只会触发一次搜索事件，以规定时间内的最后一次触发为准。 按钮多次点击提交，频繁触发提交事件。利用防抖，防止多次提交，在规定时间内，只处理最后一次的提交事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset
使用原生JavaScript实现AJAX POST请求
"这篇文章主要介绍了如何使用原生JavaScript实现AJAX发送POST请求，从而摆脱对jQuery等库的依赖。在JavaScript中，我们可以直接创建XMLHttpRequest对象来实现异步数据通信。下面将详细介绍这个过程。 首先，我们...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值