scr href 两个可以跨域的属性
<!-- 跨域获取数据 -->
<!-- 同源策略：域名，协议，端口均相同
跨域：从一个域名的网页去请求另一个域名的资源，严格意义的定义是：只要域名，协议，端口有一个不同，就是跨域。
如何解决跨域：
1，跨域资源共享(CORS)
2，使用JSONP(常用，就是填充式JSON)
3，修改document.domain
4，使用window.name
下面是JSONP的介绍
1，什么JSONP是JSON with Padding(填充式json)的简写，是应用JSON的一种新方法，也是一种跨域解决方案。
2，JSONP 由两部分组成：回调函数 和 数据。
回调函数：当响应到来时应该在页面中调用的函数
数据：是传入回调函数中JSON数据
JSONP原理：
1，通过script标签引入js文件
2，js文件加载成功后
3，执行我们在url参数中指定的函数
直接使用XMLHttpRequest请求不同域上的数据时，是不可以的，
但是，在页面上引入不同域上的js脚本文件却是可以的。 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跨域</title>
</head>
<body>
<script>
//使用src属性可以跨域的特性，进行的一种跨域获取数据的做法：
//1，封装JSONP跨域函数，两个参数：url,callback
// url:需要获得数据的不同域名，协议，端口号的地址
// callback:回调函数用于处理服务器返回的数据dat
//2，处理url，判断是否有效，如有效，则给url添加一个自定义的函数，
// 用于接收服务器返回的数据data，
// 如：https://www.baidu.com?id=234&jsonp=getJSONP.abcd
// jsonp可以随便定义，只是过渡作用
// getJSONP.abcd ：给getJSONP对象添加abcd属性，该属性是一个函数如：
// getJSONP.abcd=function(data){...},只要abcd是一个函数，
// 服务器就会自动把数据往abcd中塞，即function(data){...},
// data就是服务器返回的数据。
//3，最后创建script对象，并为其设置src=url，即可。
//4，最后的最后，不管是否跨域成功，都要删除已经创建的script对象，以及getJSONP中创建的方法，避免污染函数本身
//这是老师写代码的思路，下面两个是自己写的代码思路，最后一个比较适合自己。
//封装JSONP跨域函数
function getJSONP(url,callback){
//判断url是否为false，如果为false则直接返回，不执行
if (!url) {
return;
}
var arr=['a','b','c','d','e','f','g','j','h','i'];
//随机生成4个0到9之间的索引，对应数组arr的下边生成a到i之间的字母。组成一个函数名。
var r1=Math.floor(Math.random()*(9-0+1)+0);
var r2=Math.floor(Math.random()*(9-0+1)+0);
var r3=Math.floor(Math.random()*(9-0+1)+0);
var r4=Math.floor(Math.random()*(9-0+1)+0);
//这里的name,纯粹是一个属性，getJSON可自定义，与getJSON方法没有关系
var name='getJSONP'+arr[r1]+arr[r2]+arr[r3]+arr[r4];
//这里的name是作为getJSON方法对象的属性，用于存放服务器返回的数据
var cbname='getJSONP.'+name;
//判断url中地址是否含有"?"符号，jsonp作为url发送数据的变量，可以自定义
if (url.indexOf("?") === -1) {
url+="?jsonp="+cbname;
}else{
url+="&jsonp="+cbname;
}
//创建script标签
var script=document.createElement('script');
//定义被脚本执行的回调函数
getJSONP[name]=function(data){
try{
// && 如果条件全部为真，则返回最后一个
// && 如果有多为false，则返回第一个false的条件。
//如果callback为真，则执行callback(data)函数
callback && callback(data);
//捕获异常，并没有抛出
}catch(e){
///不执行
}finally{
//不管是否执行成功，都要进行删除操作如下：
//最后删除创建的函数getJSONP[name]，以免污染getJSONP函数本身
delete getJSONP[name];
//删除script对象
script.parentNode.remove("script");
}
}
//给script设置src属性，因为src是可以跨域访问不同域名，协议，端口的数据
script.src=url;
//把script添加到DOM中的head末尾。
document.getElementsByTagName("head")[0].appendChild(script);
}
getJSONP('http://class.imooc.com/api/jsonp',function(data){
for (var i = 0; i < data.length; i++) {
console.log(data[i].picUrl+"---"+data[i].linkUrl);
}
});
/*//第一种自己的思路
/function getJSONP(url,callback){
//判断url是否有效
if (!url) {
return;
}
//如果url是否有传参数，并且给url传一个接受数据的函数jsonp=getJSONP.abcd
if (url.indexOf("?")===-1) {
//这里getJSONP.abcd为了偷懒，没有正式定义，正式应该使用随机生成，如下面例子。
url+="?jsonp=getJSONP.abcd";
}else{
//这里getJSONP.abcd为了偷懒，没有正式定义，正式应该使用随机生成，如下面例子。
url+="&jsonp=getJSONP.abcd";
}
//创建script对象
var script=document.createElement("script");
script.src=url;
//定义getJSONP.abcd函数，唯一的功能就是为了接收服务器返回的函数data
//即：function(data){...里面的代码块就是为了处理data}
getJSONP[abcd]=function(data){
try{
callback && callback(data);
}catch(e){
//
}finally{
delete getJSONP.abcd;
script.parentNode.remove("script");
}
}
}
getJSONP("http://class.imooc.com/api/jsonp",function(data){
console.log(data);
});*/
//第二种自己的思路
//跨域，获取不同域名，协议，端口的地址的数据，使用callback回调函数处理服务器返回的数据
/*function getJSONP(url,callback){
//判断url是否有效
if (!url) {
return
}
//以下是随机生成一个4位字母的name，其实也可以随便自定义个name，也可以执行
var arr=['a','b','c','d','e','f','g','h','i','j','k','l','m','n','h','o','p','q','r','s','z'];
var r1=Math.floor(Math.random()*arr.length),
r2=Math.floor(Math.random()*arr.length),
r3=Math.floor(Math.random()*arr.length),
r4=Math.floor(Math.random()*arr.length);
//这里的name可以随便自定 如：var name=abdcdsdf;
//这里只是为了正式点才使用了随机生成。
var name="getJSONP"+arr[r1]+arr[r2]+arr[r3]+arr[r4];
if (url.indexOf('?')===-1) {
//这里等jsonp也可以随便定义，只是形式上过渡而已，如：
//假如：url="https://www.baidu.com?a=3&jsonp=getJSONPP.getJSONPabcd"
//重点是为了给getJSONP对象添加一个getJSONPabcd函数用于接收服务器返回的data数据而已
url+="?jsonp=getJSONP."+name;
}else{
url+="&jsonp=getJSONP."+name;
}
//创建script对象，不管是否跨域成功都创建了script对象
var script=document.createElement("script");
//给script设置src属性
script.src=url;
//把script对象添加到head末尾
document.getElementsByTagName("head")[0].appendChild(script);
//定义getJSONP[name]函数，用于接收数据
getJSONP[name]=function(data){
//判断callback回调函数是否是有效的
//callback是用于处理服务器返回的数据
try{
callback&&callback(data);
}catch(e){
//有异常不处理
}finally{
//不管跨域是否成功
//都要删除已经创建的script对象，以及getJSONP.name的方法，避免污染getJSONP对象本身
delete getJSONP[name];
script.parentNode.remove(script);//一定要获得父元素后才可以进行删除指定对象
}
}
}
//随便给一个不同域名，不同协议，不同端口的地址进行测试
getJSONP('http://class.imooc.com/api/jsonp',function(data){
//不管获得什么数据记得先查看其类型，再进行操作
console.log(typeof data);
for (var i = 0; i < data.length; i++) {
//可以对该数据进行处理，如渲染到DOM树上
//把数据渲染到DOM树上有两种方式：
//1，使用document.createElement('a'); div.appendChild(创建的对象);
//2，str="<a href='"+data[i].linkUrl+"'><img src='"+data[i].picUrl+"'/></a>"
console.log(data[i]);
}
});*/
</script>
</body>
</html>