跨域和同源

同源

同源：两个页面的协议、域名和端口相同，则认为他们具有相同的源

示例：对http://www.test.com/index.html页面进行同源检测

URL	是否同源	原因
http://www.test.com/other.html	是	同源（端口、域名、端口相同）
https://www.test.com/about.html	否	协议不同（http与https）
http://blog.test.com/movie.html	否	域名不同（www.test.com与blog.test.com）
http://www.test.com:7001/home.html	否	端口不同（默认的80端口与7001端口）
http://www.test.com:80/main.html	是	同源（端口、域名、端口相同）

同源策略

全称Same origin policy 是浏览器提供的一个安全功能

目的：隔离一些潜在的恶意文件

浏览器规定A网站的JavaScript不允许和非同源的网站c之间进行资源的交互

跨域

不同源就是跨域 根本原因就是浏览器的同源策略导致的

浏览器对跨域请求的拦截

Ajax能对服务器发起请求，服务器也能正常接收并返回，但是返回到浏览器被同源策略拦截，无法被页面获取

实现跨域数据请求

最主要的两种解决方案是JSONP和CORS

JSONP：出现早，兼容性好 缺点是只支持GET请求

CORS：W3C标准，属于跨域Ajax请求的根本解决方案，不兼容低版本浏览器

JSONP（JSON with padding）

是JSON的一种‘使用模式’，用于解决主流浏览器的跨域数据访问问题

实现原理：（因为<script>标签不受同源策略的影响）

所以可以通过<script>标签src属性，请求跨域的数据接口，通过函数调用的形式，接收 跨域接口响应回来的数据

示例：

<script>
        function success(data) {
            console.log('JSONP响应回来的数据是：');
            console.log(data);
        }
</script>
    <script src="http://ajax.frontend.itheima.net:3006/api/jsonp?callback=success&name=ls&age=30"></script>

注：JSONP和Ajax之间没有任何关系，不能把JSONP请求数据的方式叫做Ajax，因为JSONP没有用到XMLHttpRequest这个对象，发起的是一种js脚本类的请求

jQuery中的JSONP

示例：

 // 发起JSONP请求
 $.ajax({
   url: 'http://ajax.frontend.itheima.net:3006/api/jsonp?name=zs&age=20',
   // 代表我们要发起JSONP请求
   dataType: 'jsonp',
   //发送到服务器端的参数名称，默认值为 callback
   jsonp:'callback',
   //自定义的回调函数名称，默认值为jQueryxxx格式
   jsonpCallback:'abc',
   success: function(res) {
      console.log(res);
    }
 })

默认情况下，使用jQuery发起JSONP请求，会自动携带一个callback=jQueryxxx的参数，jQuery是随机生成的一个回调函数名称

实现过程：jQuery采用的是动态创建和移除<script>标签的方式，发起JSONP请求

在发起JSONP请求的时候，动态向<header>中append一个<script>标签

在JSONP请求成功以后，动态从<header>中移除刚才append进去的<script>标签

防抖

防抖策略（debounce）

是当事件被触发后，延迟n秒后再执行回调，如果在这n秒内事件又被触发则重新计时（相当于LOL回城被打断再回城）

应用场景：

输入框防抖，通过防抖策略只有用户输入完成后才执行查询请求，可以有效减少请求次数，节约请求资源

实现输入框的防抖：

  // 1. 定义延时器的Id（防抖动的 timer）
  var timer = null
  // 2. 定义防抖的函数
  function debounceSearch(kw) {
    timer = setTimeout(function () {
      getSuggestList(kw)
    }, 500)
  }
  $('#ipt').on('keyup', function () {
  // 3. 触发keyup事件时，清空 timer
  clearTimeout(timer)
  //...省略其他代码
  debounceSearch(keywords)
  })

缓存搜索的建议列表

1、定义一个全局缓存对象

// 定义全局缓存对象
var cacheObj = {}

2、将搜索结果保存到缓存对象中

// 1. 获取到用户输入的内容，当做键
var k = $('#ipt').val().trim()
// 2. 需要将数据作为值，进行缓存
cacheObj[k] = res

3、优先从缓存中获取搜索建议

// 在获取搜索列表前先判断缓存中是否有数据
if (cacheObj[keywords]) {
   return renderSuggestList(cacheObj[keywords])
}

节流

节流策略：

可以减少一段时间内事件的触发频率（跟技能冷却一样，冷却时怎么点击都没用）

应用场景：

1、鼠标连续触发某事件，单位时间内只触发一次

2、懒加载时要监听计算滚动条的位置，但不必每次滑动都触发，可以降低计算的频率

节流阀：设置两种状态控制操作是否执行，每次执行操作前都要判断

防抖和节流的区别

防抖：只有最后一次触发生效

节流：减少事件触发的频率，有选择性的执行一部分事件