目录
什么是AJAX？
如何使用AJAX？
语法
url详解
URL的概念
URL的组成
URL查询参数
axios
axios-查询参数
axios-请求配置
常用请求方法
axios-错误处理
HTTP协议
HTTP协议-请求报文
HTTP协议-响应报文
接口文档
AJAX原理
AJAX原理 - XMLHttpRequest
Promise
Promise - 三种状态
AJAX封装
什么是AJAX？
概念：AJAX是浏览器与服务器进行数据通信的技术。
定义：AJAX是异步的JavaScript和XML（Asynchronous JavaScript And XML）。简单点说，就是使用XMLHttpRequest对象与服务器通信。它可以使用JSON,XML,HTML和text文本等格式发送和接收数据。AJAX最吸引人的就是它的"异步"特性，也就是说它可以在不重新刷新页面的情况下与服务器通信，交换数据，或更新页面。
如何使用AJAX？
语法
引入axios.js：https://cdn.jsdelivr.net/npm/axios/dist/axios/min.js使用axios函数
传入配置对象再用.then回调函数接收结果，并做后续处理
接下来让我们通过代码演示看看ajax的作用吧，代码、需求及效果图如下：
可以看到，通过axios函数我们可以从url中获取数据资源，并进行处理，那么url是什么意思呢？接下来我们进行详细的了解。
url详解
URL的概念
Internet上的每一个网页都具有一个唯一的名称标识，通常称之为URL（Uniform Resource Locator, 统一资源定位器）。
它是www的统一资源定位标志，简单地说URL就是web地址，俗称“网址”。
URL的组成
URL由三部分组成：资源类型、存放资源的主机域名、资源文件名 也可认为由4部分组成：协议、主机、端口、路径。（很多时候端口都是隐藏的） 还可以认为由7部分组成：协议，域名，端口，虚拟目录，文件名，锚，参数 URL的一般语法格式：(带方括号[]的为可选项)：protocol :// hostname[:port] / path / [;parameters][?query]#fragment案例：https://www.baidu.com
协议：https
域名（IP）：www.baidu.com
端口（port）：443
资源路径：当没有资源路径时，可以默认是 / ，在各个网站通常有默认的路径如index.html
URL查询参数
定义：浏览器提供给服务器的额外信息，让服务器返回浏览器想要的数据
语法：http://xxxx.com/xxx/xxx?参数名1=值1&参数名2=值2
示例：假如前面的案例，我要获取河北省下辖市的信息，就可以写为：
http://hmajax.itheima.net/api/city?pname=河北省
axios
现在开始，我们对axios进行全面的了解和使用。
axios-查询参数
语法：使用axios提供的params选项
注意：axios在运行时把参数名和值，会拼接到url?参数名=值
axios({
url:'目标资源地址'
params:{
参数名:值
}
}).then(result=>{
//对服务器返回的数据做后续处理
})
那么让我们来使用查询参数查询一下云南省下辖市吧：
渲染图如上所示，可以看到我们的确拿到了对应的数据，那么此时我们就完成了对查询参数的学习了。
axios-请求配置
常用请求方法
现在我们已经可以从服务器拿到对应的数据了，那么接下来我们来学习一下然后对服务器数据做其他的相关操作：
请求方法：对服务器资源，要执行的操作
请求方法 操作GET 获取数据POST提交数据PUT修改数据（全部）DELETE删除数据PATCH修改数据（部分）
那么接下来我们就看看axios请求配置该如何操作吧：
url：请求的URL网址method：请求的方法，GET可以省略（不区分大小写）data：提交数据
axios({
url: '目标资源地址',
method: '请求方法',
data: {
参数名:值
}
}).then((result)=>{
// 对服务器返回的数据做后续处理
})
接下来我们使用POST完成一个案例吧：
打开网页-点击按钮后效果图->
再次点击按钮效果图->
axios-错误处理
通过刚才的案例，我们发现第二次点击按钮之后会输出错误信息，因为我们第二次点击注册按钮，原本的账号已经被我们注册过了，在服务器中已经不是唯一的了，所以给我们返回了一个报错信息，提示账号被占用，那么我们如何处理这种情况呢？
语法：在then方法的后面，通过点语法调用catch方法，传入回调函数并定义形参
axios({
//请求选项
}).then(result=>{
//处理数据
}).catch(error=>{
//处理错误
})
接下来我们继续使用刚刚的案例来完成错误处理的代码，需求：重复注册时通过弹窗提示用户错误原因
点击按钮重复注册后->
这里就可以看到，重复注册时，浏览器已经能够通过弹窗提示用户了。
HTTP协议
那么关于Post和Get......，我们要如何在浏览器中看到对应的信息呢？它们的原理是什么呢？接下来我们要开始针对HTTP进行学习。
HTTP协议：规定了浏览器发送及服务器返回内容的格式
HTTP协议-请求报文
请求报文：浏览器按照HTTP协议要求的格式，发送给服务器的内容
请求报文的组成：
请求行：请求方法，URL，协议请求头：以键值对的格式携带的附加信息，比如：Content-Type空行：分割请求头，空行之后的是发送给服务器的资源请求体：发送的资源
接下来我们继续用前面的案例，来看看HTTP的请求报文：
网络->左侧选择名称->标头->原始：这里就可看到请求行与请求头了
再点击负载：即可查看请求体
HTTP协议-响应报文
响应报文：服务器按照HTTP协议要求的格式，返回给浏览器的内容
响应报文的组成：
响应行（状态行）：协议、HTTP响应状态码、状态信息响应头：以键值对的格式携带的附加信息，比如：Content-Type空行：分割响应头，空行之后的是发送给服务器的资源响应体：返回的资源
HTTP响应状态码：用来表明请求是否成功完成
以下是各个状态码说明。例如：404（服务器找不到资源）
状态码说明 1xx
信息2xx成功3xx重定向消息4xx客户端错误5xx服务端错误
查看响应报文的方式与请求报文大致相同，只需要将请求标头换为响应标头，负载换为响应即可
接口文档
接口文档：描述接口的文章（后端工程师提供）
接口：使用AJAX和服务器通讯时，使用的URL，请求方法，以及参数
举例：下图为登录接口文档
这里给了我们请求方法、URL，以及需要的参数，那么我们用代码来写一下登入功能：
点击登录按钮->
以上就是接口文档的使用教程啦，接下来我们进入下一步的学习。
AJAX原理
AJAX原理 - XMLHttpRequest
定义：XMLHttpRequest(XHR)对象用于与服务器交互，通过XMLHttpRequest可以在不刷新页面的情况下请求特定URL，获取数据。这允许网页在不影响用户操作的情况下，更新页面的局部内容。XMLHttpRequest在AJAX变成中被大量使用。
关系：axios内部采用XMLHttpRequest与服务器交互
步骤：
创建XMLHttpRequest对象配置请求方法和请求url地址监听loadend事件，接收响应结果发起请求
const xhr = new XMLHttpRequest()
xhr.open('请求方法', '请求url网址')
xhr.addEventListener('loadend', () => {
//响应结果
console.log(xhr.response)
})
//发送请求
xhr.send()
我们继续用前面获取地区的案例来演示一下原生XML如何使用：
网页效果图->
接下来我们看看原生XML查询参数的使用案例：
再看看如何提交数据：
学习原生XML只是为了了解axios的原理，帮助我们更加方便的使用它，继续开始下一步的学习
Promise
由于AJAX是异步请求，对于有些场景，如果请求失败，那么需要如何操作呢？
这时候我们就需要Promise来帮助我们管理
定义：Promise对象用于表示一个异步操作的最终完成(或失败)及其结果值。
我们再了解下学习Promise有什么好处：
逻辑更清晰了解axios函数内部运作机制能解决回调函数地狱问题
// 1.创建Promise对象
const p = new Promise((resolve, reject) => {
//2.执行异步任务-并传递结果
//成功调用：resolve(值) 触发then()执行
//失败调用：reject(值) 触发catch()执行
})
// 3.接收结果
p.then(result => {
//成功
}).catch(error => {
//失败
})
让我们用代码看看Promise吧：
Promise - 三种状态
作用：了解Promise对象如何关联的处理函数，以及代码执行顺序
new Promise() 此时的Promise状态：待定resolve() 此时的Promise状态：已兑现（.then(回调函数)）reject() 此时的Promise状态：已拒绝（.catch(回调函数)）
待定(pending)：初始状态，既没有被兑现，也没有被拒绝
已兑现(fulfilled)：意味着，操作成功完成
已拒绝(rejected)：意味着，操作失败
注意：Promise对象一旦被兑现/拒绝，就无法改变状态了
AJAX封装
现在我们已经学习了XML和Promise，也就是axios内部最核心的两个技术我们都已经掌握，那么现在我们来像axios函数一样进行一个调用。
需求：基于Promise + XHR封装myAxios函数，获取省份列表展示
步骤：
定义myAxios函数，接收配置兑现，返回Promise对象发起XHR请求，默认请求方法为GET调用成功/失败的处理程序使用myAxios函数，获取省份列表展示
代码实现：
网页部分效果图->
再看看axios查询参数的封装案例吧：
最后看看提交数据的封装，我们也就完成对AJAX的学习了：