同源策略和跨域

同源策略和跨域

一、同源策略

两个网页的协议域名和端口都相同，则这两个页面有相同的源

同源策略是浏览器提供的一个安全功能，隔离潜在危险的安全机制

就是说A网站的js不可操作非同源的C的资源交互

二、跨域

只要不是同源就是跨域

跨域的拦截：浏览器正常发起请求，接口正常操作返回数据，跨域回来的数据被浏览器的同源策略拦截，到这页面无法获得数据

实现跨域请求：JSONP（只支持get不支持post）和CORS（W3C标准）

三、JSONP（并非是ajax，而是JS脚本请求）

底层原理就是将函数的定义和调用分离

jquery中的$.ajax()除了能发送真正的Ajax请求还可以发送jsonp请求

其中dataType: ‘jsonp’,是必须要写的

默认情况下，使用jQuery发起JSONP请求，会自动携带一个callback=jQueryxxx的参数, jQueryxxx 是随机生成的一个回调函数名称。如果想要自定义这个回调函数的名字需要加上两个属性jsonp: ‘callback’, jsonpCallback: ‘abcd’,

四、防抖策略

就是再连续点击某个事件时，只保留最后一次的事件发生（就像王者回城中被攻击再次回城一样）

// 1. 定义延时器的Id
      var timer = null
      

      // 2. 定义防抖的函数
      function debounceSearch(kw) {
        timer = setTimeout(function () {
          getSuggestList(kw)
        }, 500)
      }

      // 为输入框绑定 keyup 事件
      $('#ipt').on('keyup', function () {
        // 3. 清空 timer
        clearTimeout(timer)
        ……
        debounceSearch(keywords)
      })

而节流与他相反，节流靠的是节流阀，通过发的开关，控制事件是否可以发生,典型应用在轮播图的动画效果中，详见轮播图