前言

————同源策略，跨域，JSONP的实现原理，防抖和节流。

了解同源策略和跨域

同源指的是如果两个页面的协议，域名，端口都相同，则两个页面具有相同的源（如果没有给出端口号，默认是80端口）。

同源策略是浏览器提供的一个安全功能

跨域是指两个URL的协议，域名，端口有一个或一个以上不一致。出现跨域的根本原因：浏览器的同源策略不允许非同源的URL之间进行资源的交互
（浏览器允许发起跨域请求，但是，跨域请求回来的数据会被浏览器拦截，无法被页面获取到）

如何实现跨域数据请求解决方案：JSONP和CORS
JSONP：出现的早，兼容性好，缺点是只支持GET请求，不支持POST请求；
CORS：出现的较晚，W3C标准，两种请求都支持，缺点是不兼容低版本浏览器

JSONP的实现原理

JSONP的实现原理就是通过<script>标签的src属性，请求跨域的数据接口，并通过函数调用的形式，接收跨域接口响应回来的数据

jQuery中的JSONP

jQuery 提供的 $.ajax() 函数，除了可以发起真正的 Ajax 数据请求之外，还能够发起 JSONP 数据请求

$.ajax({
  url: 'http://ajax.frontend.itheima.net:3006/api/jsonp?name=zs&age=20',
  // 如果要使用 $.ajax() 发起 JSONP 请求，必须指定 datatype 为 jsonp
  dataType: 'jsonp',
   success: function(res) {
   console.log(res)
}
})

在使用 jQuery 发起 JSONP 请求时，如果想要自定义 JSONP 的参数以及回调函数名称，可以通过如下两个参数来指定：

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

})

jQuery中JSONP的实现过程

jQuery 中的 JSONP，也是通过 <script> 标签的 src 属性实现跨域数据访问的，只不过，jQuery 采用的是动态创建和移除<script>标签的方式，来发起 JSONP 数据请求。

在发起 JSONP 请求的时候，动态向 <header> 中 append 一个 <script> 标签；
在 JSONP 请求成功以后，动态从 <header> 中移除刚才 append 进去的 <script> 标签；

防抖与节流

防抖

———防抖策略是当事件被触发后，延迟n秒后再执行回调，如果在这n秒内事件又被触发，则重新计时。

防抖的应用场景：用户在输入框中连续输入一串字符是时，可以通过防抖策略，只在输入完成时，才执行查询的请求，这样可以有效减少请求次数，节约请求资源。

var timer = null                    // 1. 防抖动的 timer
  function debounceSearch(keywords) { // 2. 定义防抖的函数
  timer = setTimeout(function() {
  // 发起 JSONP 请求
  getSuggestList(keywords)
  }, 500)
  }

  $('#ipt').on('keyup', function() { 
  // 3. 在触发 keyup 事件时，立即清空 timer    
    clearTimeout(timer)
   debounceSearch(keywords)
})

缓存搜索的建议列表

1.定义全局缓存对象

// 缓存对象 var cacheObj = {}

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

 // 渲染建议列表
 function renderSuggestList(res) {
   // ...省略其他代码
   // 将搜索的结果，添加到缓存对象中
    var k = $('#ipt').val().trim()
    cacheObj[k] = res
 }

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

 // 监听文本框的 keyup 事件
 $('#ipt').on('keyup', function() {
    // ...省略其他代码

    // 优先从缓存中获取搜索建议
    if (cacheObj[keywords]) {
       return renderSuggestList(cacheObj[keywords])
    }
    // 获取搜索建议列表
    debounceSearch(keywords)
  })