数据交换格式

XML

写法：

• 一个文档有且只有一个根标签
• 标签必须闭合
• 属性值必须加引号

如果说服务器返回的数据是xml格式的

• 前端需要把服务器返回的xml当做document对象来处理
• 目前无法演示，自己写接口的时候，我们可以测试一下。

JSON

写法：

• 一个json文件（数据），最大的括号只能有一个
• 字符串，必须使用双引号

JSON的数据类型：

• number
• string
• null
• bool
• array
• object

json中不能有 undefined。也不能加注释

XHR（level2）新特性

设置请求超时处理

// 在发送请求之前，设置
xhr.timeout = 10; // 单位：毫秒
xhr.ontimeout = function () {// 如果请求响应整个过程超过10毫秒，触发该函数，可以给一个提示alert('请求超时，请稍后再试');
}

如果请求超过10毫秒还没有完成，则会取消这次请求

FormData

• h5新增的一个对象
• Form-表单、Data-数据。所以他用来收集表单数据

jQuery中的serialize() 和 FormData的区别

• serialize() 只能收集到表单中的文本数据，不能收集文件，也就不能实现文件上传
• FormData，既能收集表单中的文本数据，也能收集文件，就能够实现文件上传
• serialize() 得到的数据格式是 查询字符串 id=11&name=zs&age=22...
• FormData() 得到的数据格式是 对象，传输的数据我们看不到，是二进制形式的数据

使用方法

• let fd = new FormData(表单的DOM对象) fd对象中就包含了表单中所有的数据

注意事项

• 实例化的时候，参数必须是表单的DOM对象
• FormData收集表单数据的时候，也是根据表单各项的name属性来收集，也就是表单各项必须有name属性
  • select>option （name要设置给select标签，value要设置给每个option）

FormData相关API

• get(name) — 获取到该项的值
• getAll() — 获取到该项所有的值
• append(key, value) — 向fd对象中追加一个值
• set(key, value) — 设置一个值，主要用于改变fd对象中的一个值

提交fd数据到接口

• 使用原生的xhr对象提交
  • 必须使用POST方式
  • 使用支持FormData的接口（之前使用的全部接口，都不支持FormData）
  • 提交数据，直接 send(fd);
  • 不用指定请求头，浏览器会自动添加合适的请求头。
• 使用$.ajax()提交
  • 提交的数据 data: fd
  • 必须加 contentType: false
  • 必须加 processData: false

使用的接口

• 上传文件的接口
  • /api/upload/avatar
  • 请求参数：fd 对象
    • 必须有文件上传，并且文件域的name属性值必须是 avatar
  • 返回值：上传后的图片路径
• 用于测试FormData的接口
  • /api/formdata
  • 不能用于上传文件，可以设置任何文本类型的值

文件上传

使用的接口，上面的 /api/upload/avatar

通过输出文件域的DOM对象，得到如下信息：

可以根据 文件域DOM对象.files.length 来判断是否选择了文件。

上传进度条

了解axios

GET和POST的区别

同步和异步

跨域问题