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 ?>