Ajax进阶篇02---跨域与JSONP

最新推荐文章于 2024-09-13 23:32:49 发布

2401_87029843

最新推荐文章于 2024-09-13 23:32:49 发布

阅读量632

点赞数 22

文章标签： ajax okhttp 前端

本文链接：https://blog.csdn.net/2401_87029843/article/details/142066669

版权

3.4 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 是随机生成的一个回调函数名称。

3.5 自定义参数及回调函数名称

在使用 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)

    }

})

3.6 jQuery中JSONP的实现过程

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

在发起 JSONP 请求的时候，动态向 <header> 中 append 一个 <script> 标签；
在 JSONP 请求成功以后，动态从 <header> 中移除刚才 append 进去的 <script>标签；

（4）防抖

4.1 什么是防抖

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

4.2 防抖的应用场景

用户在输入框中连续输入一串字符时，可以通过防抖策略，只在输入完后，才执行查询的请求，这样可以有效减少请求次数，节约请求资源；

实现输入框的防抖：


var timer = null;                    // 1. 防抖动的 timer



function debounceSearch(keywords) { // 2. 定义防抖的函数

	timer = setTimeout(function() {

    // 发起 JSONP 请求

    getSuggestList(keywords)

    }, 500)

}



$('#ipt').on('keyup', function() {  // 3. 在触发 keyup 事件时，立即清空 timer

    clearTimeout(timer)

    // ...省略其他代码

    debounceSearch(keywords)

})

（5）节流

5.1 什么是节流

节流就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率；

5.2 节流的应用场景

鼠标连续不断地触发某事件（如点击），只在单位时间内只触发一次；
懒加载时要监听计算滚动条的位置，但不必每次滑动都触发，可以降低计算的频率，而不必去浪费 CPU 资源；

5.3 节流阀的概念

1️⃣ 节流阀为空，表示可以执行下次操作；不为空，表示不能执行下次操作；

2️⃣ 当前操作执行完，必须将节流阀重置为空，表示可以执行下次操作了；

3️⃣ 每次执行操作前，必须先判断节流阀是否为空；

5.3 节流案例 – 鼠标跟随效果

案例素材：

请添加图片描述

完整代码演示如下：


<!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 src="./lib/jquery.js"></script>

    <style>

        /* CSS 样式 */

        html,

        body {

            margin: 0;

            padding: 0;

            overflow: hidden;

        }



        #angel {

            position: absolute;

        }

    </style>

</head>



<body>

    <!-- UI 结构 -->

    <img src="./angel.gif" alt="" id="angel" />



    <script>

        $(function () {

            // 1. 获取到图片

            var angel = $('#angel')

            // 步骤1. 定义节流阀

            var timer = null;

            // 2. 绑定 mousemove 事件

            $(document).on('mousemove', function (e) {

                // 步骤3：判断节流阀是否为空, 如果不为空, 则证明距离上次执行间隔不足16毫秒

                if (timer) { return }

                // 3. 设置图片的位置

                // 步骤2：开启延时器

                timer = setTimeout(function () {

                    $(angel).css('top', e.pageY + 'px').css('left', e.pageX + 'px')

                    console.log('ok')

                    // 当设置了鼠标跟随效果后，清空 timer 节流阀，方便下次开启延时器

                    timer = null

                }, 16)

            })

        })

    </script>

</body>



</html>

（6）总结防抖和节流的区别

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

二、总结

Vue

什么是MVVM？
mvvm和mvc区别？它和其它框架（jquery）的区别是什么？哪些场景适合？
组件之间的传值？
Vue 双向绑定原理
描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？
虚拟 DOM 实现原理
Vue 中 key 值的作用？
Vue 的生命周期
Vue 组件间通信有哪些方式?
vue 中怎么重置 data?
组件中写 name 选项有什么作用？
Vue 的 nextTick 的原理是什么？
Vuex 有哪几种属性?

2401_87029843

关注

22
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫