前后端交互

Ajax

Ajax即"Asynchronous Javascript And XML"(异步 Javascript 和 XML)
XML是和JSON一样是目前主流的两种返还格式
ajax前端交互方式之一，最流行
ajax的特点：无刷，局部更新

ajax的基本使用

1.新建XMLHttpRequest对象,实例化ajax对象
 let xhr = new XMLHttpRequest()
2.创建请求并配置参数
 参数1：提交方式 get/post
 参数2：提交地址
 参数3：布尔值，是否异步 true表示异步
 xhr.open("get",'/checkUserName',true)
3.接收返还值,请求成功后，执行该函数
 xhr.onload=function(){}
 返还值为xhr.responseText
4.发送服务器
 xhr.send()

ajax中的upload事件

1.xhr.upload.onloadstart=function(){} 文件上传开始时执行
2.xhr.upload.onprogress=function(){}
 数据传输进行中执行，执行多次，会返还一个参数，evt接收
 evt.total 表示需要传输的总大小
 evt.loaded 表示当前上传的文件大小
3.xhr.abort() 上传操作终止(取消上传)
4.xhr.upload.onerror=function(){} 上传失败后执行
5.xhr.upload.onload=function(){} 上传成功后执行
6.xhr.upload.onloadend=function(){} 上传完成后执行(不论成功与否)

xhr.onreadystatechange=function(){}
存有处理服务器响应的函数，每当 readyState 改变时，onreadystatechange 函数就会被执行
readyState：存有服务器响应的状态信息。
  -0: 请求未初始化（代理被创建，但尚未调用 open() 方法）
  -1: 服务器连接已建立（open方法已经被调用）
  -2: 请求已接收（send方法已经被调用，并且头部和状态已经可获得）
  -3: 请求处理中（下载中，responseText 属性已经包含部分数据）
  -4: 请求已完成，且响应已就绪（下载操作已完成）
status常用状态码
  100继续。继续响应剩余部分，进行提交请求
  200成功
  301永久移动。请求资源永久移动到新位置
  302临时移动。请求资源零时移动到新位置
  304未修改。请求资源对比上次未被修改，响应中不包含资源内容
  401未授权，需要身份验证
  403禁止。请求被拒绝
  404未找到，服务器未找到需要资源
  500服务器内部错误。服务器遇到错误，无法完成请求
  503服务器不可用。临时服务过载，无法处理请求

返回数据类型

 服务器返还json数据 xhr.responseText
 服务器返还XML数据 xhr.responseXML

提交方式

 get
   明文传参,头部传参
   可以通过params和query方式传参
 post
   密文传参，正文传参，传参前将数据转换为字符串格式
   post传参是没有数据量限制的，通常会是服务器限制
   传参需要设置头部
    第一种头部：默认值
    xhr.setRequestHeader("content-type","application/x-www-form-urlencoded")
    第二种：二进制编码
    xhr.setRequestHeader("content-type","multipart/form-data")
    第三种:json格式
    xhr.setRequestHeader("content-type","application/json")

query的方式传参
 get与post都可以使用
 路径之后/?属性名=属性值&属性名=属性值
params的方式传参
 必须给参数，否则地址错误
 传递：路径之后/属性值
 接收：路由中/:属性名
      ctx.params获取

FormData

FormData文件上传

1.创建formData对象
let form = new FormData()
2.将需要上传的文件信息，添加到form中
form.append()
参数1：自定义名称，属性名
参数2：属性值
3.使用ajax，设置post
4.将form以明文方式上传

好处：1.不需要设置文件头
2.键值对存储，方便读取
3.可以传入文字，对象