前后端交互

ajax

XMLHttpRequest对象

ajax的基本使用

• 1.实例化对象
  let xhr = new XMLHttpRequest();

• 2.创建请求并配置参数
  //参数1：提交方式
  //参数2：提交地址 ?属性值=属性名（前端页面传参）
  //参数3：是否异步 true表示异步
  xhr.open(“get”,/checkUserName?username=${this.value}&age=20,true);

• 3.在服务器端请求结束响应之后，传过来responseText

  xhr.onload = function(){
    console.log(xhr.responseText);
    // let obj1 = xhr.responseText;              //字符串
    let obj2 = JSON.parse(xhr.responseText);     //对象
    // console.log(obj1)
    // console.log(obj2)
    document.querySelector(".exchange").innerHTML = obj2.info;
  }

• 4.发送服务器
  xhr.send();

使用post传参，是需要设置头部信息

• 第一种：默认值
  // xhr.setRequestHeader(“content-type”,“application/x-www-form-urlencoded”)

• 第二种：二进制编码 （上传文件，图片）
  // xhr.setRequestHeader(“content-type”,“multipart/form-data”)

• 第三种：json格式
  // xhr.setRequestHeader(“content-type”,“application/json”)

FormData对象

• 创建FormData对象
  let form = new FormData();

把数据放到form中的三个好处：

• 1.不需要设置文件头
• 2.把数据按照键值对的方式储存起来
• 3.可以存储一些相对描述性数据（文字，对象等）

//参数1：属性名（自定义） 参数2：属性值

 form.append("img",file); //将需要上传的文件信息，添加到form中
        form.append("name","张三");

let  xhr = new XMLHttpRequest();
            //get 无法上传文件（get的传参数都在头部url）
            //文件需要通过正文的方式,post的提交方式，参数在正文中
            xhr.open("post","/upload",true);
            xhr.onload = function(){
                console.log(xhr.responseText);
            }
            xhr.send(form);

进度条

xhr.upload.onloadstart = function(){
                console.log("开始上传");
                //在开始上传的时候记录时间，和开始上传的内容
                stime = new Date().getTime();
                sloaded=0;

            }
            xhr.upload.onprogress = function(evt){
                console.log("上传中。。");

                //进度条
                //当前文件上传的大小：  ect.loaded
                //需要传输的总大小 ：   evt.total
                //toFixed:谁调用它谁取整
               let percent = ((evt.loaded / evt.total) * 100).toFixed(0)
               document.querySelector("progress").value = percent;
               document.querySelector(".percent").innerHTML = percent + "%";
            
                //上传速度
                let endTime = new Date().getTime();
                //1.时间差（每个时间段）  结束时间 - 开始时间
                let dTime = (endTime - stime) / 1000;
                console.log(dTime);

                //2.当前时间段内上传的文件大小 = 当前文件上传的大小 - 之前的
                let dloaded = evt.loaded - sloaded;

                //3.当前速度 = 当前上传速度 / 当前的时间差
                let speed = dloaded / dTime;

                //4.重置时间
                stime = new Date().getTime();
                sloaded = evt.loaded;   //存储内容为：每次当前段上传的内容存进去
                console.log(speed);

                //单位 
                let unit = "b/s";
                if(speed / 1024 > 1){
                    unit = "kb/s"
                    speed = speed /1024
                }
                if(speed / 1024 > 1){
                    unit = "mb/s"
                    speed = speed /1024
                }

                document.querySelector(".speed").innerHTML = speed.toFixed(2) + unit;

            }
            xhr.upload.onload = function(){
                console.log("上传成功");
            }

            xhr.upload.onerror = function(){
                console.log("上传失败");
            }

            xhr.upload.onloadend = function(){
                console.log("上传完成");
            }
            xhr.send(form);