1.XMLHttpRequest基本使用
1.1什么是XMLHttpRequest
XMLHttpRequest简称xhr，是浏览器提供的JavaScript对象，通过它，可以请求服务器上的数据资源。
1.2使用xhr发起GET请求
步骤
1.创建一个xhr对象
2.调用xhr.open()函数
3.调用xhr.send()函数
4.监听xhr.onreadystatechange事件
1.3了解xhr对象的readyState属性
xhr对象的readyState属性，用来表示当前 Ajax 请求所处的状态，每个Ajax请求必然处于以下状态中的一个：
1.4使用xhr发起带参数的GET请求
使用xhr对象发起带参数的GET请求时，只需要在调用xhr.open期间，为URL地址指定参数即可：
这种在URL后面拼接的参数，叫做查询字符串
1.5查询字符串
1.什么是查询字符串
定义：查询字符串（URL参数）是指在URL的末尾加上用于向服务器发送信息的字符串（变量）。
格式：将英文的?放在URL的末尾，然后加上参数=值，想加上多个参数的话，使用&符号进行分隔，以这个形式，可以将想要发送给服务器的数据添加到URL中。
2.GET请求携带参数的本质
无论是使用$.ajax()，还是使用$.get()，又或者直接使用xhr对象发起GET请求，当需要携带参数的时候，本质上，都是直接将参数以查询字符串的形式，追加到URL地址后面，发送到服务器的。
1.6URL编码与解码
1.什么是URL编码
URL地址中，只允许出现英文相关的字母、标点符号、数字，因此，在URL地址中不允许出现中文字符。
如果URL中需要包含中文这样的字符，则必须对中文字符进行编码。
URL编码的原则：使用安全的字符（没有特殊用途或者特殊意义的可打印字符）去表示那些不安全的字符
URL编码原则的通俗理解:使用英文字符去表示非英文字符
2.如何对URL进行编码和解码
浏览器提供了URL编码与解码的API，分别是：
编码函数：encodeURL()
解码函数：decodeURl()
1.7使用xhr发起POST请求
步骤
1.创建xhr对象
2.调用xhr.open()函数
3.设置Content-Type属性（固定写法）
4.调用xhr.send()函数，同时指定要发送的数据
5.监听xhr.onreadystatechange事件
2.数据交换格式
2.1什么是数据交换格式
数据交换格式就是服务器端与客户端之间进行数据传输与交换的格式。
前端领域，经常提到的两种两种数据交换格式分别是XML和JSON，其中XML用的非常少，所以重点学习JSON的数据交换
2.2XML
1.什么是XML
XML的英文也称是EXtensible Markup Language，翻译过来就是可扩展标记语言。所以XML和HTML相似，也是一种标记语言
2.XML和HTML的区别
XML和HTML虽然都是标记语言，但他们两者之间没有任何关系
HTML：用来描述网页上的内容，是网页内容的载体
XML：用来传输和存储数据，是数据的载体
3.XML缺点
1.XML格式臃肿，和数据无关的代码太多，体积大，传输效率低
2.在JavaScript中解析比较麻烦
2.3JSON
1.什么是JSON
JSON的全称是JavaScript Object Notation，即JavaScript对象表示法，简单来说JSON就是JavaScript对象和数组的字符串表示法，他使用文本表示一个JS对象或数组的信息，因此，JSON本质是字符串。
作用：JSON是一种轻量级的文本数据交换格式，在作用上类似于XML，专门用于储存和数据传输，但是JSON比XML更小、更快、更容易解析。
现状：JSON是2001年被推广和使用的数据格式，到现在为止，JSON已经成为了主流的数据交换格式
2.JSON的两种结构
JSON就是用字符串来表示JavaScript中的对象和数组。所以，JSON中包含对象和数组两种结构，通过两种结构的相互嵌套，可以表示各种的复杂的数据结构。
对象结构：对象结构在JSON表示为{}括起来的内容。数据结构为{key：value，key：value，...}的键值对结构。其中，key必须使用英文的双引号包裹的字符串，value的数据类型可以是数据、字符串、布尔值、null、数组、对象6种类型
3.JSON语法注意事项
1.属性名必须使用双引号来包裹
2.字符串类型的值也必须使用双引号来包裹
3.JSON中不允许使用单引号表示字符串
4.JSON中不能写注释‘
5.JSON的最外层，必须是对象或数组的形式
6.不能是用undefined或函数作为JSON的值
JSON的作用：在计算机和网络之间存储和传输数据的
JSON的本质：用字符串来表示JavaScript对象数据和数组数据，所以JSON就是一个字符串
4.JSON和JS对象的关系
JSON是JS对象的字符串表示法，它使用文本表示一个JS对象的信息，本质是一个字符串例如：
5.JSON和JS对象的互转
使用JSON.parse()方法，可以把JSON字符串转换为JS对象
使用JSON.stringify()方法，可以把JS转换为JSON字符串
6.序列化和反序列化
把数据对象转换成字符串的过程，叫做序列化，例如调用JSON.stringify()函数的操作，叫做JSON序列化
把字符串转换成数据对象的过程，叫做反序列化，例如调用JSON.parse()函数的操作，叫做JSON反序列化
3.封装自己的Ajax函数
3.1要实现的效果
3.2定义options参数选项
itheima()函数是我们自定义的Ajax函数，他接收一个配置对象作为参数，配置对象中可以配置如下属性：
1.method 请求的类型
2.url 请求的URL地址
3.data 请求携带的数据
4.success 请求成功之后的回调函数
3.3处理data参数
需要把data对象，转化成查询字符串的格式，从而提交给服务器，因此提前定义resolveData函数如下：
3.4.定义itheima函数
在itheima()函数中，需要创建一个xhr对象，并监听onreadystatechange事件：
3.5判断请求的类型
不同的请求类型，对应xhr对象的不同操作，因此需要对请求类型进行if...else...的判断
4.XMLHttpRequest Level2的新特性
4.1认识XMLHttpRequest Level2
1.旧版XMLHTTP Request的缺点
（1）只支持文本数据的传输，无法用来读取和上传文件
（2）传送和接收数据时，没有进度信息，只能提示有没有完成
2.XMLHttpRequest Level2的新功能
（1）可以设置HTTP请求的时限
（2）可以使用FormData对象管理表单数据
（3）可以上传文件
（4）可以获取数据传输的进度信息
4.2设置HTTP请求时限
有的时候，Ajax操作很耗时，如果网速慢，用户可能要等很久，新版本的XMLHttpRequest对象，就增加了timeout属性，可以设置HTTP请求的时限：
<script>
let xhr = new XMLHttpRequest()
// 设置超时时限
xhr.timeout = 3;
// 设置超时后的处理函数
xhr.ontimeout = function () {
console.log('请求超时了！');
}
xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks')
xhr.send()
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
}
</script>
4.3FormData对象管理表单数据
Ajax操作是用来提交表单数据的，为了方便表单处理，HTML5新增了一个FormData对象，可以模拟表单操作：
FormData对象也可以直接用来获取网页表单的值，
<body>
<form id="form1">
<input type="text" name="uname" autocomplete="off">
<input type="password" name="upwd">
<button type="submit"></button>
</form>
<script>
// 1.通过 DOM 操作，获取到 Form 表单元素
let form = document.querySelector('#form1');
form.addEventListener('submit', function (e) {
// 阻止表单的默认提交行为
e.preventDefault()
// 创建 FormData 快速获取到 form 表单中的数据
let fd = new FormData(form);
let xhr = new XMLHttpRequest();
xhr.open('POST', 'http://www.liulongbin.top:3006/api/formdata')
xhr.send(fd)
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(JSON.parse(xhr.responseText));
}
}
})
</script>
</body>
4.4上传文件
新版XMLHttpRequest 对象，不仅可以发送文本信息，还可以上传文件。
实现步骤
1.定义UI结构
2.验证是否选择文件
3.向FormData中追加文件
4.使用xhr发起上传文件的Ajax请求
5.监听onreadystatechange事件
1.UI框架
<body>
<!-- 1.文件选择框 -->
<input type="file" id="file1">
<!-- 2.上传文件的按钮 -->
<button id="btnUpload">上传文件</button>
<br>
<!-- 3.img标签，来显示上传成功后的图片 -->
<img src="" alt="" id="img" width="800">
</body>
