同源策略
jsonp
- 由于同源策略导致的无法请求数据, 我们通常用jsonp来解决这个问题
- 原理:
- 在同一个界面中可以定义多个script标签, 并且多个script中的数据可以相互访问, 默认情况下是按照从上至下的顺序加载script标签, 所以后定义的script标签可以访问先定义script标签中的数据
- 由于script标签的src可以从远程服务器加载数据, 并且没有同源的限制, 所以在企业开发中先获取不同源的数据, 都是通过script标签的src属性来获取的,那这种获取不同源数据的方式, 我们就称之为jsonp
- 问题:
- 回调函数的函数名称不能写死
- 要解决代码加载的先后顺序问题
- 解决方案:
- 解决函数不写死的问题, 我们通常发送请求, 通过key让后端获取
- 解决代码加载先后顺序问题,我们可以通过自己创建标签append的方式解决,这样实现了异步加载,代码如下
var srpt = document.createElement("script");
srpt.src = "请求的地址?callback = 函数名字";
document.body.appendChild(srpt);
function 函数名字(){
......
}
jQuery中使用jsonp
<script>
$.ajax({
url: "请求地址",
type: "请求方式",
dataType: "jsonp(请求的方式)",
jsonp:"后端人员要求填的回调函数的key(相当于callback)"
jsonpCallback: "回调函数名称"
success: function(返回到的数据){
成功以后执行的内容
}
error: function(失败后的数据){
失败后执行的东西
}
})
</script>
