Ajax-3

一.图片上传

        1.获取图片文件对象

        2.使用FormData携带图片文件

const fd = new FormData()
fd.append(参数名, 值)

         3.提交表单数据到服务器，使用图片url网址

二.AJAX原理—XMLHttpRequest

        定义：XMLHttpReques（XHR）对象用于与服务器交互。通过XMLHttpRequest可以不断刷新页面的情况下请求特定URL，获取数据。这允许网页在不影响用户操作的情况下，更新页面的局部内容。XMLHttpRequest在AJAX编程中被大量使用

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

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

        使用XMLHttpRequest

        步骤：
                1.创建XMLHttpRequest

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

                3.监听loadend时间，接收响应结果

const xhr = new XMLHttpRequest()
xhr.open('请求方法', '请求url网址')
xhr.addEventListener('loadend', () => {
    console.log(xhr.respone)
})
xhr.send()

三.Promise-三种状态

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

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

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

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

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

        

注意：Promise对象一旦被兑现/拒绝就是已敲定了，状态无法再被改变

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

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

步骤：

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

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

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

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

            

五.封装_简易axios_获取地区列表

需求：修改myAxios函数支持传递查询参数，获取“辽宁省”，“大连市”对应列表展示

步骤：

1.myAxios函数调用后，传入params选项

2.基于URLSearchParams转换查询参数字符串

3.使用自己封装的myAxios函数展示地区列表

六.封装_简易axios_注册用户

需求修改myAxios函数支持传递请求体数据，完成注册用户功能

步骤：

1.myAxios函数调用后，判断data选项

2.转换数据类型，在send方法中发送

3.使用自己封装的myAxios函数完成注册用户功能