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的动态加载方式的代码,以后继续完善
网友评论