同源策略

• 同源策略是浏览器的一种安全策略, 所谓的同源策略指的是请求的URL地址中的协议/域名和端口都相同, 只要其中一个不同就是跨域
• 协议: http:          https:
• 域名: baidu.com 一级域名     www/edu 二级域名
• 端口:    :8080   :80
• http://www.baidu.com:8080/index.html和http://www.baidu.com:8080/abc.html是同源的
• 影响:
  • 在同源策略下, 浏览器不允许Ajax获取不同源地址的数据
  • 但是在企业开发中, 一般情况下为了保证访问的速度,网页都会单独存储在一个服务器上, 而数据又会单独的存储在另一个服务器上

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>