前后端交互--ajax详解

前后端交互

---

简单实现

• 服务端：

  const Koa = require("koa");
  const static = require("koa-static");
  const Router = require("koa-router");
  const koaBody = require("koa-body");
  
  let app = new Koa();
  let router = new Router();
  app.use(static(__dirname+"/static"));
  app.use(koaBody({
      multipart:true
  }))
  router.get("/",ctx=>{
      ctx.body = "some value...";
  })
  app.use(router.routes());
  app.listen(8989);
  

• 客户端：

  • 原生ajax写法

    • 新建一个XMLHttpRequest对象；

    let xhr = new XMLHttpRequest();
    

    • 配置请求参数

    xhr.open("get","/checkUser",true); //true是异步，false是同步
    

    • 接收返还值

     xhr.onload = function(){
        let res = JSON.parse(xhr.responseText);
     }
    

    • 发送服务器

    xhr.send();
    

---

针对ajax的详细解释

• get注意点

  • get通过parmas传参
  • get和querystring的问题,通过url传参

• post注意点

  • 发送数据时候需要设置http正文头格式；

    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");  //默认编码
    xhr.setRequestHeader("Content-type","multipart/form-data");  //二进制编码
    xhr.setRequestHeader("Content-type","application/json");  //json编码
    

  • 获取头部信息；

    • getAllResponseHeaders 或者是getResponseHeader ；

---

onreadystatechange

onreadystatechange：存有处理服务器响应的函数，每当 readyState 改变时，onreadystatechange 函数就会被执行。

readyState：存有服务器响应的状态信息。

• 0: 请求未初始化（代理被创建，但尚未调用 open() 方法）
• 1: 服务器连接已建立（open方法已经被调用）
• 2: 请求已接收（send方法已经被调用，并且头部和状态已经可获得）
• 3: 请求处理中（下载中，responseText 属性已经包含部分数据）
• 4: 请求已完成，且响应已就绪（下载操作已完成）

status常用状态码

HTTP状态码	描述
100	继续。继续响应剩余部分，进行提交请求
200	成功
301	永久移动。请求资源永久移动到新位置
302	临时移动。请求资源零时移动到新位置
304	未修改。请求资源对比上次未被修改，响应中不包含资源内容
401	未授权，需要身份验证
403	禁止。请求被拒绝
404	未找到，服务器未找到需要资源
500	服务器内部错误。服务器遇到错误，无法完成请求
503	服务器不可用。临时服务过载，无法处理请求

• 返还数据类型

  • 服务器返还json数据

    xhr.responseText  //来获取
    

  • 服务器返还xml数据

    xhr.responseXML //获取值
    

    • 重写response里的content-type内容
    • xhr.overrideMimeType(‘text/xml; charset = utf-8’)

• 同步及异步ajax；

  • 设置true和false区别；

---

利用FormData来实现文件上传

• 创建FormData对象

  let form = new FormData()
  

• 将文件添加到FormData实例中

  form.append("myfile",file)  //第一个参数对应的是key
  

• 上传文件到服务器

  xhr.send(form)
  

• 通过xhr实例的几个钩子事件，监控上传进度

  upload 事件

  xhr.upload
  

  • onloadstart 上传开始

   xhr.upload.onloadend
  

  • onprogress 数据传输进行中

  xhr.upload.onprogress
  

  • evt.total ：需要传输的总大小；

  • evt.loaded :当前上传的文件大小；

  • onabort 上传操作终止

  • onerror 上传失败

  • onload 上传成功

  • onloadend 上传完成（不论成功与否）

监听文件上传案例

<input type="file" class="myfile" />
进度：<progress value="0" max="100"></progress> <span class="percent">0%</span>
速度：<span class="speed">20b/s</span>
<button>点击上传</button>
<button>取消上传</button>
    
<script>
    let xhr = new XMLHttpRequest();
    let btns = document.querySelectorAll("button");
    let stime;
    let sloaded;
    btns[0].onclick = function () {
        let file = document.querySelector(".myfile").files[0];
        let form = new FormData();
        form.append("myfile", file);
        xhr.open("post", "/fileUpload", true);
        xhr.onload = function () {
            console.log(xhr.responseText);
        }
        xhr.upload.onloadstart = function(){
            console.log("开始上传");
            stime = new Date().getTime();
            sloaded = 0;
        }
        xhr.upload.onprogress = function(evt){
            let endTime = new Date().getTime();
            // 时间差；
            let dTime = (endTime - stime)/1000;
            // 当前时间内上传的文件大小
            let dloaded =  evt.loaded - sloaded;
            let speed = dloaded/dTime;
            let unit = "b/s";
            stime = new Date().getTime();
            sloaded = evt.loaded;
            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;
            // console.log(speed.toFixed(2));
            // console.log("正在上传");
            // 当前文件上传的大小evt.loaded
            // 需要上传文件的大小
           let percent =  (evt.loaded/evt.total*100).toFixed(0);
        //    console.log(percent);
            document.querySelector("progress").value = percent;
            document.querySelector(".percent").innerHTML = percent+"%";
        }
        xhr.upload.onload = function(){
            console.log("上传成功");
        }
        xhr.upload.onloadend = function(){
            console.log("上传完成");
        }
        xhr.upload.onabort = function(){
            console.log("取消上传");
        }
        xhr.send(form);
    }
    btns[1].onclick = function(){
        xhr.abort();
    }

</script>