Ajax(四)

了解同源策略和跨域

1. 什么是同源？

协议、域名、端口(默认80)都相同，即两个页面具有相同的源

同源策略：用于隔离潜在恶意文件的重要安全机制。不允许两个非同源网址之间交互。

2. 什么是跨域？

根本原因是因为同源策略限制不允许非同源资源交互

协议、域名、端口不一致就是跨域，也就是非同源。

浏览器其实是允许发起跨域请求的，但是请求回来的数据会被拦截，所以页面无法获取到数据。

3. 解决跨域

最主要两种方法：JSONP和CORS

• JSONP：出现早，兼容性好，但是只支持GET请求（临时方案)

• CORS：出现晚，根本解决方案，支持get post ，但是兼容性不好

4. JSONP实现原理

由于同源策略限制，无法通过Ajax请求非同源的接口数据，但是呢,<script>标签是不受同源策略影响的，可以通过它的src属性去请求非同源的js脚本。所以JSONP实现原理就是通过<script>标签的src属性，请求跨域的数据接口，并通过函数调用形式接收响应回来的数据。JSONP跟Ajax没有任何关系。

5. jQuery提供的$ajax()除了可以发送Ajax请求也可以发送JSONP请求，必须指定dataType:'jsonp'

6. jQuery里JSONP实现过程：

在发起JSONP请求时，动态向<header>中append一个<script>标签，在请求成功后，动态再从<header>中移除

防抖

• 什么是防抖：当事件被触发，延迟N秒后再执行回调，如果在这N秒内事件又被触发，则重新计时。

• 好处：频繁触发事件，会重新计时，最终只会执行一次。

• 应用场景：输入框连续输入最后再发请求，好处是有效减少请求次数，节约请求资源。

实现过程大致是：定义延时器timer，定义防抖函数（将请求放延时器里），为输入框绑定keyup事件（清空timer）重新调防抖函数。

节流

• 什么是节流：可以减少一段时间内事件的触发频率，就是中途触发多次无效。

• 应用场景：鼠标连续触发某事件、懒加载监听触发滚动条位置，好处是降低计算的频率而不必去浪费CPU资源。

• 节流阀：是否被占用。为空表示可以执行下一次操作，否则不行；执行完操作必须将节流阀重置为空，表示可以执行下次操作；每次执行前必须判断节流阀是否为空。

• 使用节流优化鼠标跟随效果：

防抖和节流区别

• 防抖：事件被频繁触发，只有最后一次触发生效，前面N多次触发会被忽略。

• 节流：事件被频繁触发，减少事件触发频率，有选择性地执行一部分操作。

缓存搜索的建议列表

• 步骤：

1.定义全局缓存的对象
2.渲染UI结构。获取用户输入的内容，当作键，需要将数据作为值，进行缓存
3.优先从缓存中获取搜索建议：先判断缓存有没有，有就return渲染，没有就重新获取再去渲染