上网的本质目的：通过互联网的形式来获取和消费资源
上网过程中，负责存放和对外提供资源的电脑，叫做服务器。
上网过程中，负责获取和消费资源的电脑，叫做客户端。
URL（全称是UniformResourceLocator）中文叫统一资源定位符，用于标识互联网上每个资源的唯一存放位置。
浏览器只有通过URL地址，才能正确定位资源的存放位置，从而成功访问到对应的资源。
常见的URL举例：
http://www.cnblogs.com/liulongbinblogs/p/11649393.html
URL地址一般由三部分组成：
- 客户端与服务器之间的通信协议
- 存有该资源的服务器名称
- 资源在服务器上具体的存放位置
注意：
客户端与服务器之间的通信过程，分为 请求 – 处理 – 响应 三个步骤。
网页中的每一个资源，都是通过 请求 – 处理 – 响应 的方式从服务器获取回来的。
网页中的数据，也是服务器对外提供的一种资源。例如股票数据、各行业排行榜等。
数据，也是服务器对外提供的一种资源。只要是资源，必然要通过 请求 – 处理 – 响应 的方式进行获取。
如果要在网页中请求服务器上的数据资源，则需要用到 XMLHttpRequest 对象。
XMLHttpRequest（简称 xhr）是浏览器提供的 js 成员，通过它，可以请求服务器上的数据资源。
最简单的用法 var xhrObj = new XMLHttpRequest()
客户端请求服务器时，请求的方式有很多种，最常见的两种请求方式分别为 get 和 post 请求。
get 请求通常用于获取服务端资源（向服务器要资源）
例如：根据 URL 地址，从服务器获取 HTML 文件、css 文件、js文件、图片文件、数据资源等
post 请求通常用于向服务器提交数据（往服务器发送资源）
例如：登录时向服务器提交的登录信息、注册时向服务器提交的注册信息、添加用户时向服务器提交的用户信息等各种数据提交操作
Ajax 的全称是 Asynchronous Javascript And XML（异步 JavaScript 和 XML）。
通俗的理解：在网页中利用 XMLHttpRequest 对象和服务器进行数据交互的方式，就是Ajax。
Ajax能让我们轻松实现网页与服务器之间的数据交互。
Ajax的原理是通过XmlHttpRequest对象向服务器发出异步请求，从服务器获得所需要的数据，然后用JavaScript来操作DOM而更新页面。
浏览器有内置的XMLHttpRequest。
创建XMLHttpRequest对象的语法：
XMLHttpRequest对象的常用属性和事件：
当一个XMLHttpRequest对象被创立后，readyState属性表示当前对象处于什么状态，可以通过对该属性的访问来判此次请求的状态，然后做出对应的操作。具体属性值如下：
- 0：未初始化状态。已创建了一个XMLHttpRequest对象，但未初始化
- 1：准备发送状态。已调用了XMLHttpRequest对象的open()方法，并且XMLHttpRequest对象已经准备将一个请求发送到服务器。
- 2：已发送状态。已经通过send()方法将一个请求发送到了服务器，等待响应。
- 3：正在接收状态。此时已经接收到HTTP响应的头部信息，但是消息体部分还没有完全接收到。
- 4：完成响应状态。此时已经完成了HttpResponse响应的接收。
responseText属性包含客户端接收到的HTTP响应的文本内容。当readyState为0、1、2时，responseText属性包含一个空字符串。当readyState为3时，响应中包含客户端还没有完成的响应信息。当readyState为4时，responseText属性包含完整的响应信息。
只有当readyState为4，并且响应头部的Content-Type的MIME类型被指定为XML（text/xml或application/xml）时，该属性才会有值并被解析为一个XML文档，否则该属性为null。
买哦书了HTTP状态的代码。仅当readyState为3（正在接收中）或4（已加载）时，才能对此属性进行访问！否则会产生异常。
当readyState属性发生改变时，XMLHttpRequest对象调用 onreadystatechange事件。
用于设置异步请求目标的URL、请求方法以及其他参数信息
open("method","URL"[,asyncFlag[,"username"[,"password"]]])
| 参数 | 说明 |
|---|---|
| method | 用于指定请求类型，一般为GET和POST |
| URL | 用于指定请求地址，可以使用绝对地址和相对地址，并且可以传递查询字符串 |
| asyncFlag | 可选参数，用于指定请求方式，异步请求为true（默认），同步请求为false |
| userName | 可选参数，用于指定请求用户名 |
| password | 可选参数，用于指定请求密码 |
调用send()方法后，就可以按照open()方法设定的参数发送请求。当open()方法中async属性设置为true时，send()方法调用后立即返回，否则将会中断，直到请求返回。需要注意的是，send()方法必须在readyState属性为1时才能调用；在调用send( )方法以后到接收响应信息之间的时间内，readyState属性值将被设成2；一旦接收到响应信息，readyState属性将被设为3；当响应接收完成时，readyState属性值才会被设定为4。如果send(data)方法中data参数的类型为DOMString，数据将被编码成UTF-8；如果是Document类型,将使用由data.xmlEncoding指定的编码来串行化该数据。
该方法可以暂停一个HttpRequest的发送或者HttpResponse的接收，并且将XMLHttpRequest对象设置为初始化状态。
在调用send()方法之前，应该先使用setRequestHeader()方法设置请求的Content-Type头部信息。当readyState属性为1时，在调用open()方法后再调用这个方法，否则将得到一个异常。setRequestHeader(header,value)方法包含两个参数，第一个参数是header键名称，第二个参数是键值。
该方法用于检索响应的头部值。仅当readyState属性是3或者4(既响应头部可用以后)时才可以调用该方法，否则返回一个空字符串。此外，还可以通过getAllResponseHeader()方法获取所有的HttpResponse的头部信息。
Ajax可以通过XMLHttpRequest对象实现用异步方式在后台发送请求。通常情况下，Ajax发送请求有两种，一种是GET请求，一种是POST请求。都具有以下四个步骤：
创建一个跨浏览器的XMLHttpRequest对象，并且判断XMLHttpRequest对象的实例是否成功，若不成功则给出提示。
在创建时，需要指定发送请求的方式（GET或POST），以及设置是否采用异步方式发送请求。
XMLHttpRequest对象的send()方法可以实现向服务器发送请求，该方法需要传递一个参数，如果发送的是GET请求，可以将该参数设为null。
注意：如果发起的是post请求，需要调用setRequestHeader()设置请求头，否则无法获取参数
浏览器中提供的 XMLHttpRequest 用法比较复杂，所以 jQuery 对 XMLHttpRequest 进行了封装，提供了一系列 Ajax 相关的函数，极大地降低了 Ajax 的使用难度。
jQuery 中发起 Ajax 请求最常用的三个方法如下：
-
$.get()
-
$.post()
-
$.ajax()
jQuery 中 $.get() 函数的功能单一，专门用来发起 get 请求，从而将服务器上的资源请求到客户端来进行使用。
$.get() 函数的语法如下：
其中，三个参数各自代表的含义如下：
使用 $.get() 函数发起不带参数的请求时，直接提供请求的 URL 地址和请求成功之后的回调函数即可，示例代码如下：
使用 $.get() 函数发起带参数的请求时，示例代码如下：
jQuery 中 $.post() 函数的功能单一，专门用来发起 post 请求，从而向服务器提交数据。
$.post() 函数的语法如下：
其中，三个参数各自代表的含义如下：
使用 $post() 向服务器提交数据的示例代码如下：
jQuery 中提供的 $.ajax() 函数，是一个功能比较综合的函数，它允许我们对 Ajax 请求进行更详细的配置。
$.ajax() 函数的基本语法如下：
常用参数说明：
-
url：请求数据的地址
-
type：当前Ajax向服务器发送数据采用的是get还是post方法。get方法会将前端上传的数据直接与地址链接起来，一般用于查询操作。get方法有缓存，会被浏览器缓存起来，能传输的数据最大为1024B。post方法比较安全，一般用于新增、删除、修改等操作，传输数据的大小为2MB
-
data：发送到服务器的数据。get请求可以直接将其附加在URL后。
-
dataType：设置服务器返回数据的数据类型。包括以下几种类型：
"xml"：返回XML文档，可用jQuery处理
"html"：返回纯文本HTML信息，包含的script标签会插入在DOM时执行。
"script"：返回纯文本JavaScript代码
"json"：返回JSON数据格式
"jsonp"：返回JSONP格式的数据
"text"：返回纯文本字符串
-
async：同步与异步标志，默认为true，（异步）。同步时会阻塞程序的运行，请求完成后才能继续运行脚本代码，异步时请求的过程不会阻塞代码。
-
success：请求成功后调用的回调函数，该会回调函数所带参数主要包括：服务器返回数据和返回状态。
-
error：请求失败时所调用的回调函数。该函数所带的参数主要包括：XMLHttpRequest对象错误信息、（可能）捕获的错误对象。
使用 $.ajax() 发起 GET 请求时，只需要将 type 属性的值设置为 'GET' 即可：
使用 $.ajax() 发起 POST 请求时，只需要将 type 属性的值设置为 'POST' 即可：
使用 Ajax 请求数据时，被请求的 URL 地址，就叫做数据接口（简称接口）。同时，每个接口必须有请求方式。
例如：
http://www.liulongbin.top:3006/api/getbooks 获取图书列表的接口(GET请求)
http://www.liulongbin.top:3006/api/addbook 添加图书的接口（POST请求）
为了验证接口能否被正常被访问，我们常常需要使用接口测试工具，来对数据接口进行检测。
好处：接口测试工具能让我们在不写任何代码的情况下，对接口进行调用和测试。
接口文档，顾名思义就是接口的说明文档，它是我们调用接口的依据。好的接口文档包含了对接口URL，参数以及输出内容的说明，我们参照接口文档就能方便的知道接口的作用，以及接口如何进行调用。
接口文档可以包含很多信息，也可以按需进行精简，不过，一个合格的接口文档，应该包含以下6项内容，从而为接口的调用提供依据：
接口名称：用来标识各个接口的简单说明，如登录接口，获取图书列表接口等。
接口URL：接口的调用地址。
调用方式：接口的调用方式，如 GET 或 POST。
参数格式：接口需要传递的参数，每个参数必须包含参数名称、参数类型、是否必选、参数说明这4项内容。
响应格式：接口的返回值的详细描述，一般包含数据名称、数据类型、说明3项内容。
返回示例（可选）：通过对象的形式，例举服务器返回数据的结构。
表单在网页中主要负责数据采集功能。HTML中的
标签，就是用于采集用户输入的信息，并通过标签的提交操作，把采集到的信息提交到服务器端进行处理。表单由三个基本部分组成：
- 表单标签
- 表单域
- 表单按钮
表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
form标签用来采集数据
form标签的属性则是用来规定如何把采集到的数据发送到服务器。
action 属性用来规定当提交表单时，向何处发送表单数据。
action 属性的值应该是后端提供的一个 URL 地址，这个 URL 地址专门负责接收表单提交过来的数据。
当 表单在未指定 action 属性值的情况下，action 的默认值为当前页面的 URL 地址。
注意：当提交表单后，页面会立即跳转到 action 属性指定的 URL 地址
target 属性用来规定在何处打开 action URL。
它的可选值有5个，默认情况下，target 的值是 _self，表示在相同的框架中打开 action URL。
method 属性用来规定以何种方式把表单数据提交到 action URL。
它的可选值有两个，分别是 get 和 post。
默认情况下，method 的值为 get，表示通过URL地址的形式，把表单数据提交到 action URL。
注意：
- get 方式适合用来提交少量的、简单的数据。
- post 方式适合用来提交大量的、复杂的、或包含文件上传的数据。
- 在实际开发中， 表单的 post 提交方式用的最多，很少用 get。例如登录、注册、添加数据等表单操作，都需要使用 post 方式来提交表单。
enctype 属性用来规定在发送表单数据之前如何对数据进行编码。
它的可选值有三个，默认情况下，enctype 的值为 application/x-www-form-urlencoded，表示在发送前编码所有的字符。
注意：
- 在涉及到文件上传的操作时，必须将 enctype 的值设置为 multipart/form-data
- 如果表单的提交不涉及到文件上传操作，则直接将 enctype 的值设置为 application/x-www-form-urlencoded 即可！
通过点击 submit 按钮，触发表单提交的操作，从而使页面跳转到 action URL 的行为，叫做表单的同步提交。
- form表单同步提交后，整个页面会发生跳转，跳转到 action URL 所指向的地址，用户体验很差。
- form表单同步提交后，页面之前的状态和数据会丢失。
思考：如何解决上述两个问题？
表单只负责采集数据，Ajax 负责将数据提交到服务器。
在 jQuery 中，可以使用如下两种方式，监听到表单的提交事件：
当监听到表单的提交事件以后，可以调用事件对象的 event.preventDefault() 函数，来阻止表单的提交和页面的跳转，示例代码如下：
为了简化表单中数据的获取操作，jQuery 提供了 serialize() 函数，其语法格式如下：
serialize() 函数的好处：可以一次性获取到表单中的所有的数据。
注意：在使用 serialize() 函数快速获取表单数据时，必须为每个表单元素添加 name 属性！
上述代码是通过字符串拼接的形式，来渲染UI结构。
如果UI结构比较复杂，则拼接字符串的时候需要格外注意引号之前的嵌套。且一旦需求发生变化，修改起来也非常麻烦。
模板引擎，顾名思义，它可以根据程序员指定的模板结构和数据，自动生成一个完整的HTML页面。
模板引擎好处：
- 减少了字符串的拼接操作
- 使代码结构更清晰
- 使代码更易于阅读与维护
art-template 是一个简约、超快的模板引擎。中文官网首页为 http://aui.github.io/art-template/zh-cn/index.html
在浏览器中访问 http://aui.github.io/art-template/zh-cn/docs/installation.html 页面，找到下载链接后，鼠标右键，选择“链接另存为”，将 art-template 下载到本地，然后，通过 <script> 标签加载到网页上进行使用。
- 导入 art-template
- 定义数据
- 定义模板
- 调用 template 函数
- 渲染HTML结构
art-template 提供了 {{ }} 这种语法格式，在 {{ }} 内可以进行变量输出，或循环数组等操作，这种 {{ }} 语法在 art-template 中被称为标准语法。
在 {{ }} 语法中，可以进行变量的输出、对象属性的输出、三元表达式输出、逻辑或输出、加减乘除等表达式输出。
如果要输出的 value 值中，包含了 HTML 标签结构，则需要使用原文输出语法，才能保证 HTML 标签被正常渲染。
如果要实现条件输出，则可以在 {{ }} 中使用 if … else if … /if 的方式，进行按需输出。
如果要实现循环输出，则可以在 {{ }} 内，通过 each 语法循环数组
- 当前循环的索引使用 $index 进行访问
- 当前的循环项使用 $value 进行访问。
过滤器的本质，就是一个 function 处理函数。
过滤器语法类似管道操作符，它的上一个输出作为下一个输入。
定义过滤器的基本语法如下：
格式化时间的过滤器
exec() 函数用于检索字符串中的正则表达式的匹配。
如果字符串中有匹配的值，则返回该匹配值，否则返回 null。
示例：
正则表达式中 ( ) 包起来的内容表示一个分组，可以通过分组来提取自己想要的内容，示例代码如下：
replace() 函数用于在字符串中用一些字符替换另一些字符，语法格式如下：
示例：
- 定义模板结构
- 预调用模板引擎
- 封装 template 函数
- 导入并使用自定义的模板引擎
XMLHttpRequest（简称 xhr）是浏览器提供的 Javascript 对象，通过它，可以请求服务器上的数据资源。之前所学的 jQuery 中的 Ajax 函数，就是基于 xhr 对象封装出来的。
步骤：
- 创建 xhr 对象
- 调用 xhr.open() 函数
- 调用 xhr.send() 函数
- 监听 xhr.onreadystatechange 事件
使用 xhr 对象发起带参数的 GET 请求时，只需在调用 xhr.open 期间，为 URL 地址指定参数即可：
这种在 URL 地址后面拼接的参数，叫做查询字符串。
定义：查询字符串（URL 参数）是指在 URL 的末尾加上用于向服务器发送信息的字符串（变量）。
格式：将英文的 ? 放在URL 的末尾，然后再加上 参数＝值 ，想加上多个参数的话，使用 & 符号进行分隔。以这个形式，可以将想要发送给服务器的数据添加到 URL 中。
无论使用 $.ajax()，还是使用 get()，又或者直接使用 xhr 对象发起 GET 请求，当需要携带参数的时候，本质上，都是直接将参数以查询字符串的形式，追加到 URL 地址的后面，发送到服务器的。
XMLHttpRequest 对象的 readyState 属性，用来表示当前 Ajax 请求所处的状态。每个 Ajax 请求必然处于以下状态中的一个：
URL 地址中，只允许出现英文相关的字母、标点符号、数字，因此，在 URL 地址中不允许出现中文字符。
如果 URL 中需要包含中文这样的字符，则必须对中文字符进行编码（转义）。
URL编码的原则：使用安全的字符（没有特殊用途或者特殊意义的可打印字符）去表示那些不安全的字符。
URL编码原则的通俗理解：使用英文字符去表示非英文字符。
浏览器提供了 URL 编码与解码的 API，分别是：
- encodeURI() 编码的函数
- decodeURI() 解码的函数
由于浏览器会自动对 URL 地址进行编码操作，因此，大多数情况下，程序员不需要关心 URL 地址的编码与解码操作。
步骤：
- 创建 xhr 对象
- 调用 xhr.open() 函数
- 设置 Content-Type 属性（固定写法）
- 调用 xhr.send() 函数，同时指定要发送的数据
- 监听 xhr.onreadystatechange 事件
数据交换格式，就是服务器端与客户端之间进行数据传输与交换的格式。
前端领域，经常提及的**两种数据交换格式分别是 XML 和 JSON。**其中 XML 用的非常少，所以，我们重点要学习的数据交换格式就是 JSON。
XML 的英文全称是 EXtensible Markup Language，即可扩展标记语言。因此，XML 和 HTML 类似，也是一种标记语言。
- XML 和 HTML 虽然都是标记语言，但是，它们两者之间没有任何的关系。
- HTML 被设计用来描述网页上的内容，是网页内容的载体
- XML 被设计用来传输和存储数据，是数据的载体
概念：**JSON 的英文全称是 JavaScript Object Notation，即“JavaScript 对象表示法”。**简单来讲，JSON 就是 Javascript 对象和数组的字符串表示法，它使用文本表示一个 JS 对象或数组的信息，因此，JSON 的本质是字符串。
作用：JSON 是一种轻量级的文本数据交换格式，在作用上类似于 XML，专门用于存储和传输数据，但是 JSON 比 XML 更小、更快、更易解析。
现状：JSON 是在 2001 年开始被推广和使用的数据格式，到现今为止，JSON 已经成为了主流的数据交换格式。
JSON可以将JavaScript对象中表示的一组数据转换为字符串，可以在网络或程序之间轻松的传递这个字符串，并在需要的时候将其还原为各编程语言所支持的数据格式。
JSON 就是用字符串来表示 Javascript 的对象和数组。所以，JSON 中包含对象和数组两种结构，通过这两种结构的相互嵌套，可以表示各种复杂的数据结构。
**对象结构：**对象结构在 JSON 中表示为 { } 括起来的内容。数据结构为 { key: value, key: value, … } 的键值对结构。其中，key 必须是使用英文的双引号包裹的字符串，value 的数据类型可以是数字、字符串、布尔值、null、数组、对象6种类型。
**数组结构：**数组结构在 JSON 中表示为 [ ] 括起来的内容。数据结构为 [ "java", "javascript", 30, true … ] 。数组中数据的类型可以是数字、字符串、布尔值、null、数组、对象6种类型。
- 属性名必须使用双引号包裹
- 字符串类型的值必须使用双引号包裹
- JSON 中不允许使用单引号表示字符串
- JSON 中不能写注释
- JSON 的最外层必须是对象或数组格式
- 不能使用 undefined 或函数作为 JSON 的值
- JSON 的作用：在计算机与网络之间存储和传输数据。
- JSON 的本质：用字符串来表示 Javascript 对象数据或数组数据
**JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串。**例如：
要实现从 JSON 字符串转换为 JS 对象，使用 JSON.parse() 方法：
要实现从 JS 对象转换为 JSON 字符串，使用 JSON.stringify() 方法：
把数据对象转换为字符串的过程，叫做序列化，例如：调用 JSON.stringify() 函数的操作，叫做 JSON 序列化。
把字符串转换为数据对象的过程，叫做反序列化，例如：调用 JSON.parse() 函数的操作，叫做 JSON 反序列化。
itheima() 函数是我们自定义的 Ajax 函数，它接收一个配置对象作为参数，配置对象中可以配置如下属性：
- method 请求的类型
- url 请求的 URL 地址
- data 请求携带的数据
- success 请求成功之后的回调函数
需要把 data 对象，转化成查询字符串的格式，从而提交给服务器，因此提前定义 resolveData 函数如下：
在 itheima() 函数中，需要创建 xhr 对象，并监听 onreadystatechange 事件：
不同的请求类型，对应 xhr 对象的不同操作，因此需要对请求类型进行 if … else … 的判断：
- 只支持文本数据的传输，无法用来读取和上传文件
- 传送和接收数据时，没有进度信息，只能提示有没有完成
- 可以设置 HTTP 请求的时限
- 可以使用 FormData 对象管理表单数据
- 可以上传文件
- 可以获得数据传输的进度信息
有时，Ajax 操作很耗时，而且无法预知要花多少时间。如果网速很慢，用户可能要等很久。新版本的 XMLHttpRequest 对象，增加了 timeout 属性，可以设置 HTTP 请求的时限：
上面的语句，将最长等待时间设为 3000 毫秒。过了这个时限，就自动停止HTTP请求。与之配套的还有一个 timeout 事件，用来指定回调函数：
Ajax 操作往往用来提交表单数据。为了方便表单处理，HTML5 新增了一个 FormData 对象，可以模拟表单操作：
示例代码如下：
新版 XMLHttpRequest 对象，不仅可以发送文本信息，还可以上传文件。
实现步骤：
- 定义 UI 结构
- 验证是否选择了文件
- 向 FormData 中追加文件
- 使用 xhr 发起上传文件的请求
- 监听 onreadystatechange 事件
新版本的 XMLHttpRequest 对象中，可以通过监听 xhr.upload.onprogress 事件，来获取到文件的上传进度。语法格式如下：
Ajax 请求开始时，执行 ajaxStart 函数。可以在 ajaxStart 的 callback 中显示 loading 效果，示例代码如下：
注意： $(document).ajaxStart() 函数会监听当前文档内所有的 Ajax 请求。
Ajax 请求结束时，执行 ajaxStop 函数。可以在 ajaxStop 的 callback 中隐藏 loading 效果，示例代码如下：
Axios 是专注于网络数据请求的库。
相比于原生的 XMLHttpRequest 对象，axios 简单易用。
相比于 jQuery，axios 更加轻量化，只专注于网络数据请求。
类似于jQuery中的$.ajax()
如果两个页面的协议，域名和端口都相同，则两个页面具有相同的源。
例如，下表给出了相对于 http://www.test.com/index.html 页面的同源检测：
同源策略（英文全称 Same origin policy）是浏览器提供的一个安全功能。
MDN 官方给定的概念：同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。
通俗的理解：**浏览器规定，A 网站的 JavaScript，不允许和非同源的网站 C 之间，进行资源的交互，**例如：
- 无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB
- 无法接触非同源网页的 DOM
- 无法向非同源地址发送 Ajax 请求
同源指的是两个 URL 的协议、域名、端口一致，反之，则是跨域。
出现跨域的根本原因：浏览器的同源策略不允许非同源的 URL 之间进行资源的交互。
网页：http://www.test.com/index.html
接口：http://www.api.com/userlist
现如今，实现跨域数据请求，最主要的两种解决方案，分别是 JSONP 和 CORS
JSONP：出现的早，兼容性好（兼容低版本IE）。是前端程序员为了解决跨域问题，被迫想出来的一种临时解决方案。缺点是只支持 GET 请求，不支持 POST 请求。
CORS：出现的较晚，它是 W3C 标准，属于跨域 Ajax 请求的根本解决方案。支持 GET 和 POST 请求。缺点是不兼容某些低版本的浏览器。
JSONP (JSON with Padding) 是 JSON 的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。
由于浏览器同源策略的限制，网页中无法通过 Ajax 请求非同源的接口数据。但是<script>标签不受浏览器同源策略的影响，可以通过 src 属性，请求非同源的 js 脚本。
因此，JSONP 的实现原理，就是通过 <script> 标签的 src 属性，请求跨域的数据接口，并通过函数调用的形式，接收跨域接口响应回来的数据。
定义一个 success 回调函数：
通过<script>标签，请求接口数据：
由于 JSONP 是通过 <script> 标签的 src 属性，来实现跨域数据获取的，所以，JSONP 只支持 GET 数据请求，不支持 POST 请求。
注意：JSONP 和 Ajax 之间没有任何关系，不能把 JSONP 请求数据的方式叫做 Ajax，因为 JSONP 没有用到 XMLHttpRequest 这个对象。
jQuery 提供的 $.ajax() 函数，除了可以发起真正的 Ajax 数据请求之外，还能够发起 JSONP 数据请求，例如：
默认情况下，使用 jQuery 发起 JSONP 请求，会自动携带一个 callback=jQueryxxx 的参数，jQueryxxx 是随机生成的一个回调函数名称。
在使用 jQuery 发起 JSONP 请求时，如果想要自定义 JSONP 的参数以及回调函数名称，可以通过如下两个参数来指定：
jQuery 中的 JSONP，也是通过 <script> 标签的 src 属性实现跨域数据访问的，只不过，jQuery 采用的是动态创建和移除 <script> 标签的方式，来发起 JSONP 数据请求。
在发起 JSONP 请求的时候，动态向
中 append 一个 <script> 标签；在 JSONP 请求成功以后，动态从
中移除刚才 append 进去的 <script> 标签；为了获取到用户每次按下键盘输入的内容，需要监听输入框的 keyup 事件，示例代码如下：
将获取搜索建议列表的代码，封装到 getSuggestList 函数中，示例代码如下：
防抖策略（debounce）是当事件被触发后，延迟 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。
应用场景
用户在输入框中连续输入一串字符时，可以通过防抖策略，只在输入完后，才执行查询的请求，这样可以有效减少请求次数，节约请求资源；
节流策略（throttle），顾名思义，可以减少一段时间内事件的触发频率。
鼠标连续不断地触发某事件（如点击），只在单位时间内只触发一次；
懒加载时要监听计算滚动条的位置，但不必每次滑动都触发，可以降低计算的频率，而不必去浪费 CPU 资源；
高铁卫生间是否被占用，由红绿灯控制，红灯表示被占用，绿灯表示可使用。 假设每个人上卫生间都需要花费5分钟，则五分钟之内，被占用的卫生间无法被其他人使用。 上一个人使用完毕后，需要将红灯重置为绿灯，表示下一个人可以使用卫生间。 下一个人在上卫生间之前，需要先判断控制灯是否为绿色，来知晓能否上卫生间。
- 节流阀为空，表示可以执行下次操作；不为空，表示不能执行下次操作。
- 当前操作执行完，必须将节流阀重置为空，表示可以执行下次操作了。
- 每次执行操作前，必须先判断节流阀是否为空。
防抖：如果事件被频繁触发，防抖能保证只有最有一次触发生效！前面 N 多次的触发都会被忽略！
节流：如果事件被频繁触发，节流能够减少事件触发的频率，因此，节流是有选择性地执行一部分事件！
通信，就是信息的传递和交换。
通信三要素：
- 通信的主体
- 通信的内容
- 通信的方式
互联网中的通信
通信协议（Communication Protocol）是指通信的双方完成通信所必须遵守的规则和约定。
通俗的理解：通信双方采用约定好的格式来发送和接收消息，这种事先约定好的通信格式，就叫做通信协议。
客户端与服务器之间要实现网页内容的传输，则通信的双方必须遵守网页内容的传输协议。
网页内容又叫做超文本，因此网页内容的传输协议又叫做超文本传输协议（HyperText Transfer Protocol） ，简称 HTTP 协议。
HTTP 协议即超文本传送协议 (HyperText Transfer Protocol) ，它规定了客户端与服务器之间进行网页内容传输时，所必须遵守的传输格式。
例如：
-
客户端要以HTTP协议要求的格式把数据提交到服务器
-
服务器要以HTTP协议要求的格式把内容响应给客户端
HTTP 协议采用了 请求/响应 的交互模型。
由于 HTTP 协议属于客户端浏览器和服务器之间的通信协议。因此，客户端发起的请求叫做 HTTP 请求，客户端发送到服务器的消息，叫做 HTTP 请求消息。
注意：HTTP 请求消息又叫做 HTTP 请求报文。
HTTP 请求消息由请求行（request line）、请求头部（ header ） 、空行 和 请求体 4 个部分组成。
请求行由请求方式、URL 和 HTTP 协议版本 3 个部分组成，他们之间使用空格隔开。
请求头部用来描述客户端的基本信息，从而把客户端相关的信息告知服务器。
比如：
- User-Agent 用来说明当前是什么类型的浏览器；
- Content-Type 用来描述发送到服务器的数据格式；
- Accept 用来描述客户端能够接收什么类型的返回内容；
- Accept-Language 用来描述客户端期望接收哪种人类语言的文本内容。
请求头部由多行 键/值对 组成，每行的键和值之间用英文的冒号分隔。
最后一个请求头字段的后面是一个空行，通知服务器请求头部至此结束。
请求消息中的空行，用来分隔请求头部与请求体。
请求体中存放的，是要通过 POST 方式提交到服务器的数据。
注意：只有 POST 请求才有请求体，GET 请求没有请求体！
响应消息就是服务器响应给客户端的消息内容，也叫作响应报文。
HTTP响应消息由状态行、响应头部、空行 和 响应体 4 个部分组成，如下图所示：
状态行由 HTTP 协议版本、状态码和状态码的描述文本 3 个部分组成，他们之间使用空格隔开;
响应头部用来描述服务器的基本信息。响应头部由多行 键/值对 组成，每行的键和值之间用英文的冒号分隔。
- 在最后一个响应头部字段结束之后，会紧跟一个空行，用来通知客户端响应头部至此结束。
- 响应消息中的空行，用来分隔响应头部与响应体。
响应体中存放的，是服务器响应给客户端的资源内容。
HTTP 请求方法，属于 HTTP 协议中的一部分，请求方法的作用是：用来表明要对服务器上的资源执行的操作。最常用的请求方法是 GET 和 POST。
HTTP 响应状态码（HTTP Status Code），也属于 HTTP 协议的一部分，用来标识响应的状态。
响应状态码会随着响应消息一起被发送至客户端浏览器，浏览器根据服务器返回的响应状态码，就能知道这次 HTTP 请求的结果是成功还是失败了。
HTTP 状态码由三个十进制数字组成，第一个十进制数字定义了状态码的类型，后两个数字用来对状态码进行细分。
HTTP 状态码共分为 5 种类型：
2** 范围的状态码，表示服务器已成功接收到请求并进行处理。常见的 2** 类型的状态码如下：
3** 范围的状态码，表示服务器要求客户端重定向，需要客户端进一步的操作以完成资源的请求。常见的 3**类型的状态码如下：
4** 范围的状态码，表示客户端的请求有非法内容，从而导致这次请求失败。常见的 4** 类型的状态码如下：
5** 范围的状态码，表示服务器未能正常处理客户端的请求而出现意外错误。常见的 5** 类型的状态码如下：
Cookie ： 服务器 发送给 浏览器 并 保存在本地的一小块数据，会在浏览器下次向同一服务器 再次发起请求时 被 携带并发送到服务器上。
通常，它用于告知服务端两个请求是否来自同一浏览器，如保持用户的登录状态。Cookie使基于无状态的HTTP协议记录稳定的状态成为了可能。
Domain
Domain：指定那些主机可以接收Cookie；
不指定，则默认为当前主机；
指定 Domain ，一般包含子域名 （Domain=wos.com） 。
Path
Path：指定主机下的那些路径可以接受 Cookie，用 %x2F(/) 作为路径分隔；
- 会话期 Cookie
- 最简单的 Cookie。浏览器关闭后自动删除。（会话期不需要指定过期时间和有效时间）
- 持久性 Cookie
- 制定一个特定的过期时间或有效期；
- 1.会话状态管理（用户登录、购物车、游戏分数）
- 2.个性化设置（用户自定义设置、主题）
- 3.浏览器行为跟踪（跟踪分析用户行为）
Tip ： 设置Cookie键值时，一次只能设置一个；
Tip ： 将名称设为空；或将其时间设置为过期时间
-
Set-Cookie: name=value -
cookie: name = value ; name = value
Tip ： 一般工况下Cookie值都是自动生成，但是我们可以手动修改
