跨域问题
Js中为了安全具有同源策略,即Js只能访问同协议同域名同端口的资源。如何访问不同源的资源呢?这就是跨域问题。
JSONP原理
JSONP是解决跨域问题一个方法,原理是利用<script>
标签可以访问不同源资源的特性。这里要弄清一个特性,<script>
动态加载时的异步特性,即在页面加载完成时,动态加载<script>
的资源不会马上加载上。如果对<script>
的async和defer属性有了解的话,应该会很好理解这个。
那么如何返回和获取资源的数据呢?
1. 失败的方法:
data.php
<?php
echo "var data = {}";
?>
index.html
<script>
var script = document.createElement('script');
script.src = "xxx/data.php";
(document.getElementsByTagName('head'))[0].appendChild(srcipt);
(function() {
// deal data
console.log(data);
// 由于之前说过的异步加载,所以console.log(data)语句会在加载script之前执行。。。所以失败了
})();
</script>
2. 成功的方法:
data.php
<?php
echo "callback(data)";
?>
index.html
<script>
var script = document.createElement('script');
script.src = "xxx/data.php";
(document.getElementsByTagName('head'))[0].appendChild(srcipt);
function callback(data) {
// do something
// 由于返回的是一个函数调用,所以能够成功
console.log(data);
}
</script>
JSONP的一般做法是定义callback()方法,通过Get方法传送callback的名字(返回时要调用的方法的),在返回的脚本中返回callback(data)