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