Ajax，FormData

 Ajax 的实现步骤：

1. 创建ajax对象：

new XMLHttpRequest();

2. 告诉Ajax 对象要向哪里发送请求，以什么方式

open 函数的两个参数，请求方式和请求地址

open( 'get' , 'http://localhost:3000/dizhi' )

3. 发送请求

send()

4. 获取服务器端响应到客户端的数据

因为不可能发送完直接响应，所以需要绑定 onload 事件，响应成功之后会自动触发

xhr.onload = function() {

console.log( xhr.responseText )

}

5. 服务器端向客户端响应：使用get () 创建一个路由

app = express();

app.get( 'dizhi' , (req, res) => {

res.send(' hello ')

})

注意： 在http 请求与响应的过程中，无论是请求参数还是响应内容，如果是对象类型，最终都是会被转换为对象字符串传输。(  typeof 结果 == 是字符串string  )

1. JSON.parse() 将 json 字符串转换为 json 对象 

请求参数的格式： 参数名称等与参数值，多个参数之间用 and符& 进行拼接

1.  post 请求方式的请求参数不是放在地址栏后面，是放在请求体 send() 中，而且需要在请求报文中明确设置请求参数内容的类型  Content-Type:  

2.  设置请求报文当中的报文头信息： 设置请求参数的格式类型： xhr.setRequestHeader( ' ContentType ', 'application/x-www-form-urlencoded' );  xhr.send( ' name=zhangsan&age=20 ' )

请求报文：

1.  在 HTTP 请求和响应的过程中传递的数据块就叫做报文， 包括要传送的数据和一些附加的信息，这些数据和信息要遵守规定好的格式

2.  报文头 存储的是一些键值对的信息， 报文体  主要存储的是一些内容（post请求参数）

3.  报文头和报文体，在请求的过程中，整体的被发送到服务器端

4.  在服务器端接受post 请求参数： 借助 body-parser 这个解析器；使用req.body 来获取客户端传递给服务器端的 post 请求参数

5. form data 里面就是 post 请求参数（network -> xhr -> post -> header -> form data）

 请求参数的格式：

1.  application/x-www-form-urlencoded

2.  application/json

3. 传递请求参数的时候 json 又必须转换为 json 字符串：JSON.stringify()

4. request payload 里面放的是客户端向服务器端传递的 json 类型的数据

5. app.use( bodyParser.urlencoded() ) 改为 app.use( bodyParser.json() )

注意： get 请求是不能提交 json 对象的数据格式的， 传统网站的表单提交也是不支持 json 对象数据格式的

Ajax 状态码：

0: 请求未初始化（还没有调用open() ）

1: 请求已经建立，但是还没有发送（ 还没有调用send() ）

2: 请求已经发送

3: 请求正在处理，通常响应中已经有部分数据可以用

4: 响应已经完成，可以通过并使用服务器的响应了

 获取Ajax 状态码： xhr.readyState

onreadystatechange 事件：当ajax 状态码发生变化的时候自动触发该事件

 结果： 顺序输出 0，1，2，3，4

ajax 错误处理：

FormData 对象的作用：

1. 模拟HTML 表单，相当于将HTML 表单映射成表单对象，自动将表单对象中的数据拼接成请求参数的格式

2. 异步上传二进制文件（如：图片文件，视频文件，音频）

使用：

1. 准备 HTML 表单：

2. 将HTML 表单 转化为 formData 对象：

let form = document.querySelector('#form')

let formData = new FormData(form)

3. 提交表单对象：xhr.send( formData )  formdata 不能用于get 请求

 客户端：

 服务器端如何接收：

使用formidable 插件获取 客户端发送过来的 fromdata 对象

app.post( '/formdata', (req,res) =>{
    //创建formdata 表单解析对象
    const form = new formidable.IncomingForm()
    //解析客户端传递过来的fromdata 对象,fieds 表单中普通请求参数，files 文件上传相关信息
    form.parse(req, (err, fields, files)=>{
        res.send(fields)
    })
})

formdata 对象的实例方法：

1. formdata.get('key')  获取表单对象属性的值

2. formdata.set('key', 'value')  设置表单对象中属性的值 ,不管输入的是什么，最后向服务器端发送的都是set 设置的值。如果设置的属性是已经存在的，则会覆盖属性原有的值，如果是不存在的，就会创建这个表单属性以及值

3. formdata.delete('key')  删除表单对象中属性的值

4. formdata.append('key', 'value')  向表单中追加值

 注意：set在属性名已经存在的情况下会覆盖，append 会保留两个值

 formdata 文件上传：

1. 准备文件选择控件：

 代码：

 服务器端：

 保留文件上传的后缀名： form.keepExtensions = true;

文件上传进度展示：

 

 图片即时预览：

服务器端代码：

 客户端：

 动态创建标签，而不是直接获取HTML中的标签，是因为不想用户看到图片加载的过程，而是想等图片加载完成之后，再设置src的属性。