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

已于 2023-06-07 12:02:45 修改
阅读量2.4k 收藏 2
点赞数
分类专栏： Ajax 文章标签： javascript 前端
于 2023-06-07 12:02:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sjp991012/article/details/124966806
版权

文章目录

一、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 之间进行资源的交互。
  • 浏览器允许发起跨域请求，但是，跨域请求回来的数据，会被浏览器拦截，无法被页面获取到！
  • 现如今，实现跨域数据请求，最主要的两种解决方案，分别是 JSONP 和 CORS。
  • 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 多次的触发都会被忽略！
  • 节流：如果事件被频繁触发，节流能够减少事件触发的频率，因此，节流是有选择性地执行一部分事件！
步步生花@苏殿主
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
说说对ajax、axios、jsonp的理解
祈澈菇凉
10-24 1524
随着技术的发展，现代的前端开发中越来越多地使用 Axios 或 Fetch API 进行 HTTP 请求，而较少使用原生的 AJAX 或 JSONP。
axios 中 如何使用 jsonp
qq_39807853的博客
10-19 2072
axios中使用jsonp
使用axios发送jsonp请求
似水流年
01-26 5828
【背景】 axios 本身不支持 jsonp 这种 dataType（不同于 ajax） 【解决方法】 自行封装一个 jsonp 调用方法： jsonp(url) { return new Promise((resolve, reject) => { // 这里的 "jsonCallBack" ，和调用的 jsonp 的 url 中的 callback 值相对应（见粗体字） window.jsonCallBack ...
axios-jsonp:适用于axios的jsonp适配器
04-30
适用于axios的jsonp适配器 支持承诺，支持取消，与xhr相同 安装 npm install axios-jsonp 用法 let axios = require('axios'); let jsonpAdapter = require('axios-jsonp'); axios({ url: '/jsonp', adapter: jsonpAdapter, callbackParamName: 'c' // optional, 'callback' by default }).then((res) => { });
JSONP及Axios
qq_48847448的博客
08-30 2770
先强制缓存 再 协商缓存文件没变强制缓存 文件变了协商缓存强制缓存不会请求 协商缓存会请求。
axios-add-jsonp:向axios添加jsonp方法
05-13
axios-add-jsonp 向axios添加jsonp方法 安装 $ npm install axios-add-jsonp --save 例子 统一所有请求 import request from 'axios-add-jsonp' request . jsonp ( '/api/123' , { bar : foo , foo : bar } ) . then ( res => { // do some thing } ) request . get ( '/api/123' , { bar : foo , foo : bar } ) . then ( res => { // do some thing } ) request . post ( '/api/123' , { bar : foo , foo : bar } ) . then ( res => { //
解决Nuxt使用axios跨域问题
01-19
本文将介绍如何通过设置代理解决 Nuxt 与 axios 集成的跨域问题。 解决跨域 Nuxt 使用 axios 为避免出现前端页面跨域问题，需要安装 @nuxtjs/axios 和 @nuxtjs/proxy 两个模块。 用 yarn 安装： yarn add axios @...
Vue 3.x+axios跨域方案的踩坑指南
10-16
主要给大家介绍了关于Vue 3.x+axios跨域方案的踩坑指南，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue 3.x具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
vue中axios防止多次触发终止多次请求的示例代码（防抖）
10-15
主要介绍了vue中axios防止多次触发终止多次请求的实现方法（防抖）,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
Vue axios 跨域请求无法带上cookie的解决
10-14
主要介绍了Vue axios 跨域请求无法带上cookie的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue使用axios跨域请求数据问题详解
11-26
axios默认是没有jsonp 跨域请求的方法的。一般来说流行的做法是将跨域放在后台来解决，也就是后台开发人员添加跨域头信息。 例如java中的 header,response.setHeader("Access-Control-Allow-Origin", ...
Ajax(七)+axios+跨域+JSONP
Bella.的博客
12-19 1626
目录 1. XMLHttpRequest Level2的新特性——FormData对象管理表单数据（一） 用法（二） 2. XMLHttpRequest Level2的新特性——上传文件 3. XMLHttpRequest Level2的新特性——显示文件上传进度 4. jQuery高级用法 4.1 jQuery实现文件上传 4.2 jQuery实现loading效果 5. axios 5.1 什么是axios 5.2 axios发起GET请求 5.3 axios发起POST
axios防抖请求
小菜鸟的博客
11-24 3060
axios防抖请求 什么叫做防抖相信很多人都不陌生把 在这里还是稍作解释，防抖不是所谓的防抖动而是重复，就是在你网络很卡的时候点击一个按钮重复发送请求，之前某宝就有这种现象明明只支付一次却付了两次钱，就是因为网络卡，重复发送请求，然后在输入指纹的时候，一次就把两次请求都做了，下面进入正文 1.PC端 - 用户双击搜索按钮，可能会触发两次搜索请求 2.移动端 - 因移动端没有点击延迟，所以极易造成误操作或多操作，造成请求重发 以上情况有可能在有Loading遮罩时依然发生，所以我们要考虑前端阻止重复请求的方
在vue中使用axios实现跨域请求并且设置返回的数据的格式是json格式，而不是jsonp格式
热门推荐
感恩、奋进、自信
05-16 2万+
在vue中使用axios实现跨域请求需求分析：在项目中需要抓取qq音乐的歌曲列表的数据，由于要请求数据的地址url=https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg。从qq音乐的官网上可以看到该请求的请求头中的referer中的域名是y.qq.com(发送请求页面的域名)，而host的域名是c.y.qq.com（被请求页面的域...
同源策略 节流防抖
z19991210的博客
08-26 195
同源策略 节流防抖
axios 添加 jsonp 请求
08-26 1万+
同源策略是为了保证服务器的数据安全而设立的一种安全策略。 其简单解释就是：相同协议、相同域名、相同端口的情况下，数据通信才能成功，否则就会因为跨域问题而报错。 当然，在开发环境下，我们可以通过 nodeJS 搭建一个微服务，再利用 http-proxy-middleware 对 ajax 请求进行转发来实现跨域，参见，或者利用 webpack 自带的跨域代理配置也可以解决。 线上我们使用 ngin...
`“use strict“`在JavaScript中是什么？它背后的原理是什么？
最新发布
Jerry学长
05-27 1058
JavaScript的严格模式（strict mode）是ECMAScript 5引入的一项特性。如果你在脚本或函数的顶部声明 ，你就启用了严格模式： 当JavaScript引擎看到这个指令时，它将开始以一种特殊的模式解释代码。在这种模式下，当检测到某些可能导致潜在错误的编码实践时，会抛出错误。这就是严格模式背后的基本原理。考虑下面这个例子： 开发者可能因为强迫症而对齐数值字面量，但这样会无意中使变量 初始化为八进制字面量。在非严格模式下，这将被解释为值 （十进制）。然而，在严格模式下，这样的代码会抛出错
axios防抖和节流
09-10
axios本身并不提供防抖和节流的功能，它是一个用于发起HTTP请求的库。防抖和节流是一种对事件处理函数进行优化的技术，可以用于限制函数的触发频率。在给定的时间间隔内，防抖只会执行最后一次触发的事件处理函数，而节流则会按照一定的时间间隔有规律地执行事件处理函数。这两种技术可以用于优化一些频繁触发的事件，如mousemove、scroll、resize、input等。 在你提供的引用中，第一个引用解释了防抖和节流的区别，第二个引用提到了一些使用防抖的场景，比如在window.onresize事件回调中触发echarts实例的重绘，或者在input标签的input事件中请求后端接口。但需要注意的是，这里提到的防抖并不是axios本身提供的功能，而是在使用axios发起请求时，可以结合防抖技术来控制请求的触发频率。 因此，在使用axios时，如果需要实现防抖或节流的功能，可以参考第二个引用中提到的场景，使用防抖或节流的方法来控制请求的触发频率，从而达到优化的效果。另外，第三个引用提到了在Vue中引入axios并将其加入Vue的原型中的方法，这是为了在Vue组件中方便地使用axios进行HTTP请求，与防抖或节流相关，只是为了提供一个便捷的请求方式，并不直接涉及防抖或节流的实现。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值