• 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 ?>


     
  • 相关阅读:
    SpringCloudStream实例
    Gateway环境搭建,通过YML文件配置
    Hystrix图形化监控
    Hystrix服务降级
    SpringBootのRedis
    springboot之缓存
    springboot整合JPA
    留言板
    Python 京东口罩监控+抢购
    2019年 自我总结
  • 原文地址:https://www.cnblogs.com/mrszhou/p/7820497.html
Copyright © 2020-2023  润新知