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注意點(diǎn)

• get通過parmas傳參
• get和querystring的問題,通過url傳參

• post注意點(diǎn)

• 發(fā)送數(shù)據(jù)時候需要設(shè)置http正文頭格式；

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //默認(rèn)編碼
xhr.setRequestHeader("Content-type","mulitipart/form-data");//二進(jìn)制編碼
xhr.setRequestHeader("Content-type","application/json"); //json編碼

• 獲取頭部信息；

getAllResponseHeaders 或者是getResponseHeader ；

onreadystatechange

onreadystatechange：存有處理服務(wù)器響應(yīng)的函數(shù)，每當(dāng) readyState 改變時，onreadystatechange 函數(shù)就會被執(zhí)行。
readyState：存有服務(wù)器響應(yīng)的狀態(tài)信息。

• 0: 請求未初始化（代理被創(chuàng)建，但尚未調(diào)用 open() 方法）
• 1: 服務(wù)器連接已建立（open方法已經(jīng)被調(diào)用）
• 2: 請求已接收（send方法已經(jīng)被調(diào)用，并且頭部和狀態(tài)已經(jīng)可獲得）
• 3: 請求處理中（下載中，responseText 屬性已經(jīng)包含部分?jǐn)?shù)據(jù)）
• 4: 請求已完成，且響應(yīng)已就緒（下載操作已完成）

利用FormData來實(shí)現(xiàn)文件上傳

• 監(jiān)控上傳進(jìn)度
  upload 事件

• onloadstart 上傳開始
• onprogress 數(shù)據(jù)傳輸進(jìn)行中
  • evt.total ：需要傳輸?shù)目偞笮。?/li>
  • evt.loaded :當(dāng)前上傳的文件大?。?/li>
• onabort 上傳操作終止
• onerror 上傳失敗
• onload 上傳成功
• onloadend 上傳完成（不論成功與否）

//html
 <input type="file" class="myfile" /> //multiple允許選擇多個文件
    進(jìn)度：<progress value="0" max="100"></progress> <span class="percent">0%</span>
<br/>
    速度：<span class="speed">20b/s</span>
    <button>點(diǎn)擊上傳</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;       // 當(dāng)前時間內(nèi)上傳的文件大小
        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();
}