关于跨域

跨域

同源策略：所谓同源是指域名，协议，端口均相同

跨域是指从一个域名的网页去请求另一个域名的资源，严格一点的定义是：只要协议，域名，端口有任何一个的不同，就被当做跨域

如何解决跨域？
1.跨域资源共享（CORS）

2.使用JSONP（常用）
JSONP是JSON with Padding(填充式json）的简写，是应用JSON的一种新方法，也是一种跨域解决方案

JSONP是由两部分组成：回调函数和数据。回调函数是当响应来时应该在页面中调用的函数，而数据就是传入回调函数中的JSON数据

直接用XMLHttpRequest请求不同域上的数据时，是不可以的。但是在页面上引入不同域上的js脚本文件却是可以的，jsonp正是利用这个特性来实现的

原理：通过script标签引入js文件—>js文件载入成功后通过接口–>执行我们在url参数中指定的函数
3.修改document.domain

4.使用window.name

跨域封装
src属性，href属性可以访问别的域名下的文件
//封装JSONP
function getJSONP(url,callback){
if(!url){//判断url是否存在
return;
}
//http://www.baidu.com?id=6&callbck=def
//声明数组用来随机生成函数名
var a=[‘a’,‘b’,‘c’,‘d’,‘e’,‘f’,‘g’,‘i’,‘h’,‘j’],
r1=Math.floor(Math.random()* a.length), //生成随机索引
r2=Math.floor(Math.random()* a.length),
r3=Math.floor(Math.random()* a.length),
name=‘getJSONP’+a[r1]+a[r2]+a[r3];
cbname=‘getJSONP.’+name;
//判断url地址是否含有？号
if(url.indexOf(’?’)===-1){
url+=’?jsonp=’+cbname
}else{
url+=’&jsonp=’+cbname;
}
//动态创建script标签
var script=document.createElement(‘script’);
//定义被脚本执行的回调函数
getJSONP[name]=function(data){
try{
callback&& callback(data);
//当callback为真时，执行回调函数
}catch(e){
//
}finally{
//最后删除该函数及script标签
delete getJSONP[name];
script.parentNode.removeChild(script);
}
}
//在这里中不能用getJSONP.name，因为这样做name被视作字符串，使用getJSONP[name]可以将name视作变量
//定义script的src
script.src=url;
document.getElementsByTagName(“head”)[0].appendChild(script);

}

getJSONP(“http://class.imooc.com/api/jsonp”,function(data){
console.log(data);
});