Ajax--同源策略,jsonp跨域傳輸
阿新 • • 發佈：2017-11-12
href 需要 lan 其他 target 引入 處理 www tle 同源策略的解決方法： 跨域傳輸
什麽是同源策略？
阮一峰的博客 同源策略
同源策略的解決方法： 跨域傳輸
img 標簽的src是可以引入其他域名下的圖片
script標簽的src屬性同理 ，也可以引入其他域名下的js文件，並執行
1.script的屬性引入文件(頁面地址)的時候是允許跨域
2.在頁面地址後,拼接?callback=參數，讓後端能接受到我們的參數
3.需要後端的配合，接收傳過來的參數（函數名稱），把我們處理好的json數據，作為函數的參數，再傳回到前端
4.把我處理好的json數據，作為函數的參數在傳回到前端
核心技術:
前端定義函數後端調用函數
（前端定義函數發送給後臺，後臺把數據作為定義函數的形參傳給前端）
跨域傳輸例子：
cross.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 </body> 10 </html> 11 12 <script src="lib/jquery-1.12.2.js"></script> 13<script> 14 function getCrossJson() { 15 alert(‘我們在html頁面創建了一個函數，但是不在這裏調用‘) 16 } 17 </script> 18 <script> 19 $.ajax({ 20 //localhost 和 127.0.0.1 域名不相同，就代表了跨域 21 //http://localhost/AJAX/day02/13_cross.html 22 //http://127.0.0.1 /AJAX/day02/13_cross.html 23 url:‘13_cross.php‘ 24}); 25 </script>
cross.php
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 </body> 10 </html> 11 12 <script src="lib/jquery-1.12.2.js"></script> 13 <script> 14 function getCrossJson() { 15 alert(‘我們在html頁面創建了一個函數，但是不在這裏調用‘) 16 } 17 </script> 18 <script> 19 $.ajax({ 20 //localhost 和 127.0.0.1 域名不相同，就代表了跨域 21 //http://localhost/AJAX/day02/13_cross.html 22 //http://127.0.0.1 /AJAX/day02/13_cross.html 23 url:‘cross.php‘ 24 }); 25 </script>
Ajax--同源策略,jsonp跨域傳輸