Ajax--同源策略,jsonp跨域傳輸原理(callback),


什么是同源策略?

 
        
阮一峰的博客 同源策略 


同源策略的解決方法: 跨域傳輸

    img 標簽的src是可以引入其他域名下的圖片
script標簽的src屬性同理 ,也可以引入其他域名下的js文件,並執行

1.script的屬性引入文件(頁面地址)的時候是允許跨域
2.在頁面地址后,拼接?callback=參數,讓后端能接受到我們的參數
3.需要后端的配合,接收傳過來的參數(函數名稱),把我們處理好的json數據,作為函數的參數,再傳回到前端
4.把我處理好的json數據,作為函數的參數在傳回到前端

核心技術:
前端定義函數后端調用函數
(前端定義函數發送給后台,后台把數據作為定義函數的形參傳給前端)



跨域傳輸例子:cross.html 跨域數據傳輸
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <!--
 9          img 標簽的 src 是可以引入其他域名下的圖片,
10          script 標簽的 src屬性同理,也可以引入其他域名(跨域)下的js文件,並執行
11      -->
12     <!--
13         1. script的src屬性引入文件(頁面地址)的時候是允許跨域
14         2. 在src地址后,拼接?callback=參數,讓后端能接收到我們參數
15         3. 需要后端配合,接收傳過來的參數(函數名稱),
16         4. 把我們處理好的json數據,作為函數的參數再傳回到前端
17         核心技術:
18             前端定義函數,后端調用函數。
19             (前端定義函數發送給后台,后台把數據作為定義函數的參數傳給前端。)
20     -->
21     <img src="http://www.ruanyifeng.com/blogimg/asset/2016/bg2016041202.jpg" alt="">
22 </body>
23 </html>
24 <script>
25     function getCrossJson(json) {
26         console.log(json);
27         alert("我們在html頁面創建了一個函數,但是不在這里調用");
28     }
29 </script>
30 <!-- script 可以加載文件,並執行這些文件 -->
31 <!--<script src="http://localhost/AJAX/day02/13_cross.php"></script>-->
32 <!-- 跨域加載php文件 --> 33 <script src="http://127.0.0.1/AJAX/cross.php?callback=getCrossJson"></script>

在服務器中的cross.php

1 <?php
2     header('Content-Type:text/javascript;charset=utf-8;');
3     //    echo 'getCrossJson()';   寫死的一個函數
4 $callback = $_GET['callback']; 5     // 讀取一份json文件,把它放到$jsonStr變量里
6     $jsonStr = file_get_contents('nav.json');
7     echo "$callback($jsonStr)"; 8 ?>

 



 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM