原生 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);
    }