正文
ajax跨域jsonp —— javascript
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
目录
-
jsonp是什么
-
jsonp原理
-
原生js使用jsonp
-
jquery使用jsonp
jsonp是什么
jsonp是什么
jsonp原理
原生js使用jsonp
jquery使用jsonp
jsonp作用：解决跨域问题
为什么有跨域问题？
“同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。
这是一个用于隔离潜在恶意文件的重要安全机制。”
同源：相同协议，域名，端口号。
所以当ajax请求的地址，存在协议，域名，端口号不同时，则存在跨域问题，浏览器会报错。
jsonp时解决跨域的其中一种方法。
缺点：只支持GET请求而不支持POST等其它类型的HTTP请求
jsonp原理
-
ajax
请求无法访问不同源的地址
-
jsonp
不是一种新技术，可以说是一种小技巧，换种方式请求
-
首先，
script
标签可以引入不同源的地址，这样不会报错
-
此时，如果
script
标签引入需要调用的后台数据接口，就可以拿到数据了，但是没有直接这么简单
-
先定义获取数据成功后的操作函数，如下面的
success
函数
-
使用
script
标签，引入需要调用的后台数据接口，参数必须附带，获取数据成功后的操作函数
success
原生js使用jsonp
<!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">
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 . ")"; ?>
解析：
- 先定义 success 函数，对获取数据后的操作
- 然后通过 script 标签引入后台数据接口
- 我这里后端使用 php 写的
- 先获取请求参数中 callback 的值，以及其他参数
- 对数据进行获取，编码，拼接字符串，调用 success 函数。
jquery使用jsonp
<!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>
<!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>
