1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 </head>
9 <body>
10
11 </body>
12 </html>
13 <script>
14 /*
15 jsonp
16 jsonp是一种非正式传输协议，用于解决跨域问题
17
18
19 jsonp解决跨域的原理
20 利用src不受同源策略的影响。
21
22 jsonp的实现：
23 动态创建script标签 把事先写好的全局函数传到服务端。
24
25
26 jsonp的实现流程： （jsonp接口必须是get请求）
27 a: 动态创建script标签
28 b: 把接口地址给script的src属性
29 c: 把所需要往服务端传递的参数拼接在src地址里面
30 d: 在全局创建一个函数 用callback=函数名的形式 放在地址里面
31 e: 把标签放在body里面
32 f: 数据请求完毕把script标签移除
33 */
34 function handle(data){
35 console.log(data);
36 }
37 document.onclick = function(){
38 var script = document.createElement('script');
39 script.src = 'http://localhost/day24/day24_2/jsonp.php?callback=handle';
40 document.body.appendChild(script);
41 script.onload = function(){
42 this.remove();
43 }
44 }
45 </script>
以下是php文件的内容
1 <?php
2 $fn = $_GET['callback']; //jsonp方法的传输方式必须是GET
3
4 $arr = array(
5 'name' => 'wangshuai',
6 'age' => '22'
7 );
8 //为了不让该函数执行，必须拼接成字符串传回
9 echo $fn.'('.json_encode($arr).')';
10 ?>