原生 js 中 XMLHttpRequest

完整文檔

使用 XMLHttpRequest 對象的 open() 方法來初始化一個請求，open() 方法的語法格式如下：

XMLHttpRequest.open(method, url, async, user, password);
參數說明如下：
method：請求的類型（使用的 HTTP 方法），例如 GET、POST、PUT、HEAD、DELETE 等；
url：請求的地址；
async：可選參數，布爾類型，表示是否請求是否異步執行，默認值爲 true；
user：可選參數，表示用戶名，主要用來認證，默認值爲 null；
password：可選參數，表示密碼，同樣用來認證，默認值爲 null。

XMLHttpRequest  寫法

1、new XMLHttpRequest();
2、上傳進度
3、open()
4、設置header
5、post 方式組裝數據
6、send()

get 方法

function jsGetRequest() {
    var url = "http://casphp.com/api/AjaxRequest/jsAjaxGet";
    var canshu="id=11&name=jsGetRequest1&char=中文數據";
    canshu+='&'+document.cookie;  
    //實例化一個 XMLHttpRequest 對象
    let xhr = new XMLHttpRequest();
    xhr.open('GET', url+'?'+canshu); //設置請求方式及接口地址
    xhr.setRequestHeader("Authorization","token_value");　　//設置請求頭認證,header 設置必須放在 open() 後面
    //xml.setRequestHeader("Cookie","cookiename=value");
    xhr.withCredentials = true; //一個布爾值，用來指定跨域 Access-Control 請求是否應帶有授權信息，如 cookie 或授權 header 頭。
   // xhr.responseType='json';// 請求所期待返回的數據類型
    xhr.send(); // 一般放在最後
    xhr.onreadystatechange = (e) => {　　//服務端響應後
        /*
        0 未打開，xhr.open()方法還未被調用.
        1 未發送, xhr.send()方法還未被調用.
        2 已獲取響應頭,xhr.send()方法已經被調用, 響應頭和響應狀態已經返回.
        3 正在下載響應體, xhr.響應體下載中; responseText中已經獲取了部分數據.
        4 請求完成, 整個請求過程已經完畢.
        * */
        if (xhr.readyState == 4) {　　//判斷客戶端是否可以使用
            if(xhr.status == 200){    //表示成功處理請求
                // 如果定義爲  xhr.responseType='json';，控制檯包提示格式錯誤，建議不設置，使用默認設置
                console.log(xhr.responseText)
            }else{
                console.log(xhr.status+' '+xhr.statusText)
            }
        }
    }
}

post 方法

html

<!--上傳單個、多個文件-->
<input type="file" multiple  id="filess">
<button onclick="jsPostRequest5()">上傳多個文件ss</button>
<p id="filess_progress"></p> 

js

function jsPostRequest5() {
        var url = "http://casphp.com/api/AjaxRequest/jsAjaxPost3";

        //實例化一個 XMLHttpRequest 對象
        let xhr = new XMLHttpRequest();

        // 這個要放到調用open函數之前！！！
        xhr.upload.onprogress = function (e) {
            //  e.lengthComputable 是一個布爾值，表示當前上傳的資源是否具有可計算的長度
            if (e.lengthComputable) {
                // 多個文件總共大小，以及已上傳大小
                console.log(e.total,e.loaded);
                // e.loaded 已傳輸的字節  e.total 文件傳輸需要的總字節
                var percentComplete = Math.ceil((e.loaded / e.total) * 100); // Math.ceil() 向上取整
                var progress=document.getElementById('filess_progress');
                progress.style.width=percentComplete+'px';
                progress.innerHTML=percentComplete+'%'
            }
        };
        // 文件上傳成功
        xhr.upload.onload = function () {
            console.log('文件上傳完成')
        };

        // open 必須放 xhr.send() 前面
        xhr.open('POST', url); //設置請求方式及接口地址

        // 設置請求頭認證，必須方法 open 後面
        xhr.setRequestHeader("Authorization",'token_value');
        xhr.withCredentials = true; //一個布爾值，用來指定跨域 Access-Control 請求是否應帶有授權信息，如 cookie 或授權 header 頭。
        //xml.setRequestHeader("Cookie",'cookiename=value');

        // formdata 方式傳遞參數數據
        var formData = new FormData();
        formData.append('id', 2);
        formData.append('name', 'jsPostRequest2');
        formData.append('extra', 'formdata 方式傳遞參數數據');

        var files=document.getElementById('filess').files;
        // 如果直接寫 formData.append("server_files", files); 後端接收不到 server_files
        for (var i = 0; i < files.length; i++) {
            formData.append("files["+i+"]", files[i]);
        }

        xhr.onreadystatechange = (e) => {　　//服務端響應後
            if (xhr.readyState == 4) {　　//判斷客戶端是否可以使用
                if(xhr.status == 200){    //表示成功處理請求
                    console.log(xhr.responseText)
                }else{
                    console.log(xhr.status+' '+xhr.statusText)
                }
            }
        };
　　　　 // 如果不上傳文件，可以使用字符串方式傳參
　　　　 // xhr.send("id=12&name=字符串方式傳參");

        xhr.send(formData);
    }