共计 2189 个字符，预计需要花费 6 分钟才能阅读完成。
同源和跨域
同源
同源策略是浏览器的一种安全策略，所谓同源是指，域名，协议，端口完全相同。
跨域问题的解决方案
从我自己的网站访问别人网站的内容，就叫跨域。
出于安全性考虑，浏览器不允许 ajax 跨域获取数据。
-
iframe：处于安全性考虑，浏览器的开发厂商已经禁止了这种方式。
-
JSONP：script 标签的 src 属性传递数据。
JSONP
JSONP(JSON with Padding)：带补丁的 json，本质是利用了 <script src=""></script> 标签具有可跨域的特性，由服务端返回一个预先定义好的 JS 函数的调用，并且将服务器数据以该函数参数的形式传递过来。此方法需要前后端配合完成。
我们知道，html 标签的 src 属性是支持跨域的：
<img src="http://img.smyhvae.com/2016040101.jpg" alt="">
jsonp 就是利用这个特性实现的跨域，但用的是 script 标签。如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- jsonp 就是 利用 src，实现的跨域 用的是 script 标签 -->
<script type="text/javascript" src='http://192.168.141.137/2018-02-28/myData.php'></script>
</body>
</html>
上方那一行的代码，意思是：刷新 A 服务器上的 index 页面后，会去请求 B 服务器上的 myData.php 这个页面。而且请求的方式是 get 请求。
但是 B 服务器上的页面不是你想请求就可以请求的，大家一起配合才可以。
具体实现步骤：
需要首先声明的是，jsonp 只能通过 GET 方式进行请求。
（1）A 客户端的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
// 定义 eatFood() 方法
function fn(data) {console.log('我被调用了哦');
console.log(data);
}
</script>
<!-- 使用 script 标签 发送了 get 请求 去到了一个 php 页面 -->
<script type="text/javascript" src='http://192.168.141.137/01.php?callback1=fn'></script>
我们来分析上方代码中的最后一行的那个 url：A 客户端请求的是 B 服务器上的 01.php 页面。url 里有个 callback1=fn，意思是：callback1 是 A 和 B 之间的约定，约定后，将执行方法 fn。
其实，fn 方法已经在最后一行代码中执行了。只不过，fn 方法里的 data 数据，是从 B 服务器中获取的。
（2）B 服务器端的代码：
<?php
$mycallBack = $_GET['callback1'];
$arr = array("zhangsan","lisi","zhaoliu");
echo $mycallBack."(".json_encode($arr).")"; // 字符串拼接
?>
代码解释：
第一行的 callback1 是 A 和 B 之间的约定，二者必须一致。
echo 语句中输出的内容，即要返回给 A 客户端的内容，此内容会保存在 A 客户端的 fn 方法的 data 里。data[0] 指的是 zhangsan。
json_encode 指的是，将 php 对象转化为 json。
刷新 A 页面，输出结果为：
mycallBack(["zhangsan","lisi","zhaoliu"])
jQuery 中的 JSONP
我们知道，jQuery 中发送 Ajax 请求，格式是：
$("#btn").click(function(){
$.ajax({
url:"./data.php?callback1=fn",
dataType:"jsonp",
type:"get",
//jsonp:"callback1", // 传递给 B 服务器的回调函数的名字（默认为 callback）//jsonCallBack:"fn" // 自定义的函数名称。默认为 jQuery 自动生成的随机函数名
success:function(data){alert(data);
//$("#showInfo").html(data);
},
error:function(e){console.log(e);
}
});
});
那如果数据是 JSONP，上方代码则改为：
$("#btn").click(function(){
$.ajax({
url:"./data.php?fn",
dataType:"text",
type:"get",
success:function(data){alert(data);
//$("#showInfo").html(data);
},
error:function(e){console.log(e);
}
});
});
参考链接
参考链接：https://www.cnblogs.com/2050/p/3191744.html
