跨域
同源策略:所谓同源是指域名,协议,端口均相同
跨域是指从一个域名的网页去请求另一个域名的资源,严格一点的定义是:只要协议,域名,端口有任何一个的不同,就被当做跨域
如何解决跨域?
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);
});