跨域（同源策略）
scr href 两个能够跨域的属性html
<!-- 跨域获取数据 -->
<!-- 同源策略：域名，协议，端口均相同
跨域：从一个域名的网页去请求另外一个域名的资源，严格意义的定义是：只要域名，协议，端口有一个不一样，就是跨域。
如何解决跨域：
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中建立的方法，避免污染函数自己json
//这是老师写代码的思路，下面两个是本身写的代码思路，最后一个比较适合本身。
//封装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);api
//这里的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";
}app
//建立script对象
var script=document.createElement("script");
script.src=url;dom
//定义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>
- 1. 同源策略和跨域
- 2. 同源策略与跨域
- 3. 跨域+同源策略
- 4. 同源策略及跨域
- 5. 同源策略 跨域
- 6. 同源策略 & 跨域
- 7. 同源策略，跨域解决方案
- 8. AJAX 及 同源策略/ CORS跨域
- 9. 关于跨域和同源策略
- 10. 同源策略与跨域问题
- 更多相关文章...
- • Redis内存回收策略 - Redis教程
- • 二级缓存的并发访问策略和常用插件 - Hibernate教程
- • PHP Ajax 跨域问题最佳解决方案
- • Java Agent入门实战（二）-Instrumentation源码概述
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. python的安装和Hello，World编写
- 2. 重磅解读：K8s Cluster Autoscaler模块及对应华为云插件Deep Dive
- 3. 鸿蒙学习笔记2（永不断更）
- 4. static关键字 和构造代码块
- 5. JVM笔记
- 6. 无法启动 C/C++ 语言服务器。IntelliSense 功能将被禁用。错误: Missing binary at c:\Users\MSI-NB\.vscode\extensions\ms-vsc
- 7. 【Hive】Hive返回码状态含义
- 8. Java树形结构递归（以时间换空间）和非递归（以空间换时间）
- 9. 数据预处理---缺失值
- 10. 都要2021年了，现代C++有什么值得我们学习的？
- 1. 同源策略和跨域
- 2. 同源策略与跨域
- 3. 跨域+同源策略
- 4. 同源策略及跨域
- 5. 同源策略 跨域
- 6. 同源策略 & 跨域
- 7. 同源策略，跨域解决方案
- 8. AJAX 及 同源策略/ CORS跨域
- 9. 关于跨域和同源策略
- 10. 同源策略与跨域问题