Ajax进阶篇02---跨域与JSONP(1)

3.1 什么是JSONP

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

3.2 JSONP的实现原理

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

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

3.3 JSONP的缺点

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

😆温馨提醒😆：JSONP 和 Ajax 之间没有任何关系，不能把 JSONP 请求数据的方式叫做 Ajax，因为 JSONP 没有用到 XMLHttpRequest 这个对象。

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 节流的应用场景

1. 鼠标连续不断地触发某事件（如点击），只在单位时间内只触发一次；

2. 懒加载时要监听计算滚动条的位置，但不必每次滑动都触发，可以降低计算的频率，而不必去浪费 CPU 资源；

5.3 节流阀的概念

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

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

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

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

案例素材：

完整代码演示如下：