ajax1总结

### 1.数据交换

```js
1.数据交换格式：服务器端与客户端之间进行数据传输与交换的格式。
2.JOSN：JSON 的英文全称是 JavaScript Object Notation，即JavaScript对象表示法。简单来讲，JSON的本质是字符串。
3.JOSN作用：JSON是一种轻量级的文本数据交换格式，在作用上类似于 XML，专门用于存储和传输数据，但是 JSON 比 XML 更小、更快、更易解析。
4.数据转换 
序列化：  把数据对象转换为字符串
         JOSN.stringify() 因为只能传输字符串
反序列化：把字符串转换为对象数组        
         JOSN.parse()  对象数组方便操作
```

### 2.设置请求时限

```js
1.设置请求时间
xhr.timeout=(输入时间)
2.指定回调函数
xhr.ontimeout=function(e){}
```

### 3.FormData函数

```js
方法一：通过apend添加（常用方法）
// 1. 新建 FormData 对象
 var fd = new FormData()
 // 2. 为 FormData 添加表单项
 fd.append('uname', 'zs')
 // 3. 创建 XHR 对象
 var xhr = new XMLHttpRequest()
 // 4. 指定请求类型与URL地址
 xhr.open('POST', 'http://www.liulongbin.top:3006/api/formdata')
 // 5. 直接提交 FormData 对象，这与提交网页表单的效果，完全一样
 xhr.send(fd)

方法二：对于表单适用（特殊情况）
 // 获取表单元素
var form = document.querySelector('#form1')
// 监听表单元素的 submit 事件
form.addEventListener('submit', function(e) {
 e.preventDefault()
 // 根据 form 表单创建 FormData 对象，会自动将表单数据填充到 FormData 对象中
 var fd = new FormData(form)         //将表单对象直接放在构造函数中
 var xhr = new XMLHttpRequest()
 xhr.open('POST', 'http://www.liulongbin.top:3006/api/formdata')
 xhr.send(fd)
 xhr.onreadystatechange = function() {}
})

补充：上传文件获得文件列表files属性
var files = document.querySelector('#file1').files
```

### 4.显示文件上传进度

```js
// 创建 XHR 对象
var xhr = new XMLHttpRequest()
// 监听 xhr.upload 的 onprogress 事件
xhr.upload.onprogress = function(e) {
     // e.lengthComputable 是一个布尔值，表示当前上传的资源是否具有可计算的长度
     if (e.lengthComputable) {
         // e.loaded 已传输的字节
         // e.total 需传输的总字节
         var percentComplete = Math.ceil((e.loaded / e.total) * 100)
     }
 }