AJAX-day02-AJAX原理

(创作不易，感谢有你，你的支持，就是我前行的最大动力，如果看完对你有帮助，请留下您的足迹）

目录

XMLHttpRequest

了解XMLHttpRequest

使用 XMLHttpRequest  

XMLHttpRequest - 查询参数

XMLHttpRequest - 数据提交

Promise

了解Promise

Promise - 三种状态

封装_简易axios_获取省份列表  

---

XMLHttpRequest

了解XMLHttpRequest

定义：

关系：axios 内部采用 XMLHttpRequest 与服务器交互 

好处：掌握使用 XHR 与服务器进行数据交互，了解 axios 内部原理

使用 XMLHttpRequest  

步骤：

1. 创建 XMLHttpRequest 对象

2. 配置 请求方法 和请求 url 地址

3. 监听 loadend 事件，接收 响应结果

4. 发起请求

XMLHttpRequest - 查询参数

定义：浏览器提供给服务器的 额外信息 ，让服务器返回浏览器想要的数据

语法：http://xxxx.com/xxx/xxx ? 参数名1=值1 & 参数名2=值2

XMLHttpRequest - 数据提交

需求：通过 XHR 提交用户名和密码，完成注册功能

核心：

请求头 设置 Content-Type：application/json

请求体 携带 JSON 字符串

  注册用户
  

Promise

了解Promise

定义：

好处：

1. 逻辑更清晰

2. 了解 axios 函数内部运作机制

3. 能解决回调函数地狱问题

语法：

Promise - 三种状态

作用：了解Promise对象如何 关联 的 处理函数 ，以及代码执行顺序

概念：一个Promise对象，必然处于以下几种状态之一

        待定（pending） ：初始状态，既没有被兑现，也没有被拒绝

        已兑现（fulfilled） ：意味着，操作成功完成

        已拒绝（rejected） ：意味着，操作失败

注意：Promise对象一旦被 兑现/拒绝

就是 已敲定 了，状态无法再被改变

封装_简易axios_获取省份列表  

需求：基于 Promise + XHR 封装 myAxios 函数，获取省份列表展示

步骤：

1. 定义 myAxios 函数，接收 配置对象 ，返回 Promise 对象

2. 发起 XHR 请求，默认请求方法 为 GET

3. 调用成功/失败的处理程序

4. 使用 myAxios 函数，获取 省份列表展示