zoukankan      html  css  js  c++  java
  • jsonp的创建原理或者步骤

    JSONP(JSON with Padding)、可用于解决主流浏览器的跨域数据访问的问题

    原理:

    服务端返回一个预先定义好的javascript函数的调用,并且将服务器的数据以该函数参数的形式传递过来,这个方法需要前后端配合。 同源: ​ 域名、端口、协议全都相同就是同源 跨域: ​ 不同源则为跨域

     
    <!--不受同源策略的标签-->
    <img src="http://www.api.com/1.jpg" alt="">
    <link rel="stylesheet" href="http://www.api.com/1.css">
    <script src="http://www.api.com/1.js"></script>
     

    jsonp本质: 利用script的src属性 跨域请求服务器

    jsonp实现步骤:

    1- 前端先定义好一个方法(例如say的方法), 将方法名字 用script的src属性拼接字符串的方式传递给后台

     
    1    //前端有展示数据方法,缺数据
    2     function say(obj) {
    3       alert('你好' + obj.name);
    4       //获取后台返回的数据 ,进行渲染 
    5     }    
    6  <!-- 浏览器默认会将script请求回来的内容当前js执行 -->
    7   <script src="http://www.test.com/05/test/test2.html?callback=say"></script>
    
    
    2- 后台 先获取方法名字, 在方法名后面先拼(),在括号中添加json数据,echo say({name:zs}
      
     1   <?php 
     2   // 后台就是仓库,有的就是数据 
     3   $info = [
     4     "name" => "zs",
     5     "age" => 20
     6   ];
     7  8   $info = json_encode($info); // 转成json字符串  '{name:zs, age: 20}'
     9 10   // jsonp  : json with padding    用json数据进行填充 方法参数 
    11 12  echo $_GET['callback'] . '('. $info .')'; // echo say({name:zs, age: 20})
    13 ?>
    3- 后台会把添加好数据方法调用进行返回
    4- 前端接收到返回的方法调用后,会立即执行, 即可获取后台返回的数据

    query封装的方法:

    //使用起来相当的简单,跟普通的get请求没有任何的区别,只需要把dataType固定成jsonp即可。
    1 $.ajax({
    2   type:"get",
    3   url:"",
    4   dataType:"jsonp",
    5   data:{},
    6   success:function (info) {
    7     console.log(info);
    8   }
    9 });
     

     

  • 相关阅读:
    Oracle(00):PL/SQL嵌入SQL语句
    Oracle(00):CASE WHEN 用法
    Oracle(00):正则表达式
    Oracle(00):删除重复记录
    Oracle(00):PL/SQL块与表达式
    Oracle(00):PL/SQL复合类型
    Oracle(00):PL/SQL数据类型
    Oracle(00):rownum行号
    Oracle(00):递归查询connect by
    Oracle(00):Update语句
  • 原文地址:https://www.cnblogs.com/ly1368489670/p/12749562.html
Copyright © 2011-2022 走看看