• XMLHttpRequest介绍

    目录

    一、介绍

    1.创建 XMLHttpRequest

    let xhr = new XMLHttpRequest();

    • 1

    2.初始化

    xhr.open(method, URL, [async, user, password])

    • 1

    使用 open 方法进行一些初始化配置，method 和 URL 是必传的，其余的是可选的。

    参数说明：

    method —— HTTP 方法。通常是 “GET” 或 “POST”，小写也可。
    URL —— 要请求的 URL，通常是一个字符串，也可以是 URL 对象。
    async —— 是否同步。如果不传默认为true，如果显式地设置为 false，那么请求将会以同步的方式处理。
    user，password —— HTTP 基本身份验证（如果需要的话）的登录名和密码。

    3.发送请求

    xhr.send([body])

    • 1

    使用 send 方法就会建立连接，发送请求。

    参数说明：

    body 是可选的，是 POST 请求方式的请求体。
    即如果你上面的 xhr.open 里 method 是 使用的是 GET 请求 ，那么 body 参数是不需要的 ；
    如果你上面的 xhr.open 里 method 是 使用的是 POST 请求，那么请求体就是 body 。

    4.获取响应

    下面这三个事件是最常用的：

    • load —— 当请求完成（即使 HTTP 状态为 400 或 500 等），并且响应已完全下载。
    • error —— 当无法发出请求，例如网络中断或者无效的 URL。
    • progress —— 在下载响应期间定期触发，报告已经下载了多少。
    xhr.onload = function() { //请求正常发出时
 alert(`状态码: ${xhr.status} 结果： ${xhr.response}`);
};

xhr.onerror = function() { // 仅在根本无法发出请求时触发
 alert(`网络错误`);
};

xhr.onprogress = function(event) { // 定期触发，一般用于下载文件之类的返回下载进度
 // event.loaded —— 已经下载了多少字节
 // event.lengthComputable = true，当服务器发送了 Content-Length header 时
 // event.total —— 总字节数（如果 lengthComputable 为 true）
 alert(`总字节数： ${event.total} 已下载字节数： ${event.loaded} `);
};

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    5.响应类型

    我们可以使用 xhr.responseType 属性来设置响应格式：

    • “”（默认）—— 响应格式为字符串
    • “text” —— 响应格式为字符串
    • “arraybuffer” —— 响应格式为 ArrayBuffer（对于二进制数据，请参见 ArrayBuffer，二进制数组）
    • “blob” —— 响应格式为 Blob（对于二进制数据，请参见 Blob），即文件数据
    • “document” —— 响应格式为 XML document（可以使用 XPath 和其他 XML 方法）或 HTML document（基于接收数据的 MIME 类型）
    • “json” —— 响应格式为 JSON（自动解析）
    let xhr = new XMLHttpRequest();

xhr.open('GET', '/article/xmlhttprequest/example/json');

xhr.responseType = 'json';

xhr.send();

// 响应为 {"message": "Hello, world!"}
xhr.onload = function() {
  let responseObj = xhr.response;
  alert(responseObj.message); // Hello, world!
};


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    注意：

    在旧的脚本中，你可能会看到 xhr.responseText，甚至会看到 xhr.responseXML 属性。

    它们是由于历史原因而存在的，以获取字符串或 XML 文档。如今，我们应该在 xhr.responseType 中设置格式，然后就能获取如上所示的 xhr.response 了。

    二、发送GET请求示例

    let xhr = new XMLHttpRequest();
xhr.open("GET", "http://localhost:8081/apiList/v1/worldAddressAnalysis?country=中国");
xhr.send();

//请求正常发出时
xhr.onload = function () { 
     alert(`状态码: ${xhr.status} 结果： ${xhr.response}`);
};

// 仅在根本无法发出请求时触发
xhr.onerror = function () { 
    alert(`网络错误`);
};

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    三、发送POST请求示例

    let xhr = new XMLHttpRequest();
xhr.open("POST", "http://localhost:8081/apiList/v1/calculator");
xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');

//post 请求体参数
let param = {calculatorStr: "8*8-4"};
xhr.send(JSON.stringify(param));

//请求正常发出时
xhr.onload = function () { 
    alert(`状态码: ${xhr.status} 结果： ${xhr.response}`);
};

// 仅在根本无法发出请求时触发
xhr.onerror = function () { 
   alert(`网络错误`);
};

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    四、发送POST请求下载文件示例

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <button id="btn">下载文件</button>

    <script>
        let btn = document.querySelector("#btn");
        btn.addEventListener("click", () => {
            let xhr = new XMLHttpRequest();
            xhr.open("POST", "http://localhost:8081/apiList/v1/downloadExcel");
            //设置请求头和响应类型
            xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8"); 
            xhr.responseType = 'blob';

            //设置请求体参数
            let param = { "fileName": "测试", "tableHeader": ["年级", "班级", "班主任", "男生人数", "女生人数", "语文平均分"] };
            xhr.send(JSON.stringify(param));

            //请求正常发出时
            xhr.onload = function () { 
                if (xhr.status === 200) {
                    // 获取文件blob数据并保存
                    saveAs(xhr.response, "download.xlsx");
                }
            };

            // 仅在根本无法发出请求时触发
            xhr.onerror = function () { 
                alert(`网络错误`);
            };

            // 定期触发 查看下载进度
            xhr.onprogress = function (event) { 
                alert(`总字节数： ${event.total} 已下载字节数： ${event.loaded} `);
            };
        });

        function saveAs(data, name) {
                var urlObject = window.URL || window.webkitURL || window;
                var export_blob = new Blob([data]);
                var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a')
                save_link.href = urlObject.createObjectURL(export_blob);
                save_link.download = name;
                save_link.click();
            }

    </script>
</body>

</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56

    五、发送POST请求上传文件示例

    假设我 springboot 上传文件的接口如下:

        @ApiOperation("文件上传到jar包所在服务器")
    @PostMapping(value = "/v1/fileSelfUpload1", consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
    public JSONObject fileSelfUpload1(@RequestParam String filePath, @RequestParam(value = "file", required = true) MultipartFile file) {
        return userConsumer.fileSelfUpload(filePath, file);
    }

    • 1
    • 2
    • 3
    • 4
    • 5

    使用 XMLHttpRequest 上传文件示例如下：

    <!DOCTYPE html>
<html lang="en-us">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shopping list example</title>
    <style>
        li {
            margin-bottom: 10px;
        }

        li button {
            font-size: 8px;
            margin-left: 20px;
            color: #666;
        }
    </style>
</head>

<body>

    <div class="container">
        <input type="file" name="doc" id="doc">
        <button type="submit" id="submit">提交</button>
    </div>

    <script>
        var doc = document.querySelector('#doc')
        var subbtn = document.querySelector('#submit')

        subbtn.addEventListener('click', function (e) {
            // 获取上传的文件,数组
            let filedata = doc.files

            //先判断是否已经上传文件
            if (filedata.length <= 0) {
                return alert('请上传文件')
            }

            //通过FormData可以获取表单数据，也可以通过append添加数据，最后把FormData实例对象直接  上传发送请求
            let fd = new FormData()
            fd.append('file', filedata[0])
            fd.append('filePath', '/user/save/')

            const xhr = new XMLHttpRequest()
            xhr.open('POST', 'http://localhost:8081/apiList/v1/fileSelfUpload1')
            xhr.send(fd)

            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    console.log('上传成功');
                }
            }

        })
    </script>
</body>

</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60

    参考：

    XMLHttpRequest

    XMLHttpRequest api

  • 相关阅读:
    蓝桥杯刷题-包子凑数
    面试20个人居然没有一个写出数组扁平化?如何手写flat函数
    国庆作业5
    路特软件戚俊：云原生助力SaaS类业务租户高效隔离
    CF803G Periodic RMQ Problem【动态开点线段树+ST表】
    Pthread 并发编程（一）——深入剖析线程基本元素和状态
    【FPGA】通俗理解从VGA显示到HDMI显示
    代码随想录算法训练营第60天|84.柱状图中最大的矩形
    8+肿瘤+多组机器学习+分型。
    第七章《Java的异常处理》第3节：异常的嵌套处理
  • 原文地址：https://blog.csdn.net/qq_33697094/article/details/132980250