Ajax-同源策略、跨域、获取用户输入的搜索关键词、防抖、节流、HTTP协议、通信 三要素、HTTP 的请求方法、HTTP 状态码-五种类型

同源策略

同源： 如果 两个页面(URL) 的 协议，域名和端口 都相同。

同源策略： (英语全称 Same origin pollicy) 是 浏览器 提供的一个 安全功能 。
通俗理解： 浏览器规定，A 网站的 JavaScript，不允许和 非同源 的网站C之间，进行资源的交互。

跨域

跨域： 如果 两个页面(URL) 的 协议，域名和端口 有一项或多项不相同。

实现跨域数据请求-两种解决方案

1. JSONP：兼容低版本IE，只支持 GET 请求，不支持 POST 请求。注：JSONP 和 Ajax 之间没有任何关系，不能把 JSONP 请求数据的方式叫做 Ajax，因为 JSONP 没有用到 XMLHttpRequest(XHR) 这个对象。
2. CORS：不兼容低版本IE，支持 GET 和 POST 请求。W3C标准，属于跨域 Ajax 请求的根本解决方案。

JSONP的实现原理

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

淘宝搜索

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

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

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

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

//代码
$('#ipt').on('keyup', function () {
    //获取用户输入的内容
    var keywords = $(this).val().trim()
    //判断用户输入的内容是否为空
    if (keywords.length <= 0) {
        //如果关键词为空，则清空后隐藏搜索建议列表
        return $('#suggest-list').empty().hide()
    }
    getSuggestList(keywords)
})

防抖

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

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

节流

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

节流策略（throttle） 可以减少一段时间内事件的触发频率。

节流阀 为空，表示 可以执行下次操作 ；不为空，表示 不能执行下次操作 。
当前操作执行完，必须将节流阀 重置为空 ，表示可以执行下次操作。

HTTP协议

超文本传输协议（HTTP协议）：网页内容的传输协议。规定了客户端与服务器之间进行网页内容传输时，所必须遵守的传输格式。

通信 三要素

主体、内容、方式

HTTP 的请求方法

方法	描述
Get	(查询)发送请求来获得服务器上的资源，请求体中不会包含请求数据，请求数据放在协议头中。
POST	(新增)向服务器提交资源（例如提交表单或上传文件）。数据被包含在请求体中提交给服务器。
PUT	(修改)向服务器提交资源，并使用提交的新资源，替换服务器对应的旧资源。
DELETE	(删除)请求服务器删除指定的资源。

HTTP 状态码-五种类型

HTTP 状态码由 三个 十进制数字 组成，第一个 十进制数字定义了 状态码类型 ，后 两个 数字用来对状态码进行 细分。

状态码	描述
1**	信息，服务器收到请求，需要请求者继续执行操作（实际开发中很少遇到 1** 类型的状态码）
2**	成功，操作被成功接受并处理
3**	重定向，需要进一步的操作以完成请求
4**	客户端错误，请求包含语法错误或无法完成请求
5**	服务器错误，服务器在处理请求的过程中发生了错误