Ajax——跨域訪問
阿新 • • 發佈：2018-01-03
val log 允許 src 有一個 document char body put
同源
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成功以後打印的傳輸數據
Ajax——跨域訪問