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 });

jsonp的创建原理或者步骤

原理：

jsonp实现步骤：

猜你喜欢