什么是跨域?
为页面安全考虑,页面中的JavaScript无法访问其服务器上的数据,即‘同源策略’,而跨域是通过某些手段来绕过同源策略限制,实现不同服务器间通信。
什么是jsonp?
json是一种轻量级数据交互格式,而jsonp则是json的一种使用模式,通过这种模式实现数据的跨域获取。
如何实现跨域?
1)、用script标签
2)、用script标签加载资源是没有跨域问题
3)、通过jsonp实现ajax跨域请求
方法一: 在资源加载进来之前定义好一个函数,这个函数接收一个参数(数据),函数里面利用这个参数做一些事情
然后需要时通过动态加载script标签加载对应远程文件资源,当远程的文件资源被加载进来的时候,就会去执行前面定义好的函数,并把数据当做这个函数的参数传进去
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, 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(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','2222','3333','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, 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 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>
<button class="btn" >加载数字</button> <ul id="ul1"> </ul> <br> <button id="btn1" >按钮2加载字母</button> <ul id="ul2"> </ul> <button id="btn3" >按钮3加载数字</button> <ul id="ul3"> </ul>
<!-- 页面添加按钮,只需要在script中添加对应的函数即可 --> </body>
<script> $(function(){ $('.btn').click(function(event) { // 当按钮点击时,再去加载资源 var oScript = document.createElement('script'); oScript.src = 'data.php?callback=fn1'; document.body.appendChild(oScript); }); $('#btn1').click(function(event) { var myScript = document.createElement('script'); myScript.src = 'data.php?t=str&callback=fn2'; document.body.appendChild(myScript); }); $('#btn3').click(function(event) { var myScript = document.createElement('script'); myScript.src = 'data.php?callback=fn3'; document.body.appendChild(myScript); }); }); </script> </html>
运行结果:
参考网址:http://www.php.cn/code/24227.html