zoukankan      html  css  js  c++  java
  • 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 ?>


     
  • 相关阅读:
    关于快速幂算法有效性的证明
    二进制在算法编写中的常用概念
    C++ P3379 【模板】最近公共祖先(LCA)
    关于二分图染色的几点总结
    快速打出System.out.println("");
    try{}catch(){}//根据异常信息使用不同的方法要怎么实现
    Iterator<Entry<String,String>> iter=map.entrySet().iterator(); 是什么意思
    java_Collection 类集
    instanceof的用法②
    instanceof的用法①
  • 原文地址:https://www.cnblogs.com/mrszhou/p/7820497.html
Copyright © 2011-2022 走看看