在前端开发中我们都会遇到跨域请求的问题,因为JavaScript的同源策略,这是一个很重要的安全性限制,这一策略是JavaScript的代码只能访问在同一域名下的内容,不同域名下的脚本不能互相访问,子域也不能访问。
采用JSONP跨域请求是一个很好的方法,但是该方法只适用于GET请求。
JSONP跨域的主要步骤是:
1.前端创建script标签,设置src(因为script标签的src可以包含来自外部域的文件,与img,iframe标签类似)
2.后台返回一个js变了jsonp,这个jsonp就是请求后的json数据
3.回调完成后删除script标记(避免浏览器内存泄漏)
例如:
<script type="text/javascript">
// 得到查询结果后的回调函数
var flightHandler = function(data){
alert("跨域请求成功"+data.name);
};
// 提供jsonp服务的url地址(不管是什么类型的地址,最终生成的返回值都是一段javascript代码)
var url = "http://www.baidu.com/a.js";
// 创建script标签,设置其属性
var script = document.createElement('script');
script.setAttribute('src', url);
// 把script标签加入head,此时调用开始
document.getElementsByTagName('head')[0].appendChild(script);
</script>
a.js文件代码如下:
localHandler({"name":"我是a.js带来的数据"});
这个实例把远程服务器上的a.js写死了,为了更灵活,可以在传入url是设置参数,这样可以告诉服务器我需要什么样的函数,你生成返回给我。
这是个简单的例子,关于跨域还有很多其他的方法,继续学习~希望在前端开发这条路会越走越远!