使用Javascript的JSONP原理
jQuery的JSONP的方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <!--类型:请求方式GET / POST 网址:请求地址 async:布尔类型,默认为true表示请求是否为异步,如果为false表示为同步。 数据类型:返回的数据类型 JSONP:传递给请求处理程序或页面的,用以获得JSONP回调函数名的参数名(一般默认为:回调) jsonpCallback: “?” 自定义的JSONP回调函数名称,默认为jQuery的自动生成的随机函数名,也可以写,jQuery的会自动为你处理数据 成功:调用成功执行的函数 错误:异常处理函数--> <body> </body> <script type="text/javascript"> $.ajax({ url:'index.php', type:'get', dataType:'jsonp', //jsonp:'JSON_CALLBACK', jsonpCallback:'JSON_CALLBACK', success:function(data){ console.log(data) } }) </script> </html>
原生jsonp方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <!--首先JSON是一种基于文本的数据交换方式,叫做或者描述数据格式--> <!--当一个|网页在请求的JavaScript文件时则不受是否跨域的影响,凡是拥有” SRC”这个属性的标签都拥有跨域的能力,--> <!--比如<script>、<img>、<iframe>--> <!--所以我们这里运用了脚本标签的跨域能力,让它用一个回调函数包裹着一段JSON格式的数据,--> <!--当该数据返回到前端页面的时候,再我们这个执行就函数可以把数据读取出来--> <!--前端代码--> <!--jsonp.html--> <body> <button onclick="jsonpServer('jsonp.php')">JSONP</button> </body> <script> function jsonpServer(url) { var script = document.createElement("script"); script.setAttribute("type", "text/javascript"); script.setAttribute("src", url); document.body.appendChild(script); } function JSON_CALLBACK(data) { console.log(data); } </script> </html>