跨域与JSONP-CSDN博客

本文链接：https://blog.csdn.net/hccccccccccccc/article/details/118997143

1了解同源和同源策略

2JSONP

3防抖和节流

1了解同源和同源策略

如果两个页面的协议，域名，端口都相同，则两个页面具有相同的源。反之则是跨域。出现跨域的根本原因是：浏览器的同源策略不允许非同源的URL进行资源的交互

同源策略Same origin policy 是浏览器提供的一个安全功能。同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互，这是一个用于隔离潜在恶意文件的重要安全机制。

通俗的理解就是：A网站的JS不允许和非同源网站的C之间，进行资源的交互，就比如无法读取非同源网页的cookie LocalStorage 无法接触非同源网页的DOM 无法向非同源地址发送Ajax请求。

2JSONP

那么如何实现跨域的数据请求呢？

现在主流使用JSONP和CORS，但是JSONP只支持GET请求，不支持POST请求，在此我先详细讲述JSONP，CORS我会放在其他章节进行讲解。

JSONP全名是JSON with Padding 是JSON的一种使用模式。什么是JSON？上一章有讲过，JSON理解为一种字符串数据格式和XML是并行的，也就是后端传过来的数据是JSON格式，我们需要把JSON转化为对象，才能供前端人员操作。

JSONP的关键是通过script标签的src属性请求非同源的js脚本，并且通过函数调用的形式，接受跨域接口响应回来的数据。


<!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>Document</title>
</head>

<body>
    <script>
        function abc(data) {
            console.log('JSONP响应回来的数据是：')
            console.log(data)
        }
    </script>

    <script src="http://www.liulongbin.top:3006/api/jsonp?callback=abc&name=ls&age=30"></script>
</body>

</html>

现在我们来理解上述代码，我们通过src属性，访问另一个网站的数据，但是我们需要定义一个回调函数并且用回调函数来接受传过来的值。但实际开发中，我们经常用jQuery中的JSONP，也就是说$.ajax()这个函数可以发起真正的Ajax数据请求，也能发起JSONP数据请求。因此我们可以得出一个结论：JSONP和Ajax没有任何关系，因为JSONP没有用到XMLHttpRequest这个对象。

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

<body>
    <script>
        $(function() {
            // 发起JSONP的请求
            $.ajax({
                url: 'http://www.liulongbin.top:3006/api/jsonp?name=zs&age=20',
                // 代表我们要发起JSONP的数据请求
                dataType: 'jsonp',
                jsonp: 'callback',
                jsonpCallback: 'abc',
                success: function(res) {
                    console.log(res)
                }
            })
        })
    </script>
</body>

</html>

首先第一点说明是需要指定dataType为JSONP格式。此外JSONP是发送到服务端的参数名称，默认值为callback，JSONPCallback是自定义的回调函数的名称，这都可以随意设置，值得注意的是如果不设置回调函数名称默认为返回的是callback=jQueryXXXXXX是随机生成的一个名称

3防抖和节流

我们先来引入两个案例，这样能更好的理解防抖和节流。

案例一淘宝的关键字检索页面，大致思想是在搜索框输入几个信息时，就会从后台检索到相关词并且展示到下拉框中。

什么是防抖？

防抖策略是当事件被触发时，延迟n秒后再执行回调，如果在这N秒内事件又被触发，则重新计时。最简单的例子，就是王者荣耀的回程设置，当触发回程按钮时不能移动，不能攻击或被攻击，否则都会停止。

因此我们联想到输入框，用户在输入框中连续输入一串字符，可能会带来的影响是：每输入一个字符，就会触发响应事件（因为响应事件是键盘弹起触发），如果触发导致的是，后台获取资源频率过高，并且获取的都是不需要的资源，只有最后一次才是有用的资源。因此我们需要通过防抖策略，只有在输入完后，才执行查询的请求，这样可以有效减少请求次数，节约请求资源。