社区微信群开通啦，扫一扫抢先加入社区官方微信群
社区微信群
社区微信群开通啦，扫一扫抢先加入社区官方微信群
社区微信群
jsonp作用：解决跨域问题
为什么有跨域问题？
“同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。
这是一个用于隔离潜在恶意文件的重要安全机制。”
同源：相同协议，域名，端口号。
所以当ajax请求的地址，存在协议，域名，端口号不同时，则存在跨域问题，浏览器会报错。
jsonp时解决跨域的其中一种方法。
缺点：只支持GET请求而不支持POST等其它类型的HTTP请求
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h3>控制台</h3>
<script type="text/javascript">
function success(data){
console.log('数据：', data);
// 之后对数据的处理
}
</script>
<script src="http://localhost/aa.php?callback=success¶m1=val1"></script>
</body>
</html>
<?php
// aa.php // 获取请求参数里面的callback，获取数据成功后调用的函数名 $callback = $_GET['callback']; $param1 = $_GET['param1']; $res = array( array("id"=>1, "name"=>"name1"), array("id"=>2, "name"=>"name2") ); $res = json_encode($res); echo $callback . "(" . $res . ")"; ?>
解析：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h3>控制台</h3>
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript">
$.ajax({
type: "get",
url: "http://localhost/aa.php?param1=val1",
dataType: "jsonp",
jsonp: "callback",
// 传递给后台接口，用以获得jsonp回调函数名的参数名(一般默认为:callback)
jsonpCallback:"flightHandler",
// 自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，
// 也可以写"?"，jQuery会自动为你处理数据
success: function(data){
console.log('数据：', data);
// 之后对数据的处理
},
error: function(){
alert('fail');
}
});
</script>
</body>
</html>
如果觉得我的文章对您有用，请随意打赏。你的支持将鼓励我继续创作！
