|
学如逆水行舟，不进则退
同源策略：指的是域名、协议、端口均相同
跨域是指从一个域名的网页去请求另外一个域名的资源，严格一点的定义是：只要域名、协议、端口有任何一处的不同，都被当做是跨域。
解决跨域方法：
1.跨域资源共享（CORS）
2.使用JSONP（常用）
3.修改document.domain
4.使用window.name
JSONP是JSON with Padding（填充式JSON）的简写，是引用JSON的一种新方法，也是一种跨域解决方案
JSONP由两部分组成，回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数，数据就是传入回调函数中的JSON数据
封装一个JSONP函数实现跨域
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
function getJSONP(url, callback) {
if (!url) {
return;
}
var a = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'];
var r1 = Math.floor(Math.random() * 10);
var r2 = Math.floor(Math.random() * 10);
var r3 = Math.floor(Math.random() * 10);
var name = 'getJSONP' + a[r1] + a[r2] + a[r3];
var cbname = 'getJSONP.' + name;
if (url.indexOf('?') === -1) {
url += '?jsonp=' + cbname;
} else {
url += '&jsonp=' + cbname;
}
var script = document.createElement('script');
getJSONP[name] = function(e) {
try {
callback && callback(e);
} catch (e) {
} finally {
delete getJSONP[name];
script.parentNode.removeChild(script);
}
}
script.src = url;
document.getElementsByTagName('head')[0].appendChild(script);
}
getJSONP('http://xxx.com/api/jsonp', function(response) {
console.log(response);
});
</script>
</body>
</html>
|