jsonp的创建原理或者步骤
2021-03-19 19:28
标签：operator attribute 你好 col 封装 bre back 服务端 load JSONP(JSON with Padding)、可用于解决主流浏览器的跨域数据访问的问题 服务端返回一个预先定义好的javascript函数的调用，并且将服务器的数据以该函数参数的形式传递过来，这个方法需要前后端配合。 同源: ? 域名、端口、协议全都相同就是同源 跨域: ? 不同源则为跨域 jsonp本质： 利用script的src属性 跨域请求服务器 1- 前端先定义好一个方法(例如say的方法)， 将方法名字 用script的src属性拼接字符串的方式传递给后台 query封装的方法： jsonp的创建原理或者步骤 标签：operator attribute 你好 col 封装 bre back 服务端 load 原文地址：https://www.cnblogs.com/ly1368489670/p/12749562.html原理：
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实现步骤：
1 //前端有展示数据方法，缺数据
2 function say(obj) {
3 alert(‘你好‘ + obj.name);
4 //获取后台返回的数据 ，进行渲染
5 }
6
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- 前端接收到返回的方法调用后，会立即执行， 即可获取后台返回的数据//使用起来相当的简单，跟普通的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 });