axios、跨域与JSONP、防抖和节流

news2025/7/9 14:49:17

文章目录

  • 一、axios
    • 1、什么是axios
    • 2、axios发起GET请求
    • 3、axios发起POST请求
    • 4、直接使用axios发起请求
  • 二、跨域与JSONP
    • 1、了解同源策略和跨域
    • 2、JSONP
      • (1)实现一个简单的JSONP
      • (2)JSONP的缺点
      • (3)jQuery中的JSONP
      • (4)自定义参数及回调函数名称
      • (5)jQuery中JSONP的实现过程
  • 三、案例:淘宝搜索
    • 1、UI效果
    • 2、获取用户输入的搜索关键词
    • 3、封装getSuggestList函数
    • 4、渲染建议列表的UI结构
    • (1)定义搜索建议列表
    • (2)定义模板结构
    • (3) 定义渲染模板结构的函数
    • (4)搜索关键词为空时隐藏搜索建议列表
    • 5、输入框防抖
    • 6、缓存搜索的建议列表
  • 四、防抖和节流
    • 1、防抖
    • 2、节流
      • (1)概念
      • (2)**节流案例 – 鼠标跟随效果**
    • 3、防抖和节流的区别


一、axios

1、什么是axios

  • Axios 是专注于网络数据请求的库。
  • 相比于原生的 XMLHttpRequest 对象,axios 简单易用
  • 相比于 jQuery,axios 更加轻量化,只专注于网络数据请求。

2、axios发起GET请求

  • axios.get('url', { params: { /*参数*/ } }).then(callback)
  • 例如:
var paramsObj = { name: 'zs', age: 20 }
axios.get(url, { params: paramsObj }).then(function (res) {
	console.log(res.data)
})

3、axios发起POST请求

  • axios.post('url', { /*参数*/ }).then(callback)
  • 例如:
var dataObj = { address: '北京', location: '顺义区' }
axios.post(url, dataObj).then(function (res) {
   console.log(res.data)
})

4、直接使用axios发起请求

 axios({
     method: '请求类型',
     url: '请求的URL地址',
     data: { /* POST数据 */ },
     params: { /* GET参数 */ }
 }) .then(callback)

例如:

var paramsData = { name: '钢铁侠', age: 35 }
axios({
  method: 'GET',
  url: url,
  params: paramsData
}).then(function (res) {
  console.log(res.data)
})
axios({
   method: 'POST',
   url: 'http://www.liulongbin.top:3006/api/post',
   data: {
     name: '娃哈哈',
     age: 18,
     gender: '女'
   }
}).then(function (res) {
   console.log(res.data)
 })

二、跨域与JSONP

1、了解同源策略和跨域

  • 如果两个页面的协议域名端口都相同,则两个页面具有相同的源
  • 例如,下表给出了相对于 http://www.test.com/index.html 页面的同源检测:

学习视频的图片

  • 同源策略(英文全称 Same origin policy)是浏览器提供的一个安全功能。
  • MDN 官方给定的概念:同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。
  • 通俗的理解:浏览器规定,A 网站的 JavaScript,不允许和非同源的网站 C 之间,进行资源的交互,例如:

无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB
无法接触非同源网页的 DOM
无法向非同源地址发送 Ajax 请求

  • 同源指的是两个 URL 的协议域名端口一致,反之,则是跨域
  • 出现跨域的根本原因:浏览器的同源策略不允许非同源的 URL 之间进行资源的交互。
  • 浏览器允许发起跨域请求,但是,跨域请求回来的数据,会被浏览器拦截,无法被页面获取到!
  • 现如今,实现跨域数据请求,最主要的两种解决方案,分别是 JSONPCORS
  • JSONP:出现的早,兼容性好(兼容低版本IE)。是前端程序员为了解决跨域问题,被迫想出来的一种临时解决方案。缺点是只支持 GET 请求,不支持 POST 请求。
  • CORS:出现的较晚,它是 W3C 标准,属于跨域 Ajax 请求的根本解决方案支持 GET 和 POST 请求。缺点是不兼容某些低版本的浏览器。

2、JSONP

JSONP (JSON with Padding) 是 JSON 的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题

由于浏览器同源策略的限制,网页中无法通过 Ajax 请求非同源的接口数据。但是 <script> 标签不受浏览器同源策略的影响,可以通过 src 属性,请求非同源的 js 脚本。

因此,JSONP 的实现原理,就是通过 <script> 标签的 src 属性,请求跨域的数据接口,并通过函数调用的形式,接收跨域接口响应回来的数据。

(1)实现一个简单的JSONP

定义一个 success 回调函数:

<script>
   function success(data) {
     console.log('获取到了data数据:')
     console.log(data)
   }
 </script>

通过 <script> 标签,请求接口数据:

<script src="http://ajax.frontend.itheima.net:3006/api/jsonp?callback=success&name=zs&age=20"></script>

(2)JSONP的缺点

由于 JSONP 是通过 <script> 标签的 src 属性,来实现跨域数据获取的,所以,JSONP 只支持 GET 数据请求,不支持 POST 请求。

注意:JSONP 和 Ajax 之间没有任何关系,不能把 JSONP 请求数据的方式叫做 Ajax,因为 JSONP 没有用到 XMLHttpRequest 这个对象。

(3)jQuery中的JSONP

jQuery 提供的 $.ajax() 函数,除了可以发起真正的 Ajax 数据请求之外,还能够发起 JSONP 数据请求,例如:

 $.ajax({
    url: 'http://ajax.frontend.itheima.net:3006/api/jsonp?name=zs&age=20',
    // 如果要使用 $.ajax() 发起 JSONP 请求,必须指定 datatype 为 jsonp
    dataType: 'jsonp',
    success: function(res) {
       console.log(res)
    }
 })

默认情况下,使用 jQuery 发起 JSONP 请求,会自动携带一个 callback=jQueryxxx 的参数,jQueryxxx 是随机生成的一个回调函数名称

(4)自定义参数及回调函数名称

在使用 jQuery 发起 JSONP 请求时,如果想要自定义 JSONP 的参数以及回调函数名称,可以通过如下两个参数来指定:

 $.ajax({
    url: 'http://ajax.frontend.itheima.net:3006/api/jsonp?name=zs&age=20',
    dataType: 'jsonp',
    // 发送到服务端的参数名称,默认值为 callback
    jsonp: 'callback',
    // 自定义的回调函数名称,默认值为 jQueryxxx 格式
    jsonpCallback: 'abc',
    success: function(res) {
       console.log(res)
    }
 })

(5)jQuery中JSONP的实现过程

jQuery 中的 JSONP,也是通过 <script> 标签的 src 属性实现跨域数据访问的,只不过,jQuery 采用的是动态创建和移除 <script> 标签的方式,来发起 JSONP 数据请求。

在发起 JSONP 请求的时候动态向 <header>append 一个 <script> 标签;

在 JSONP 请求成功以后动态从 <header>移除刚才 append 进去的 <script> 标签;

三、案例:淘宝搜索

1、UI效果

在这里插入图片描述

2、获取用户输入的搜索关键词

// 监听文本框的 keyup 事件
 $('#ipt').on('keyup', function() {
   // 获取用户输入的内容
   var keywords = $(this).val().trim()
   // 判断用户输入的内容是否为空
   if (keywords.length <= 0) {
     return
   }

   // TODO:获取搜索建议列表
 })

3、封装getSuggestList函数

function getSuggestList(kw) {
   $.ajax({
      // 指定请求的 URL 地址,其中,q 是用户输入的关键字
      url: 'https://suggest.taobao.com/sug?q=' + kw,
      // 指定要发起的是 JSONP 请求
      dataType: 'jsonp',
      // 成功的回调函数
      success: function(res) { console.log(res) }
   })
 }

4、渲染建议列表的UI结构

(1)定义搜索建议列表

<div class="box">
    <!-- tab 栏区域 -->
    <div class="tabs"></div>
    <!-- 搜索区域 -->
    <div class="search-box"></div>

    <!-- 搜索建议列表 -->
    <div id="suggest-list"></div>
 </div>

(2)定义模板结构

 <!-- 模板结构 -->
 <script type="text/html" id="tpl-suggestList">
    {{each result}}
       <div class="suggest-item">{{$value[0]}}</div>
    {{/each}}
 </script>

(3) 定义渲染模板结构的函数

 // 渲染建议列表
 function renderSuggestList(res) {
    // 如果没有需要渲染的数据,则直接 return
    if (res.result.length <= 0) {
       return $('#suggest-list').empty().hide()
    }
    // 渲染模板结构
    var htmlStr = template('tpl-suggestList', res)
    $('#suggest-list').html(htmlStr).show()
 }

(4)搜索关键词为空时隐藏搜索建议列表

 $('#ipt').on('keyup', function() {
    // 获取用户输入的内容
    var keywords = $(this).val().trim()
    // 判断用户输入的内容是否为空
    if (keywords.length <= 0) {
       // 如果关键词为空,则清空后隐藏搜索建议列表
       return $('#suggest-list').empty().hide()
    }
    getSuggestList(keywords)
 })

5、输入框防抖

防抖策略(debounce)是当事件被触发后,延迟 n 秒后再执行回调,如果在这 n 秒内事件又被触发,则重新计时

  • 防抖动的 timer定义
 var timer = null                    
  • 定义防抖的函数
 function debounceSearch(keywords) { 
 
    timer = setTimeout(function() {
	    // 发起 JSONP 请求
	    getSuggestList(keywords)
    }, 500)
    
 }
  • 在触发 keyup 事件时,立即清空 timer
 $('#ipt').on('keyup', function() {  
 
    clearTimeout(timer)
   
    // ...省略其他代码
    debounceSearch(keywords)
 })

6、缓存搜索的建议列表

  • 定义全局缓存对象
var cacheObj = {}
  • 将搜索结果保存到缓存对象中
 // 渲染建议列表
 function renderSuggestList(res) {
    // ...省略其他代码

    // 将搜索的结果,添加到缓存对象中
    var k = $('#ipt').val().trim()
    cacheObj[k] = res
 }
  • 优先从缓存中获取搜索建议
 // 监听文本框的 keyup 事件
 $('#ipt').on('keyup', function() {
    // ...省略其他代码

    // 优先从缓存中获取搜索建议
    if (cacheObj[keywords]) {
       return renderSuggestList(cacheObj[keywords])
    }

    // 获取搜索建议列表
    debounceSearch(keywords)
  })

四、防抖和节流

1、防抖

见标题三(案例:淘宝搜索)下的输入框防抖

2、节流

(1)概念

节流策略(throttle),顾名思义,可以减少一段时间内事件的触发频率

(2)节流案例 – 鼠标跟随效果

  • 1、渲染UI结构并美化样式
<!-- UI 结构 -->
<img src="./assets/angel.gif" alt="" id="angel" />
/* CSS 样式 */
html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
#angel {
  position: absolute;
}
  • 2、不使用节流时实现鼠标跟随效果
$(function() {
   // 获取图片元素
   var angel = $('#angel')
   // 监听文档的 mousemove 事件
   $(document).on('mousemove', function(e) {
      // 设置图片的位置
      $(angel).css('left', e.pageX + 'px').css('top', e.pageY + 'px')
   })
})
  • 3、节流阀的概念

节流阀为空,表示可以执行下次操作;不为空,表示不能执行下次操作。

当前操作执行完,必须将节流阀重置为空表示可以执行下次操作了。

每次执行操作前,必须先判断节流阀是否为空

  • 4、使用节流优化鼠标跟随效果
$(function() {
  var angel = $('#angel')
  var timer = null 
  // 1.预定义一个 timer 节流阀
  $(document).on('mousemove', function(e) {
    // 3.判断节流阀是否为空,如果不为空,则证明距离上次执行间隔不足16毫秒
    if (timer) { return } 
    timer = setTimeout(function() {
      $(angel).css('left', e.pageX + 'px').css('top', e.pageY + 'px')
      // 2.当设置了鼠标跟随效果后,清空 timer 节流阀,方便下次开启延时器
      timer = null 
    }, 16)
  })
})

3、防抖和节流的区别

  • 防抖:如果事件被频繁触发,防抖能保证只有最后一次触发生效!前面 N 多次的触发都会被忽略!
  • 节流:如果事件被频繁触发,节流能够减少事件触发的频率,因此,节流是有选择性地执行一部分事件!

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

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

相关文章

Wwise内存问题

1&#xff09;Wwise内存问题 ​2&#xff09;安卓平台特效显示不一致的问题 3&#xff09;多个矩形小方块组成的地形接缝处有黑线问题 这是第339篇UWA技术知识分享的推送&#xff0c;精选了UWA社区的热门话题&#xff0c;涵盖了UWA问答、社区帖子等技术知识点&#xff0c;助力大…

nginx系列第七篇:结合nginx讨论“惊群”问题

目录 1.什么是惊群 2.linux下socket通信之accept"惊群"现象 3.select/poll/epoll"惊群"现象 4.nginx中的惊群处理 1.什么是惊群 "惊群"是多个进程(线程)阻塞在某个系统调用上等待事件触发&#xff0c;当事件触发后&#xff0c;这些睡眠的进程…

数位dp训练笔记

依稀还记得去年寒假的时候对数位dp的恐惧达到了顶峰&#xff0c;打死也不想做一题&#xff0c;也是怎么学都学不会&#xff0c;甚至板子也只是真的去网上copy了一份&#xff0c;自己也都不理解。&#xff08;羞愧&#xff09; 这个状态持续了一年多&#xff08;羞愧羞愧&#…

Windows操作/文件/设置/DOS 记录

目录 1.系统操作 1.环境变量 2.文件夹操作 1.显示隐藏文件夹 3.DOS窗口 1.DOS窗口中docker切换管理员root /]#身份: docker run -it centos​编辑 4.文件操作 1.图片分辨率无损修改尺寸&#xff08;例1280x800&#xff09; 2.图片修改png/jpg文件后缀类型 1.系统操作 1.…

Python 语句

文章目录 一、条件语句1、顺序语句2、条件语句3、缩进和代码块4、条件语句练习5、空语句 二、循环语句1、while2、for3、break和continue 一、条件语句 1、顺序语句 从上到下依次执行 2、条件语句 Python中使用if else关键字表示条件语句. ①if if expression:do_somethi…

PCB板的Mark点设计对SMT重要性

Mark点也称光学点、基准点&#xff0c;是电路板元器件组装中&#xff0c;PCBA应用于自动贴片机上的位置识别点。 Mark点的选用&#xff0c;直接影响到自动贴片机的贴片效率&#xff0c;因此在设计时&#xff0c;需要设计好Mark点以及其在板内的位置。 Mark点的设计 1、布局位…

String s = new String(“xyz“) 创建了几个对象?

这个问题相信每个学习 java 的同学都不陌生&#xff0c;作为一个经典的面试题&#xff0c;到现在工作这么多年了我真是认为挺操蛋的一个问题&#xff0c;在网上到现在你仍然可以看见很多讨论这个问题的人&#xff0c;其中不乏工作很多年的人都有争论&#xff0c;我认为还是有必…

GreatSQL删除分区慢的跟踪

GreatSQL删除分区慢的跟踪 背景 某业务系统&#xff0c;每天凌晨会删除分区表的一个分区(按天分区)&#xff0c;耗时较久&#xff0c;从最开始的30秒&#xff0c;慢慢变为1分钟&#xff0c;影响到交易业务的正常进行。 在测试环境进行了模拟&#xff0c;复现了删除分区慢的情…

市场火爆!三大发展优势加速汽车零部件行业布局

当前&#xff0c;中国新能源汽车自主品牌崛起&#xff0c;为汽车零部件发展带来新机遇&#xff1b;有别于传统汽车零部件市场&#xff0c;新能源领域&#xff0c;主机厂标准提升&#xff0c;对数字化要求逐渐提高&#xff0c;汽车零部件企业的智能制造异常重要&#xff0c;企业…

二分类结局变量Logistic回归临床模型预测(二)——3. 单因素多因素logistic回归分析及三线表(三)

本节讲的是二分类结局变量的临床模型预测,与之前讲的Cox回归不同,https://lijingxian19961016.blog.csdn.net/article/details/124088364https://lijingxian19961016.blog.csdn.net/article/details/124088364https://lijingxian19961016.blog.csdn.net/article/details/1300…

1929-2022年全球站点的逐月最低气温(Shp\Excel\12000个站点)

气象数据是在各项研究中都经常使用的数据&#xff0c;气象指标包括气温、风速、降水、湿度等指标&#xff0c;其中又以气温指标最为常用&#xff01;说到气温数据&#xff0c;最详细的气温数据是具体到气象监测站点的气温数据&#xff01; 之前我们分享过1929-2022年全球气象站…

Qt学习之旅 -信号与槽

文章目录 点击关闭窗口自定义信号和槽自定义信号和槽解决重载问题信号和连接信号断开连接Qt4版本信号槽连接Lambda表达式 点击关闭窗口 connect(信号发送者&#xff0c;发送的具体信号,信号接收者&#xff0c;型号的处理(槽slot));这里自定义的MyPushButton与QPushButton别无二…

【NLP】KMP匹配算法

一、说明 KMP算法。也称为Knuth-Morris-Pratt字符串查找算法可在一个字符串S内查找一个词W的出现位置。一个词在不匹配时本身就包含足够的信息来确定下一个匹配可能的开始位置&#xff0c;此算法利用这一特性以避免重新检查先前配对的字符。将时间复杂度从O(M*N)降为O(N). 这个…

C++ Primer Plus 第三章习题

目录 复习题 1. 为什么C有多种整型&#xff1f; 2. 声明与下述描述相符的变量&#xff1f; 3. C 提供了什么措施来防止超出整型的范围&#xff1f; 4. 33L和33之间有什么区别&#xff1f; 5. 下面两条C语句是否等价&#xff1f; 6. 如何使用C来找出编码88表示的字符&…

又一个生物标志物ADMA被发现!可为OA治疗提供新方向!

文章标题&#xff1a;Metabolite asymmetric dimethylarginine (ADMA) functions as a destabilization enhancer of SOX9 mediated by DDAH1 in osteoarthriti 发表期刊&#xff1a;Science Advances 影响因子&#xff1a;14.95 作者单位&#xff1a;浙江大学医学院附属邵逸…

EasyUi03

1.无限极分类. 1.1无限极分类介绍. 1.1.1何为无限极分类. 无限极分类简单点说就是一个类别能够分多个子类&#xff0c;而后一个子类又能够分多个子类&#xff0c;就这样无限分下去&#xff0c;就好象 windows能够新建一个文件夹&#xff0c;而后在这个文件夹里又能够建一些文…

《嵌入式系统》知识总结12:SysTick定时器

SysTick定时器 系统时钟&#xff08;SysTick&#xff09; Corte-M3在内核中包含的简单定时器 • 该定时器的时钟源可以来自CM3内部时钟&#xff08;FCLK&#xff09;&#xff0c;或CM3外部时钟&#xff08;STCLK&#xff09; • 在STM32微控制器中&#xff0c;SysTick的时钟源可…

平板触控笔哪款好用?电容笔牌子排行

现如今&#xff0c;电容笔越来越受欢迎&#xff0c;不少人在记笔记、学画画甚至是玩游戏的时候都会使用它。最近看到很多人问&#xff0c;iPad电容笔哪款好用&#xff1f;针对这个问题&#xff0c;我来给大家推荐四款公认好用的平替电容笔&#xff0c;一起来看看吧。 一、主动…

实验篇(7.2) 08. 通过安全隧道访问内网服务器 (FortiClient-IPsec) ❀ 远程访问

【简介】通过对SSL VPN与IPsec VPN的对比&#xff0c;我们知道SSL VPN是基于应用层的VPN&#xff0c;而IPsec VPN是基于网络层的VPN&#xff0c;IPsec VPN对所有的IP应用均透明。我们看看怎么用FortiClient实现IPsec VPN远程访问。 实验要求与环境 OldMei集团深圳总部部署了一台…

眼底图片解读(对比图!!!)

目录 1. 前言 2.常见眼底解析 (1) 黄斑变性 (2) 糖尿病视网膜病变 (3) 青光眼 (4) 视网膜血管阻塞 (5)视网膜裂孔和脱离 1. 前言 眼底图像是通过眼底摄影等技术获取的眼底部位的影像&#xff0c;可以提供关于眼睛健康和疾病的重要信息。以下是眼底图像中常见的信息和相关…