使用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>
