同源
1、基本概念：同源策略是浏览器的一种安全策略，所谓同源是指，域名，协议，端口完全相同。
//同一域名下，允许通讯 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
跨域
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成功以后打印的传输数据
