一、客户端与服务器
1 服务器
① 概念：
上网过程中，负责存放和对外提供资源的电脑，叫做服务器。
2 客户端
① 概念：
上网过程中，负责获取和消费资源的电脑，叫做客户端。
二、URL 地址(网址)
1 概念
URL(全称是UniformResourceLocator)，中文叫统一资源定位符，用于标识互联网上每个资源的唯一存放
位置。浏览器只有通过URL地址，才能正确定位资源的存放位置，从而成功访问到对应的资源。
2 URL地址的组成部分
URL地址一般由三部组成：
① 客户端与服务器之间的通信协议
② 存有该资源的服务器名称
③ 资源在服务器上的具体存放位置
三、客户端与服务器的通信过程
第一步：客户端向服务器发送请求
第二步：服务器处理这次请求
第三步：服务器响应客户端
注意：
① 客户端与服务器之间的通信过程，分为 请求-处理-响应 三个步骤。
② 网页中的每一个资源，都是通过 请求-处理-响应 的方式从服务器获取过来的。
四、服务器对外提供资源
1 网页中如何请求数据
① 数据，也是服务器对外提供的一种资源。只要是资源，必然要通过请求-处理-响应的方式进行获取。
② 如果要在网页中请求服务器上的数据资源，则需要用到 XMLHttpRequest 对象。
③ XMLHttpRequest(简称xhr)，是浏览器提供的 JS 成员，通过它，可以请求服务器上的数据资源。
2 资源的请求方式
客户端请求服务器时，请求的方式有很多种，最常见的两种请求方式分别为 get 和 post 请求。
① get 请求通常用于获取服务器资源，简单来说就是向服务器要资源
例如：根据URL地址，从服务器获取 html文件、css文件、js文件、图片文件、数据资源等
② post 请求通常用于向服务器提交数据，简单来说就是往服务器发送资源
例如：登录时向服务器提交的登录信息、注册时向服务器提交的注册信息、添加用户时向
服务器提交的用户信息等各种数据提交操作
五、了解 Ajax
1 什么是 Ajax
① Ajax的全称是Asynchronous Javascript And XML(异步JavaScript和XML)。
② 通俗的理解，在网页中利用 XMLHttpRequest 对象和服务器进行数据交互的方式，就是Ajax。
2 为什么要学习 Ajax
之前所学的技术，只能把网页做的更美观漂亮，或添加一些动画效果，但是，Ajax能让我们轻松
实现网页与服务器之间的数据交互。
3 Ajax 的典型应用场景
① 用户名检测：注册用户时，通过Ajax的形式，动态检测用户名是否被占用
② 搜索提示：当输入搜索关键字时，通过Ajax的形式，动态加载搜索提示列表
③ 数据分页显示：当点击页码数的时候，通过Ajax的形式，根据页码数动态刷新表格的数据
④ 数据的增删改查：数据的添加、删除、修改、查询操作，都需要通过Ajax的形式，来实现数据的交互
总结：
只要是跟服务器有关的操作都需要用到 Ajax。
六、jQuery 中的 Ajax
1 了解jQuery中的Ajax
浏览器中提供的 XMLHttpRequest 用法比较复杂，所以jQuery对XMLHttpRequest进行了封装，提供了
一系列Ajax相关的函数，极大地降低了Ajax的使用难度。
jQuery中发起Ajax请求最常用的三个方法如下：
$.get()、$.post()、$.ajax()
2 $.get() 函数语法
$.get() 函数专门用来发起 get 请求，从而将服务器上的资源请求到客户端来进行使用。
语法：
$.get(url, [data], [callback])
参数说明：
url，该参数的类型为 string，必填，它是要请求的资源地址
data，该参数的类型为 object，可不填，它是请求资源期间要携带的参数
callback，该参数的类型为 function，可不填，它是请求成功时的回调函数
3 $.post() 函数语法
$.post() 函数专门用来发起post请求，从而向服务器提交数据。
语法：
$.post(url, [data], [callback])
参数说明：
url，该参数的类型为 string，必填，它是提交数据的地址
data，该参数的类型为 object，可不填，它是要提交的数据
callback，该参数的类型为 function，可不填，它是数据提交成功时的回调函数
4 $.ajax() 函数语法
$.ajax() 函数是一个功能比较综合的函数，它允许我们对Ajax请求进行更详细的配置。
语法：
$(function() {
$.ajax({
type: ' ',
url: ' ',
data: ' ',
success: function(res) {
}
})
})
参数说明：
① type：请求的方式，有 GET 或 POST，大小写都可以，建议大写
② url：请求的 URL 地址
③ data：当前请求要携带的数据
④ success: function(res) { }：请求成功之后的回调函数
七、接口
1 概念
使用 Ajax 请求数据时，被请求的URL地址，就叫做数据接口(简称接口)。同时，每个接口必须有请求方式。
2 接口测试工具
① 什么是接口测试工具：
为了验证接口能否被正常被访问，我们常常需要使用接口测试工具，来对数据接口进行检测。
② 接口测试工具的好处：
接口测试工具能让我们在不写任何代码的情况下，对接口进行调用和测试。
③ 下载并安装 postwoman：
下载教程地址：postwoman接口调试插件（postman）_哔哩哔哩_bilibili
3 接口文档
① 什么是接口文档：
接口文档，其实就是接口的说明书，它是我们调用接口的依据。好的接口文档包含了对接口URL，
参数以及输出内容的说明，我们参照接口文档就能方便的知道接口的作用，以及接口如何进行调用。
② 接口文档的组成部分：
接口文档可以包含很多信息，也可以按需进行精简，不过，一个合格的接口文档，
应该包含以下6项内容，从而为接口的调用提供依据：
(1) 接口名称：用来标识各个接口的简单说明，如登录接口，获取图书列表接口等。
(2) 接口URL：接口的调用地址。
(3) 调用方式：接口的调用方式，如GET或POST。
(4) 参数格式：接口需要传递的参数，每个参数必须包含参数名称、参数类型、是否必选、参数说明
这4项内容。
(5) 响应格式：接口返回值的详细描述，一般包含数据名称、数据类型、说明3项内容。
(6) 返回示例(可选)：通过对象的形式，例举服务器返回数据的结构。
八、form 表单的基本使用
1 什么是表单
表单在网页中主要负责数据采集功能。HTML中的<form>标签，就是用于采集用户输入的信息，
并通过<form>标签的提交操作，把采集到的信息提交到服务器进行处理。
2 表单的组成部分
由三个基本部分组成：
● 表单标签
● 表单域
● 表单按钮
3 <form>标签
<form>标签用来采集数据，<form>标签的属性则是用来规定如何把采集到的数据发送到服务器。
① action 属性
(1) action属性用来规定当提交表单时，向何处发送表单数据。
(2) action属性的值应该是后端提供的一个URL地址，这个URL地址专门负责接收表单提交过来的数据。
(3) 当<form>表单在未指定action属性值的情况下，action的默认值为当前页面的URL地址。
(4) 当提交表单后，页面会立即跳转到action属性指定的URL地址
其它属性去菜鸟教程查看
4 表单的同步提交及缺点
① 什么是表单的同步提交
通过点击submit按钮，触发表单提交的操作，从而使页面跳转到 action URL的行为，叫做表单的同步提交。
② 表单同步提交的缺点
(1) <form>表单同步提交后，整个页面会发生跳转，跳转到 action URL所指向的地址，用户体验很差。
(2) <form>表单同步提交后，页面之前的状态和数据会丢失。
③ 如何解决表单同步提交的缺点
解决方案：表单负责采集数据，Ajax 负责将数据提交到服务器。
九、通过Ajax提交表单数据
1 监听表单提交事件
注意：是给<form>标签绑定提交事件
① 通过 submit() 函数
或者
② 通过 on() 函数
2 阻止表单默认提交行为
当监听到表单的提交事件以后，可以调用事件对象的 e.preventDefault() 函数，来阻止表单提交时页面发生跳转。
3 快速获取表单中的数据
① 说明：
如果<input>标签有10个、20个，那么你要定义10个、20个变量来获取<input>里面的value，
这样很繁琐。为了简化表单的获取数据操作，jQuery 提供了 serialize() 函数。
serialize() 函数可以一次性获取到表单中的所有数据。
② serialize() 函数：
(1) 语法：
$('选择器').serialize()
(2) 例子：
<body>
<form action="" method="post" id="zhuce">
<input type="text" id="userName" value="" name="userName"/>
<input type="password" name="userPassword" />
<input type="submit" value="提交"/>
</form>
</body>
<script>
$(function() {
$('#zhuce').submit(function(e) {
e.preventDefault()
let userdata = $(this).serialize()
console.log(userdata); //打印结果为 userName=11&userPassword=11
})
})
</script>
注意：在使用 serialize() 函数快速获取表单数据时，必须为每个表单元素添加 name 属性!
十、模板引擎
1 渲染UI结构时遇到的问题
以前呢，在动态添加标签时，是通过字符串拼接的形式来完成的。如果html结构比较复杂，
则拼接字符串的时候需要格外注意引号之间的嵌套，且一旦需求发生变化，因为代码可读性差，
所以修改起来也非常麻烦。那接下来介绍的模板引擎就可以解决这个问题。
2 什么是模板引擎
模板引擎，它可以根据程序员指定的模板结构和数据，自动生成一个完整的HTML页面。
3 模板引擎的好处
① 减少了字符串的拼接操作
② 使代码结构更清晰，可读性更强
③ 使代码更易于阅读与维护
十一、art-template 模板引擎
1 art-template 简介
art-template是一个简约、超快的模板引擎。好吧，其实它是个 js 文件。。。
中文官网首页为：http://aui.github.io/art-template/zh-cn/，百度搜索关键词也行。
2 art-template 安装
在浏览器中访问官网，找到下载链接后，鼠标右键，选择“链接另存为”，将 template-web.js 下载到本地
3 art-template的使用步骤
① 导入 template-web.js 文件
② 定义数据
③ 定义模板
④ 调用template函数
⑤ 渲染HTML结构
4 例子
<body>
<div class="content"></div>
</body>
<script type="text/html" id="user">
// 定义模板
<div>
姓名：<span>{{name}}</span>
</div>
<div>
年龄：<span>{{age}}</span>
</div>
</script>
<script type="text/javascript">
// 定义数据
const data = {
name: '英雄联盟',
age: '11周年'
}
// 调用template函数
let htmlUser = template('user',data);
$(function() {
// 渲染HTML结构
$('.content').html(htmlUser)
})
</script>
代码说明：
① 定义模板的 script 标签里的 type 必须写成 text/html，不写默认是 text/javascript，text/javascript 意思是在
script 标签里的所有代码都被当成 JS 处理；写成 text/html，script 标签里的所有代码都被当成 html 处理。
② 定义模板的 script 标签里必须加上一个 id 属性，到时候这个 id 属性作为 template 函数的参数。
③ 定义模板 必须在 定义数据 前面
④ 定义模板里的 {{}} 是 template 函数所提供的一种语法，花括号里面可以直接写入定义数据的属性，
比如：<span>{{name}}</span>
⑤ template(object,data) 里面有两个参数，第一个参数是定义模板的 script 标签里的 id，而且是个字符串
第二个参数是定义数据，之后该函数会返回一个 html 结构，你的模板长啥样，这个html 结构就长啥样，
然后拿一个变量接收返回的结果，最后把该结果渲染到页面中
十二、art-template 标准语法
1 什么是标准语法
art-template 提供了 {{ }} 这种语法格式，在 {{ }} 内可以进行 变量输出 或 循环数组 等操作，
这种 {{ }} 语法在 art-template 中被称为标准语法。
2 标准语法：输出
{{value}}
{{obj.key}}
{{obj['key']}}
{{a ? b : c}}
{{a ll b}}
{{a && b}}
{{a + b}}
在 {{ }} 语法中，可以进行变量的输出、对象属性的输出、三元表达式输出、逻辑或输出、逻辑与输出、
加减乘除等表达式输出。
3 标准语法：原文输出
{{@ 属性名}}
如果要输出的值中，包含了 HTML 标签结构，则需要使用原文输出语法，才能保证 HTML 标签被正常渲染。
不然 template 会把标签当作文本直接输出到页面上，比如 <h1>666</h1>。
4 标准语法：条件输出
如果要实现条件输出，则可以在 {{ }} 中使用条件判断的方式，按需求输出。用法与 JS 一样
语法①：
{{if 条件}}
符合判断则输出
{{/if}}
语法②：
{{if flag == 1}}
符合判断则输出
{{else if flag == 2}}
符合判断则输出
{{/if}}
5 标准语法：循环输出
如果要实现循环输出，则可以在 {{ }} 内，通过 each 语法循环数组，当前循环的索引使用 $index 进行访问，
当前循环的元素使用 $value 进行访问。
{{each 数组名}}
{{$index}}，{{$value}}
{{/each}}
6 标准语法：过滤器
过滤器的本质，就是一个 function 处理函数。过滤器语法类似管道操作符，它的上一个输出作为下一个输入。
语法：
{{value | filter}}
template.defaults.imports.filter = function(value) { /*return处理的结果*/}
示例：
<script type="text/html" id="user">
<div>
系统时间:{{regTime | filterDate}}
</div>
</script>
<script type="text/javascript">
// 过滤器一定要写在渲染HTML结构前面
template.defaults.imports.filterDate = function(value) {
let year = value.getFullYear();
let month = value.getMonth();
let day = value.getDate();
return year+'-'+month+'-'+day //一定要把结果返回
}
</script>
十三、XMLHttpRequest 的基本使用
1 什么是 XMLHttpRequest
XMLHttpRequest(简称xhr) 是浏览器提供的 JavaScript 对象，通过它，可以请求服务器上的数据资源。
之前所学的 jQuery 中的 Ajax 函数，就是基于 xhr 对象封装出来的。接下来介绍的是用原生 JS 对 Ajax
进行操作。
2 使用 xhr 发起 GET 请求
① 步骤:
(1) 创建 xhr 对象
(2) 调用 xhr.open() 函数
(3) 调用 xhr.send() 函数
(4) 监听 xhr.onreadystatechange 事件
注意：这些函数的使用方法去菜鸟教程查看
② 示例：
// 创建 xhr 对象
let xhr = new XMLHttpRequest()
// 调用 xhr.open() 函数, 指定 请求方式 与 URL 地址
xhr.open('GET','http://www.liulongbin.top:3006/api/getbooks')
// 调用 xhr.send() 函数, 发起 Ajax 请求
xhr.send()
// 监听 xhr.onreadystatechange 事件
xhr.onreadystatechange = function() {
// 监听 xhr 对象的请求状态 readyState, 与服务器响应的状态 status
if (xhr.readyState === 4 && xhr.status === 200) {
// 打印服务器响应回来的数据
console.log(xhr.responseText);
}
}
注意：以上是固定写法，记住就行
3 了解 xhr 对象的 readyState 属性
XMLHttpRequest对象的readyState属性，用来表示当前 Ajax 请求所处的状态。
每个 Ajax 请求必然处于以下状态中的一个：
值 状态 描述
0 unsent XMLHttpRequest对象已被创建，但尚未调用open方法。
1 opened open() 方法已经被调用。
2 headers_received send() 方法已经被调用，响应头也已经被接收。
3 loading 数据接收中，此时response属性中已经包含部分数据。
4 done Ajax请求完成，这意味着数据传输已经彻底完成或失败。
4 使用 xhr 发起带参数的 GET 请求
使用xhr对象发起带参数的GET请求时，只需在调用 xhr.open() 期间，为URL地址指定参数即可。
示例：
xhr.open('GET','http://www.liulongbin.top:3006/api/getbooks?id=1')
这种在URL地址后面拼接的参数，叫做查询字符串。
5 查询字符串
① 什么是查询字符串
定义：
查询字符串 (URL参数) 是指在URL的末尾加上用于向服务器发送信息的字符串(变量)。
格式：
将英文的 ? 放在URL的末尾，然后再加上 参数=值，想加上多个参数，要使用 & 符号进行分隔。
以这个形式，可以将想要发送给服务器的数据添加到URL中。
示例：
// 不带参数的URL地址
http://www.liulongbin.top:3006/api/getbooks
// 带一个参数的URL地址
http://www.liulongbin.top:3006/api/getbooks?id=1
// 带两个参数的URL地址
http://www.liulongbin.top:3006/api/getbooks?id=1&bookname=西游记
6 GET请求携带参数的本质
无论是使用 $.ajax()，还是使用 $.get()，又或者直接使用 xhr 对象发起GET请求，当需要携带参数的时候，
本质上，都是直接将参数以查询字符串的形式，追加到URL地址的后面，发送到服务器的。
7 URL编码与解码
① 什么是URL编码：
URL地址中，只允许出现英文相关的字母、标点符号、数字，因此，在URL地址中不允许出现中文字符。
如果 URL 中需要包含中文这样的字符，则必须对中文字符进行编码 (转义)。
URL编码的原则：使用安全的字符 (没有特殊用途或者特殊意义的可打印字符) 去表示那些不安全的字符。
URL编码原则的通俗理解：使用英文字符去表示非英文字符。
② 如何对URL进行编码与解码：
浏览器提供了URL编码与解码的API，分别是：
encodeURI()，编码的函数
decodeURI()，解码的函数
示例：
let str1 = '余某'
let str2 = '%E4%BD%99'
let str3 = encodeURI(str1)
console.log(str3); //打印结果为 %E4%BD%99%E6%9F%90
let str4 = decodeURI(str2)
console.log(str4); //打印结果为 余
代码解释：
对中文进行编码，它是以三组编码转为一个文字，比如，%E4%BD%99 等于 余
③ URL编码的注意事项
由于浏览器会自动对URL地址进行编码操作，因此，大多数情况下，程序员不需要关心URL地址的编码与解码操作。
8 使用 xhr 发起 POST 请求
① 步骤：
(1) 创建 xhr 对象
(2) 调用 xhr.open() 函数
(3) 设置 Content-Type 属性 (固定写法)
(4) 调用 xhr.send() 函数，同时指定要发送的数据
(5) 监听 xhr.onreadystatechange 事件
② 示例：
// 创建 xhr 对象
let xhr = new XMLHttpRequest()
// 调用 xhr.open() 函数, 指定 请求方式 与 URL 地址
xhr.open('POST', 'http://www.liulongbin.top:3006/api/addbook')
// 设置 Content-Type 属性 (固定写法)
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
// 调用 xhr.send() 函数, 同时将数据以查询字符串的形式, 提交给服务器
xhr.send('bookname=三国志&author=陈寿&publisher=南宁图书馆出版社')
// 监听 xhr.onreadystatechange 事件
xhr.onreadystatechange = function() {
// 监听 xhr 对象的请求状态 readyState, 与服务器响应的状态 status
if (xhr.readyState === 4 && xhr.status === 200) {
// 打印服务器响应回来的数据
console.log(xhr.responseText);
}
}
注意：以上是固定写法，记住就行
十四、数据交换格式
1 什么是数据交换格式
数据交换格式，就是服务器端与客户端之间进行数据传输与交换的格式。
前端领域，经常提及的两种数据交换格式分别是 XML 和 JSON。其中XML用的非常少，
所以，我们重点学习的数据交换格式就是 JSON。
十五、JSON
1 什么是 JSON
JSON的英文全称是 JavaScript Object Notation，即“JavaScript对象表示法”。
简单来讲，JSON就是用字符串来表示Javascript 的对象 和 数组，它使用文本表示一个JS对象或数组的信息，
因此，JSON的本质是字符串。
2 JSON 的作用
JSON是一种轻量级的文本数据交换格式，在作用上类似于XML，专门用于存储和传输数据，
但是JSON比 XML更小、更快、更易解析。
3 JSON 的现状
JSON是在2001年开始被推广和使用的数据格式，到现今为止，JSON已经成为了主流的数据交换格式。
4 JSON的两种结构
JSON就是用字符串来表示Javascript的对象和数组。所以，JSON中包含对象和数组两种结构，
通过这两种结构的相互嵌套，可以表示各种复杂的数据结构。
① 对象结构：
对象结构在JSON中表示为 { } 括起来的内容。数据结构为 {key: value, key: value,....} 的键值对结构。
其中，key 必须是使用英文的双引号包裹的字符串，value 的数据类型可以是数值型、字符串、布尔值、
null、数组、对象 6种类型。字符串必须使用英文的双引号包裹
示例：
{
name: "zzh",
'age': 20,
"sex": '男',
"address": undefined,
"hobby": ["1","2",'3'],
say: function() { }
}
代码说明：
name: "zzh" 语法错误，name 是 key，要拿英文的双引号包裹，正确的写法是 "name"。
'age': 20 语法错误，'age' 改为 "age"。
"sex": '男' 语法错误，字符串必须使用英文的双引号包裹，所以 '男' 改为 "男"。
"address": undefined 语法错误，value 的数据类型不包含 undefined，建议改为 null。
"hobby": ["1","2",'3'] 语法错误，数组里的 '3' 改为 "3"。
say: function() {} 语法错误，say 改为 "say"，value 的数据类型不包含函数。
② 数组结构：
数组结构在JSON 中表示为[]括起来的内容。数据结构为["java" , "javascript", 30, true ...]。
数组中数据的类型可以是数值型、字符串、布尔值、null、数组、对象 6种类型。与对象结构一样，
凡是字符串必须使用双引号。
③ JSON语法注意事项
(1) 属性名必须使用双引号包裹
(2) 字符串类型的值必须使用双引号包裹
(3) JSON中不能写注释
(4) JSON的最外层必须是对象或数组格式
(5) 不能使用 undefined 或 函数 作为JSON的值
5 JSON 和 JS对象、数组的相互转化
要实现JSON字符串转换为JS对象，使用 JSON.parse(str) 方法：
let jsonStr = '{"a": "yu","b": "fish"}';
let obj = JSON.parse(jsonStr)
console.log(obj); //打印结果为 {a: "yu", b: "fish"}
console.log(typeof obj); //打印结果为 object，说明确实转换成对象了
要实现JSON字符串转换为JS数组，使用 JSON.parse(str) 方法：
let jsonStr = '["a","b"]';
let arr = JSON.parse(jsonStr)
console.log(arr); //打印结果为 ["a", "b"]
console.log(arr instanceof Array); //打印结果为 true，说明确实转换成数组了
要实现JS对象转换为JSON字符串，使用 JSON.stringify(obj) 方法：
let obj = {
a: 'yu',
b: 'fish'
}
let jsonStr = JSON.stringify(obj)
console.log(jsonStr); //打印结果为 {"a":"yu","b":"fish"}
console.log(typeof jsonStr); //打印结果为 string，说明确实转换成字符串了
要实现JS数组转换为JSON字符串，使用 JSON.stringify(arr) 方法：
let arr = ['a','b'];
let jsonStr = JSON.stringify(arr)
console.log(jsonStr); //打印结果为 ["a","b"]
console.log(typeof jsonStr); //打印结果为 string，说明确实转换成字符串了
6 序列化和反序列化
把对象转换为字符串的过程，叫做序列化，例如：调用JSON.stringify()函数的操作，叫做JSON序列化。
把字符串转换为对象的过程，叫做反序列化，例如：调用JSON.parse()函数的操作，叫做JSON反序列化。
十六、XMLHttpRequest Level2 的新特性
1 认识 XMLHttpRequest Level2
① 旧版 XMLHttpRequest 的缺点：
(1) 只支持文本数据的传输，无法用来读取和上传文件。
(2) 传送和接收数据时，没有进度信息，只能提示有没有完成。
② XMLHttpRequest Level2 的新功能
(1) 可以设置 HTTP 请求的时限
(2) 可以使用 FormData 对象管理表单数据
(3) 可以上传文件
(4) 可以获得数据传输的进度信息
2 设置 HTTP 请求时限
① 说明：
有时，Ajax 操作很耗时，而且无法预知要花多少时间。如果网速很慢，用户可能要等很久。
XMLHttpRequest Level2 对象增加了 timeout 属性，可以设置 HTTP 请求的时限。
设置 HTTP 请求时限的代码写在 open() 函数前面。
② 语法：
xhr.timeout = 3000
语法说明：
将最长等待时间设为3000毫秒。过了这个时限，就自动停止HTTP请求。
与之配套的还有一个timeout事件，用来指定回调函数。
xhr.ontimeout = function(e) {
alert('请求超时!')
}
代码说明：
当请求时间超过了最长等待时间，就会触发 ontimeout 事件，执行里面的回调函数。
3 FormData 对象管理表单数据
① 说明：
Ajax 操作往往用来提交表单数据。为了方便表单处理，HTML5 新增了一个 FormData 对象，
可以模拟表单操作。
② 示例：
// 1 新建 FormData 对象
let fd = new FormData();
// 2 为 FormData 添加表单项
fd.append('uname','zzh')
fd.append('upwd','123456')
// 3 创建 xhr 对象
let xhr = new XMLHttpRequest()
// 4 指定请求类型与URL地址
xhr.open('POST','http://www.liulongbin.top:3006/api/formdata');
// 5 直接提交 FormData 对象, 这与提交网页表单的效果, 完全一样
xhr.send(fd)
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(JSON.parse(xhr.responseText));
}
}
把打印结果展开会看到 data: {uname: "zzh", upwd: "123456"}，说明数据添加成功
③ FormData 对象也可以用来获取网页表单的值，示例代码如下：
<body>
<form action="" method="post" id="zhuce">
<input type="text" id="userName" value="" autocomplete="off" name="uname"/>
<input type="password" name="password"/>
<input type="submit" value="提交" />
</form>
</body>
<script>
let zhuce = document.querySelector('#zhuce')
zhuce.onsubmit = function(e) {
e.preventDefault()
// 1 新建 FormData 对象
let fd = new FormData(zhuce);
// 2 创建 xhr 对象
let xhr = new XMLHttpRequest()
// 3 指定请求类型与URL地址
xhr.open('POST','http://www.liulongbin.top:3006/api/formdata');
// 4 直接提交 FormData 对象
xhr.send(fd)
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(JSON.parse(xhr.responseText));
}
}
}
</script>
代码说明：
把打印结果展开会看到 data: {uname: "zzh", password: "123"}，说明说明数据添加成功。
<input> 标签里一定要加 name 属性，否则 data 为空，就添加数据失败了。
4 上传文件
XMLHttpRequest Level2 对象，不仅可以发送文本信息，还可以上传文件。
① 实现步骤：
(1) 定义 html 结构
(2) 验证是否选择了文件
(3) 向 FormData 中追加文件
(4) 使用 xhr 发起上传文件的请求
(5) 监听 onreadystatechange 事件
② 示例：
<body>
<input type="file" id="file" />
<button id="shangchuan">上传文件</button>
<br />
<!-- 显示上传到服务器上的图片 -->
<img src="" id="img" width="500">
</body>
<script>
let shangchuan = document.querySelector('#shangchuan');
let file = document.querySelector('#file')
let img = document.querySelector('#img')
shangchuan.onclick = function() {
// 验证是否选择了文件
if (file.files.length <= 0) {
return alert('请选择要上传的文件')
}
let fd = new FormData();
// 向 FormData 中追加文件
fd.append('touxiang', file.files[0])
let xhr = new XMLHttpRequest()
xhr.open('POST', 'http://www.liulongbin.top:3006/api/upload/avatar');
xhr.send(fd)
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
let dataImg = JSON.parse(xhr.responseText)
if (dataImg.status === 200) {
// 上传成功把上传的图片显示在页面上
img.src = 'http://www.liulongbin.top:3006' + dataImg.url
} else {
// 上传失败把返回数据里的信息弹出
alert(dataImg.message)
}
}
}
}
</script>
5 显示文件上传进度
XMLHttpRequest Level2 对象，可以通过监听 xhr.upload.onprogress 事件，来获取到文件的上传进度。
语法格式：
let xhr = new XMLHttpRequest()
// 监听 xhr.upload.onprogress 事件
xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
// 计算出上传的进度
let percentComplete = Math.ceil((e.loaded / e.total) * 100);
console.log(percentComplete);
}
}
代码说明：
e.lengthComputable 是一个布尔值，表示当前上传的资源是否具有可计算的长度。
e.loaded 是已传输的字节。
e.total 是需要传输的总字节。
当文件上传成功时，还可以提示用户，这时用到 xhr.upload.onload 事件，
该事件是在 xhr.upload.onprogress 事件完成后触发，语法格式：
xhr.upload.onload = function() {
progress_bar.className = 'progress-bar progress-bar-success'
progress_bar.innerText = '图片上传成功！'
}
十七、了解同源策略和跨域
1 同源策略
① 什么是同源：
如果两个页面的协议，域名和端口都相同，则两个页面具有相同的源。端口不写则默认是 80。
② 什么是同源策略：
同源策略(英文全称Same origin policy) 是浏览器提供的一个安全功能。
浏览器规定，A网站的 JavaScript 不允许和非同源的B网站之间进行资源交互，例如：
(1) 无法读取非同源网页的Cookie、LocalStorage 和IndexedDB。
(2) 无法对非同源网页进行 DOM 操作。
(3) 无法向非同源地址发送 Ajax 请求。
2 跨域
① 什么是跨域
与同源相反，跨域指如果两个页面的协议，域名和端口有一个不同 或 全都不同。
② 浏览器对跨域请求的拦截
浏览器允许发起跨域请求，跨域请求可以正常发起，服务器也可以正常的处理并响应跨域请求，
但是响应的数据不会直接给浏览器，而是先给同源策略，由同源策略判断这次请求是不是跨域，
如果是跨域，服务器响应的数据就被同源策略拦截，浏览器就无法得到服务器响应回来的数据，
如果不是跨域，浏览器就可以得到服务器响应回来的数据。
③ 如何实现跨域请求
现如今，实现跨域请求，最主要的两种解决方案，分别是 JSONP 和 CORS。
JSONP：出现的早，兼容性好 (兼容低版本IE)。是前端程序员为了解决跨域问题，
迫想出来的一种临时解决方案。缺点是只支持GET请求，不支持POST请求。
CORS：出现的较晚，它是W3C标准，属于跨域请求的根本解决方案。支持GET和POST请求。
缺点是不兼容某些低版本的浏览器。
十八、JSONP
1 JSONP 的实现原理
<script>标签不受浏览器同源策略的影响，可以通过 src 属性，请求非同源的 js 脚本。
因此，JSONP的实现原理，就是通过<script>标签的src属性，请求跨域的数据接口，
并通过函数调用的形式，接收跨域接口响应回来的数据。
2 原生JS中的JSONP
<script>
function success(data) {
console.log(data);
}
</script>
<script src="http://www.liulongbin.top:3006/api/jsonp?callback=success&name=zs&age=20">
</script>
代码说明：
JSONP 和 Ajax 之间没有任何关系，不能把JSONP请求数据的方式叫做 Ajax，
因为 JSONP 没有用到 XMLHttpRequest 这个对象。那该如何接收服务器响应回来的数据呢？
这个时候我们可以自定义一个函数用来接收服务器响应回来的数据，然后利用查询字符串在接口
后面写上 callback=你自定义的函数，自定义函数里面有一个形参，用来接收服务器响应回来的数据，
callback=你自定义的函数 就是告诉服务器要调用那个函数。
3 jQuery中的JSONP
jQuery 提供的 $.ajax() 函数，除了可以发起真正的 Ajax 请求之外，还能够发起 JSONP 请求，例如：
$(function() {
$.ajax({
url: 'http://www.liulongbin.top:3006/api/jsonp?name=zzh&age=20',
dataType: 'jsonp',
success: function(res) {
console.log(res);
}
})
})
默认情况下，使用jQuery发起JSONP请求，会自动携带一个callback=jQueryxxx的参数，
jQueryxxx是随机生成的一个回调函数名称。
4 自定义参数及回调函数名称
在使用jQuery 发起JSONP请求时，如果想要自定义JSONP的参数以及回调函数名称，
可以通过如下两个参数来指定：
$(function() {
$.ajax({
url: 'http://www.liulongbin.top:3006/api/jsonp?name=zzh&age=20',
dataType: 'jsonp',
jsonp: 'callback',
jsonpCallback: 'zzh',
success: function(res) {
console.log(res);
}
})
})
jsonp 参数用来修改参数，但一般不修改，默认 callback 就行。
jsonpCallback 参数用来修改回调函数的名字。
5 jQuery中JSONP的实现过程
jQuery 中的JSONP，也是通过<script>标签的 src 属性实现跨域数据访问的，只不过，
jQuery 采用的是动态创建和移除<script>标签的方式，来发起 JSONP 请求。
● 在发起 JSONP 请求的时候，动态的向<header>标签 append 一个<script>标签。
● 在 JSONP 请求成功以后，动态的从<header>标签移除刚才 append 进去的<script>标签。
1012
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
