jsonp跨域问题
什么是跨域? 为页面安全考虑,页面中的JavaScript无法访问其服务器上的数据,即‘同源策略’,而跨域是通过某些手段来绕过同源策略限制,实现不同服务器间通信。 什么是jsonp? json是一种轻量级数据交互格式,而jsonp则是json的一种使用模式,通过这种模式实现数据的跨域获取。 如何实现跨域? 1)、用script标签 2)、用script标签加载资源是没有跨域问题 3)、通过jsonp实现ajax跨域请求 方法一:?在资源加载进来之前定义好一个函数,这个函数接收一个参数(数据),函数里面利用这个参数做一些事情 demo1案例,请求的数据格式为.txt文件 txt文件的内容为: fn([2,3,4]); ?html代码: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=8"> <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"> <title>Document</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> function fn(data){ console.log(data); } </script> </head> <body> <button class="btn">ajax请求</button> Jsonp:json with padding 1.script标签 2.用script标签加载资源是没有跨域问题; 方法一: 在资源加载进来之前定义好一个函数,这个函数接收一个参数(数据),函数里面利用这个参数做一些事情 然后需要时通过动态加载script标签加载对应远程文件资源,当远程的文件资源被加载进来的时候,就会去执行前面定义好的函数,并把数据当做这个函数的参数传进去 <br> </body> <script> $(function(){ $(‘.btn‘).click(function(event) { // 当按钮点击时,再去加载资源 var oScript = document.createElement(‘script‘); oScript.src = ‘2.txt‘; document.body.appendChild(oScript); }); </script> </html> ?运行结果为: ? 点击ajax请求后控制台打印出: demo2,服务器端数据为getData.php,内容为: <?php $arr1 = array(‘111‘,‘2222‘,‘3333‘,‘444‘,‘555‘); echo "fn(".json_encode($arr1).");"; ?> ?html代码: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=8"> <meta name="viewport" content="width=device-width,minimum-scale=1.0"> <title>Document</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> function fn(res){ var html = ‘‘; var oul = document.getElementById(‘ul1‘); for(var i = 0;i < res.length;i++){ html +=‘<li>‘+res[i]+‘</li>‘; } oul.innerHTML = html; } </script> </head> <body> <button id="btn1">按钮1</button> <ul id="ul1"> </ul> </body> <script> $(function(){ $(‘#btn1‘).click(function(event) { var myScript = document.createElement(‘script‘); myScript.src = ‘getData.php‘; document.body.appendChild(myScript); }); }); </script> </html> 运行结果为: 当点击按钮1时,获取php中的数据,并渲染到页面,结果如下: demo3,服务器端接口为 data.php,其内容为: <?php $t = isset($_GET[‘t‘])?$_GET[‘t‘]:‘num‘; $callback = isset($_GET[‘callback‘])?$_GET[‘callback‘]:‘fn1‘;//解决一个接口,在页面中多次调用问题 $arr1 = array(‘111‘,‘4444‘,‘5555‘,‘66668‘); $arr2 = array(‘acs‘,‘bcs‘,‘ccs‘,‘dcs‘,‘ecs‘,‘fccs‘); if ($t == ‘num‘) { $data = json_encode($arr1); // echo "fn1(".$data.")"; }else{ $data = json_encode($arr2); // echo "fn2(".$data.")"; } echo $callback."(".$data.")"; ?> ?html代码为: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=8"> <meta name="viewport" content="width=device-width,minimum-scale=1.0"> <title>Document</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> function fn1(res){ var html = ‘‘; var oul = document.getElementById(‘ul1‘); for(var i = 0;i < res.length;i++){ html +=‘<li>‘+res[i]+‘</li>‘; } oul.innerHTML = html; } function fn2(res){ var html = ‘‘; var oul2 = document.getElementById(‘ul2‘); for(var i = 0;i < res.length;i++){ html +=‘<li>‘+res[i]+‘</li>‘; } oul2.innerHTML = html; } function fn3(res){ var html = ‘‘; var oul3 = document.getElementById(‘ul3‘); for(var i = 0;i < res.length;i++){ html +=‘<li>‘+res[i]+‘</li>‘; } oul3.innerHTML = html; } </script> </head> <body> ?运行结果: 参考网址:http://www.php.cn/code/24227.html (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |