jsonp详解

最新推荐文章于 2019-09-05 23:52:39 发布

雨落风殇

最新推荐文章于 2019-09-05 23:52:39 发布

阅读量126

点赞数

分类专栏： js jquery 文章标签： jsonp

本文链接：https://blog.csdn.net/a15180180753/article/details/80521696

版权

js 同时被 2 个专栏收录

41 篇文章 0 订阅

订阅专栏

jquery

2 篇文章 0 订阅

订阅专栏

1.跨域问题

普通的ajax请求普通文件存在跨域无法访问的问题，因为同源策略会被浏览器阻止方法。
同源：协议，地址端口号都相同叫同源，其中任何一个不同都不叫同源。
解决：网页中调用js文件时不受跨域问题影响，也就是说可以访问其他域名下的js，后来
发现所有包含src这个属性的标签都有跨域的能力。因此可以将请求地址放在js的src中
然后利用回调函数来进行跨域访问。

2.简单文件访问实现

远程服务器有一个文件：a.js

<script>
    console.log('此文件为远程不同源文件');
</script>

本地服务器：b.html

<html>
    <script src='https://www.**.com/a.js'>
    </script>
</html>

页面渲染时会调用a.js方法达到访问远程文件的目的。

3.数据访问

本地服务器：b.html

<html>
    <script>
        function getData(data){
            console.log(data);
        }
    </script>
    <script src='https://www.**.com/a.js></script>  //调用a.js中的getData()方法
</html>

远程服务器：a.js

<script>
    getData({
    'msg':'这是远程文件中的数据'
    })
</script>

本地服务器定义一个跟远程服务器中相同的方法。就可获得远程服务器中数据。这就是jsonp

4.具体实现

上面这种数据获取的方法有个问题，因为远程服务器不知道本地服务器需要调用哪个函数，
所以请求时，本地服务器需传递一个参数告诉远程服务器调用哪个方法。约定callback为调用参数

本地服务器：b.html

<html>
    <script>
        function getData(data){
            console.log(data+'这是远程服务器中的数据');
        }
        var url='https://www.**.com/a.js?callback=getData'; //表示希望调用getData方法
        var script=document.createElement('script');
        script.setAttribute('src',url); //动态创建一个src为远程地址的js
        var head=document.querySelector('head');
        head.appendChild(script);
    </script>
</html>

远程服务器：a.js

<script>
    getData({       //与本地服务器的callback相对应
        msg:'这是远程服务器的数据'
    })
</script>

5.jquery封装jsonp

本地服务器b.html

<html>
    <script>
        $(function(){
            $.ajax({
                type:'get',
                async:false,
                url:'https://www.**.com',   
                dataType:'jsonp',       //表示这是个jsonp请求
                jsonp:'callback',       //统一写法，照着写就行了
                jsonpCallback:'getData',    //定义后台回调函数
                success:function(data){ //success会默认调用jsonpCallback中的方法
                    console.log(data);
                }
            });
        });
    </script>
</html>

远程服务器a.js

<script>
    getData({
        msg:'远程数据'
    })
</script>

雨落风殇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jsonp详解

1.跨域问题普通的ajax请求普通文件存在跨域无法访问的问题，因为同源策略会被浏览器阻止方法。同源：协议，地址端口号都相同叫同源，其中任何一个不同都不叫同源。解决：网页中调用js文件时不受跨域问题影响，也就是说可以访问其他域名下的js，后来发现所有包含src这个属性的标签都有跨域的能力。因此可以将请求地址放在js的src中然后利用回调函数来进行跨域访问。2.简单文件访问实现远程服务器有一个文件：a...
复制链接

扫一扫