美文网首页
跨域-jsonp

跨域-jsonp

作者: 无名侠女 | 来源:发表于2018-04-19 10:28 被阅读0次

    1.实现原理:

    问题描述:试想一下,你在网页中使用img标签打开一个外部的图片的链接,你肯定不会遇到任何问题,图片如期的展现了(即使是一张不同域名的图片链接),然而,如果你使用ajax调取一个借口,你将会遇到所谓的跨域问题,因为浏览器只允许XMLHttpRequest请求同源(域名、协议、端口)的资源。

    解决方案:jsonp的解决原理,就是利用script标签的src属性实现的(个人建议,这里您最好自己实践一下)

    2.实现流程

    1.直接使用script标签(这样无法拿到获取到的值)

    <script src="https://api.douban.com/v2/movie/in_theaters"></script>

    2.通过JavaScript来动态创建

    const script=document.createElement('script');

    script.src='https://api.douban.com/v2/movie/in_theaters';

    document.body.appendChild(script);

    3.如何将获取到的数据传回来了,当然是使用回到函数

    function callbackFun(serverdata){

        console.log(serverdata)

    }

    <script src="https://api.douban.com/v2/movie/in_theaters?callback=callbackFun"></script>

    https://api.douban.com/v2/movie/in_theaters">

    3.jsonp的劣势

    1.只支持get类型的方式

    2.存在一定安全隐患

    4.总结

    由于个人也没有自己手写jsonp的经验,用的最多的是jquery的ajax的调取方式,关于jsonp的动态加载方式的代码,以后继续完善

    相关文章

      网友评论

          本文标题:跨域-jsonp

          本文链接:https://www.haomeiwen.com/subject/pomikftx.html