重点：

　　一、jQuery高级用法

　　1、 jQuery实现文件上传

　　(1)定义UI结构

　　(2)验证是否选择了文件

　　①将 jQuery 对象转化为 DOM 对象，并获取选中的文件列表

　　②判断是否选择了文件

　　(3)向FormData中追加文件

　　var fd=new FormData()

　　fd.append('avatar', files[0])

　　(4)使用jQuery发起上传文件的请求

　　①不修改 Content-Type 属性，使用 FormData 默认的 Content-Type 值

　　contentType: false,

　　②不对 FormData 中的数据进行 url 编码，而是将 FormData 数据原样发送到服务器

　　processData: false,

　　(5)jQuery实现loading效果

　　①ajaxStart(callback)

　　Ajax 请求开始时，执行 ajaxStart 函数。可以在 ajaxStart 的 callback 中显示 loading 效果，示例代码如下：

　　$(document).ajaxStart(function() {$('#loading').show()})

　　注意： $(document).ajaxStart() 函数会监听当前文档内所有的 Ajax 请求。

　　②ajaxStop(callback)

　　Ajax 请求结束时，执行 ajaxStop 函数。可以在 ajaxStop 的 callback 中隐藏 loading 效果，示例代码如下：

　　$(document).ajaxStop(function() {$('#loading').hide()})

　　二、axios

　　1、什么是axios

　　Axios 是专注于网络数据请求的库。

　　相比于原生的 XMLHttpRequest 对象，axios 简单易用。

　　相比于 jQuery，axios 更加轻量化，只专注于网络数据请求。

　　2、axios发起GET请求

　　axios 发起 get 请求的语法：

　　axios.get('url', { params: { /参数/ } }).then(callback)

　　3、axios发起POST请求

　　axios 发起 post 请求的语法：

　　axios.post('url', { /参数/ }).then(callback)

　　4、直接使用axios发起请求

　　axios 也提供了类似于 jQuery 中 $.ajax() 的函数，语法如下：

　　

　　三、同源策略

　　1、什么是同源

　　如果两个页面的协议，域名和端口都相同，则两个页面具有相同的源。

　　默认的端口为80

　　2、什么是同源策略

　　同源策略(英文全称 Same origin policy)是浏览器提供的一个安全功能

　　通俗的理解：浏览器规定，A 网站的 JavaScript，不允许和非同源的网站 C 之间，进行资源的交互

　　四、跨域

　　1、什么是跨域

　　同源指的是两个 URL 的协议、域名、端口一致，反之，则是跨域

　　出现跨域的根本原因：浏览器的同源策略不允许非同源的 URL 之间进行资源的交互

　　2、浏览器对跨域请求的拦截

　　

　　注意：浏览器允许发起跨域请求，但是，跨域请求回来的数据，会被浏览器拦截，无法被页面获取到

　　3、如何实现跨域数据请求

　　现如今，实现跨域数据请求，最主要的两种解决方案，分别是 JSONP 和 CORS。

　　JSONP ：出现的早，兼容性好(兼容低版本IE)。缺点是只支持 GET 请求，不支持 POST 请求。

　　CORS ：出现的较晚，它是 W3C 标准，属于跨域 Ajax 请求的根本解决方案。支持 GET 和 POST 请求。缺点是不兼容某些低版本的浏览器

　　五、JSONP

　　1、什么是JSONP

　　JSONP 是JSON 的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。

　　2、JSONP的实现原理

　　由于浏览器同源策略的限制，网页中无法通过 Ajax 请求非同源的接口数据。但是 script 标签不受浏览器同源策略的影响，可以通过 src 属性，请求非同源的 js 脚本。

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

　　3、JSONP的缺点

　　由于 JSONP 是通过 script 标签的 src 属性，来实现跨域数据获取的，所以，JSONP 只支持 GET 数据请求，不支持 POST 请求。

　　注意： JSONP 和 Ajax 之间没有任何关系，不能把 JSONP 请求数据的方式叫做 Ajax，因为 JSONP 没有用到XMLHttpRequest 这个对象

　　4、jQuery中的JSONP

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

　　(2)如果要使用 $.ajax() 发起 JSONP 请求，必须指定 datatype 为 jsonp

　　dataType: 'jsonp',

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

　　5、自定义参数及回调函数名称

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

　　(1)发送到服务端的参数名称，默认值为 callback

　　jsonp: 'callback',

　　(2)自定义的回调函数名称 ，默认值为 jQueryxxx 格式

　　jsonpCallback: 'abc',

　　6、jQuery中JSONP的实现过程

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

　　(1)在发起 JSONP 请求的时候，动态向 header 标签中 append 一个 script 标签；

　　(2)在 JSONP 请求成功以后，动态从

　　中移除刚才 append 进去的 script 标签；

　　六、防抖

　　1、什么是防抖

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

　　(2)好处：能够保证用户在频繁触发某些事件的时候，不会频繁的执行回调，只会被执行一次

　　2、防抖的应用场景

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

　　七、案例 – 淘宝搜索

　　(1)获取用户输入的搜索关键词

　　为了获取到用户每次按下键盘输入的内容，需要监听输入框的 keyup 事件

　　(2)封装getSuggestList函数

　　将获取搜索建议列表的代码，封装到 getSuggestList 函数中

　　指定请求的 URL 地址，其中，q 是用户输入的关键字

　　url: 'https://suggest.taobao.com/sug?q=' + kw,

　　(3)渲染建议列表的UI结构

　　①定义搜索建议列表

　　②定义模板结构

　　创建script标签

　　设置type属性为 text/html 设置模板id

　　利用 each 遍历结构

　　③定义渲染模板结构的函数

　　定义函数，接收一个参数，就是服务器返回的数据

　　判断返回的数据长度是否大于0

　　如果没有，将页面的列表清空，并且进行隐藏

　　如果有数据，调用模板的 template 函数，传入id和数据

　　返回渲染好的html字符串，然后放入容器中

　　(4)搜索关键词为空时隐藏搜索建议列表

　　①注册keyup事件

　　②判断输入框的内容是否为空

　　③如果为空隐藏列表

　　(5)实现输入框的防抖

　　①防抖动的 timer

　　②定义防抖的函数，函数里面定义一个延时器，在演示器里面调用发起JSONP的请求

　　③在触发 keyup 事件时，立即清空 timer，然后调用防抖的函数

　　(6)缓存搜索的建议列表

　　①定义全局缓存对象

　　var cacheObj={}

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

　　键就是用户输入的关键字，值就是服务器返回的value

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

　　在发起请求之前，先判断缓存中是否有数据

　　八、节流

　　1、什么是节流

　　节流策略(throttle)，顾名思义，可以减少一段时间内事件的触发频率 。

　　2、节流的应用场景

　　(1)鼠标连续不断地触发某事件(如点击)，只在单位时间内只触发一次；

　　(2)懒加载时要监听计算滚动条的位置，但不必每次滑动都触发，可以降低计算的频率，而不必去浪费 CPU 资源；

　　3、节流阀的概念

　　(1)节流阀为空，表示可以执行下次操作；不为空，表示不能执行下次操作。

　　(2)当前操作执行完，必须将节流阀重置为空，表示可以执行下次操作了。

　　(3)每次执行操作前，必须先判断节流阀是否为空。

　　4、节流案例 – 鼠标跟随效果

　　(1)不使用节流时实现鼠标跟随效果

　　①获取图片元素

　　②注册 mousemove事件

　　③设置图片的位置

　　(2)使用节流优化鼠标跟随效果

　　①预定义一个 timer 节流阀

　　②当设置了鼠标跟随效果后，清空 timer 节流阀，方便下次开启延时器

　　③执行事件的时候判断节流阀是否为空，如果不为空，则证明距离上次执行间隔不足16毫秒

　　5、总结防抖和节流的区别

　　(1)防抖：如果事件被频繁触发，防抖能保证只有最有一次触发生效！前面 N 多次的触发都会被忽略！

　　(2)节流：如果事件被频繁触发，节流能够减少事件触发的频率，因此，节流是有选择性地执行一部分事件

　　有关模板引擎、JSON以及Level2新特性解析请点击a=href"https://www.cnblogs.com/kk199578/p/14259358.html"