网络3-Jsonp

时间：2023-03-08 23:17:47
网络3-Jsonp

解决跨域问题的几种办法

1.Flash （不做讨论）

2.服务器代理中转

3.Jsonp

4.document.domain(针对基础域名相同的情况)
bj.58.com document.domain = '58.com'
tj.58.com document.domain = '58.com'

JSONP原理

1.Web页面上用<script> 引入 js文件时则不受是否跨域的影响
（不仅如此，我们还发现凡是拥有"src"这个属性的标签都拥有跨域的能力，比如<script>、<img>、<iframe>）

2.于是我们把数据放到服务器上，并且数据为json形式（因为js可以轻松处理json数据）

3.因为我们无法监控通过<script>的src属性是否把数据获取完成，所以我们需要做一个处理。

4.实现定义好处理跨域获取数据的函数，如 function doJSON（data）{}。

5.用src获取数据的时候添加一个参数cb=‘doJSON’ (服务端会根据参数cb的值返回 对应的内容) 此内容为以cb对应的值doJSON为函数真实要传递的数据为函数的参数的一串字符 如 doJSON（’数据’）

百度搜索框

直接写script标签会阻塞界面，动态加载文件。
但是defer，aysa，动态创建script都是异步加载，而不是同步的了。

jsonp的小例子

<script>
        var oScript = document.createElement('script');
        oScript.src = './index.txt';
        document.body.appendChild(oScript);

        function aa(data){
            console.log(data);
        }
    </script>

网络3-Jsonp

动态创建script标签，就相当于把加载进来的文档中的内容，动态的加在了后面，然后再在后面执行这个函数。

<script>
        var oScript = document.createElement('script');
        oScript.src = './index.txt?cb=aa';
        document.body.appendChild(oScript);

        var oScript = document.createElement('script');
        oScript.src = './index.txt?cb=aa';
        document.body.appendChild(oScript);

        function aa(data) {
            console.log(data);
        }
        function bb(data) {
            console.log(data);
        }
        /*
            {name: "dg"}
            {age: "18"}
            {name: "dg"}
            {age: "18"}
         */
    </script>

Jsonp是get请求。

http://localhost:8080/web/ajax/demo1/demoTest.html(访问本地服务器，可以看出 是get请求)

网络3-Jsonp

网络3-Jsonp

?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=wise_web&sugsid=1457,21082,28774,28721,28834,28584,26350,20718&wd=abcded&req=2&bs=abcd&pbs=abcd&csor=6&pwd=abcde&cb=jQuery1102013459108437818568_1556539812711&_=1556539812734

这个网址中问号后面的是参数，有些可以去掉，去掉后保留

只保留这三个参数即可。事实证明少了第一个参数不行。

相关文章