XMLHttpRequest介绍

目录

  • 一、介绍
    • 1.创建 XMLHttpRequest
    • 2.初始化
    • 3.发送请求
    • 4.获取响应
    • 5.响应类型
  • 二、发送GET请求示例
  • 三、发送POST请求示例
  • 四、发送POST请求下载文件示例
  • 五、发送POST请求上传文件示例

一、介绍

1.创建 XMLHttpRequest

let xhr = new XMLHttpRequest();

2.初始化

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

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

参数说明:

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

3.发送请求

xhr.send([body])

使用 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} `);
};

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!
};

注意:

在旧的脚本中,你可能会看到 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(`网络错误`);
};

三、发送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(`网络错误`);
};

四、发送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>

五、发送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);
    }

使用 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>

参考:

XMLHttpRequest

XMLHttpRequest api

你可能感兴趣的:(前端,XMLHttpRequest,javascript,js,发送请求,js上传文件,js下载文件)