初识ajax

ajax是： Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML）

基本使用

let hxr =new XMLHttpRequest();
xhr.open("get",url,true); //true是异步，false是同步
xhr.onload=function(){
 let res=JSON.parse(xhr.responseText);
}
xhr.send();

get 和past

• get注意点

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

• post注意点

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

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //默认编码
xhr.setRequestHeader("Content-type","mulitipart/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: 请求已完成，且响应已就绪（下载操作已完成）

利用FormData来实现文件上传

• 监控上传进度
  upload 事件

• onloadstart 上传开始
• onprogress 数据传输进行中
  • evt.total ：需要传输的总大小；
  • evt.loaded :当前上传的文件大小；
• onabort 上传操作终止
• onerror 上传失败
• onload 上传成功
• onloadend 上传完成（不论成功与否）

//html
 <input type="file" class="myfile" /> //multiple允许选择多个文件
    进度：<progress value="0" max="100"></progress> <span class="percent">0%</span>
<br/>
    速度：<span class="speed">20b/s</span>
    <button>点击上传</button>
    <button>取消上传</button>

//javascript
let xhr = new XMLHttpRequest();
let btns = document.querySelectorAll("button");
let sTime;
let sloaded;
btn[0].onclick = function () {
    let file = document.querySelector(".myfile").files[0];
    let form = new FormData();
    form.append("myfile", file);
    xhr.open("post", url, true);
    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 = ent.loaded - sloaded;       // 当前时间内上传的文件大小
        let speed = dloaded / dTime;
        let unit = "b/s";
        stime = new Date().getTime();
        sloaded = ent.loaded;
        if (speed / 1024 > 1) {
            unit = "kb/s";
            speed = speed / 1024;
        }
        if (speed / 1024 > 1) {
            unit = "mb/s";
            speed = speed / 1024;
        }
        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();
}