同源
- 基本概念：同源策略是浏览器的一种安全策略，所谓同源是指，域名，协议，端口完全相同。
//同一域名下，允许通讯 http://www.a.com/a.js http://www.a.com/b.js //同一域名下不同文件夹，允许通讯 http://www.a.com/lab/a.js http://www.a.com/script/b.js //同一域名，不同端口，不允许 http://www.a.com:8000/a.js http://www.a.com/b.js //同一域名，不同协议，不允许 http://www.a.com/a.js https://www.a.com/b.js //域名和域名对应ip，不允许 http://www.a.com/a.js http://70.32.92.74/b.js //主域相同，子域不同，不允许 http://www.a.com/a.js http://script.a.com/b.js //同一域名，不同二级域名（同上），不允许 http://www.a.com/a.js http://a.com/b.js //不同域名，不允许 http://www.cnblogs.com/a.js http://www.a.com/b.js
跨域
- 跨域是十分危险的
- iframe标签src属性可以获取外部网站的dom对象
- 跨域又可以被利用，从别的网站接收一些十分有用的数据
<!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>
核心思想
- 因为浏览器禁止跨域访问，但是可以通过src属性进行跨域
- 在script标签的src属性中添加一个js文件地址，可以实现跨域，但是是写死的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--应该是域名加...全路径，如果要跨域访问的话-->
<script src="js/myjs.js"></script>
</body>
</html>
//myjs.js function say(str) { alert(str); } say('hello');
- 在script标签的scr属性中添加一个php地址，页面加载会自动发送一个get请求，这就写活了
- 取数据：服务端获取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.')'; ?>
- 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成功以后打印的传输数据