同源
1、基本概念：同源策略是浏览器的一种安全策略，所谓同源是指，域名，协议，端口完全相同。
//同一域名下，允许通讯http://www.a.com/a.jshttp://www.a.com/b.js//同一域名下不同文件夹，允许通讯http://www.a.com/lab/a.jshttp://www.a.com/script/b.js//同一域名，不同端口，不允许http://www.a.com:8000/a.jshttp://www.a.com/b.js//同一域名，不同协议，不允许http://www.a.com/a.jshttps://www.a.com/b.js//域名和域名对应ip，不允许http://www.a.com/a.jshttp://70.32.92.74/b.js//主域相同，子域不同，不允许http://www.a.com/a.jshttp://script.a.com/b.js//同一域名，不同二级域名（同上），不允许http://www.a.com/a.jshttp://a.com/b.js//不同域名，不允许http://www.cnblogs.com/a.jshttp://www.a.com/b.js
跨域
1、跨域是十分危险的
2、iframe标签src属性可以获取外部网站的dom对象
3、跨域又可以被利用，从别的网站接收一些十分有用的数据
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????body{ ???????????background-color: yellow; ???????} ???</style></head><body><h1>我是内部</h1><input type="text" value="123"></body></html><!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????body { ???????????background-color: green; ???????} ???</style></head><body><h1>我是外部</h1><iframe src="15-inner.html"></iframe><script> ???var iframe = document.querySelector(‘iframe‘); ???var innerDocument = iframe.contentWindow.document; ???console.log(innerDocument);</script></body></html>核心思想
1、因为浏览器禁止跨域访问，但是可以通过src属性进行跨域
2、在script标签的scr属性中添加一个php地址，页面加载会自动发送一个get请求
3、取数据：服务端获取get请求传递的参数，然后再返回回去，并且再利用字符串拼接把json数据传递过去，这时候是一个函数名+实参的形式传递给了页面
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title></head><body><script> ???function say(data) { ???????console.log(data); ???????console.log(data.name);//wq ???????console.log(data.age);//17 ???}</script><!--发送了一个get请求--><script src="files/07.php?callback=say"></script></body></html><?php ?$str=‘{name:"wq",age:17}‘; ?echo $_GET[‘callback‘].‘(‘.$str.‘)‘;?>4、jquery中异步方法已经帮我们封装好了一个jsonpCallback，可以将callback=jsonpCallback拼接到url中，post除外
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title></head><body><input type="button" value="ajax发送jsonp"><script src="js/jquery.min.js"></script><script> ???function say(data) { ???????console.log(data); ???} ???$(function () { ???????$(‘input‘).click(function () { ???????????$.ajax({ ???????????????url: ‘files/08.php‘, ???????????????dataType: ‘jsonp‘, ???????????????type:‘post‘, ???????????????success: function (data) { ???????????????????console.log(data); ???????????????}, ???????????????jsonpCallback: ‘say‘ ???????????}); ???????}); ???});</script></body></html><?php ?$str=‘{name:"wq",age:17}‘; ?echo $_GET[‘callback‘].‘(‘.$str.‘)‘;?>//{name: "wq", age: 17}//{name: "wq", age: 17}返回两行数据，可以发现，jsonpCallback参数是say，有一个就是调用了say方法，一个是success成功以后打印的传输数据
Ajax——跨域访问
原文地址：https://www.cnblogs.com/wuqiuxue/p/8185087.html