Jsonp解决跨域核心原理解析:
- 动态加载服务端返回的js代码
- 执行服务端返回的可执行js代码
- 请求方式为get
- 使用script标签的src属性加载另一个域名的js资源
使用 JSONP模式来请求数据的时候服务端返回的是一段可执行的 JavaScript代码。因为jsonp 跨域的原理就是用的动态加载 script的src ,所以我们只能把参数通过 url的方式传递,所以jsonp的 type类型只能是get示例:
以下两个js脚本等价:
1.html_jsonp.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>ehz-app</title>
<script type="text/javascript">
function resolveJosn(result) { //浏览器端代码
console.log(result.name);
}
</script>
<script type="text/javascript" src="http://192.168.1.10/php_demo/php_jsonp.php?callback=resolveJosn"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
2.html_jsonp.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>ehz-app</title>
<script type="text/javascript">
function resolveJosn(result) { //浏览器端代码
console.log(result.name);
}
var jsonpScript= document.createElement("script");
jsonpScript.type = "text/javascript";
jsonpScript.src = "http://192.168.1.10/php_demo/php_jsonp.php?callback=resolveJosn";
document.getElementsByTagName("head")[0].appendChild(jsonpScript);
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
服务端php代码示例:
php_jsonp.php
<?php
$callback = $_GET['callback']; // 获取回调函数名
$arr = array("name" => "alsy", "age" => "20"); // 要请求的数据
echo $callback."(". json_encode($arr) .");"; // 输出
?>
执行效果图: