JavaScript上传进度条事件,和书上写的一样,却无法实现相关功能,怎么回事

问题相关代码，请勿粘贴截图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="file" id="upload">
</body>
  <script src="../../test.js"></script>
  <script>
    var boolean = false;
    var id = document.getElementById("upload");
    id.onclick = function () {
        if (boolean) {
            print("正在上传时不能选择文件");
            return false;
        }
    };

    var xml = new XMLHttpRequest();
    var file = id.files[0];
    xml.open("POST" , location.href , true);
    //检测是否支持上传对象
    // if (xml.upload) {
        //设置上传进度事件
        xml.upload.onprogress = function (event) {
            boolean = true;
            if (!event.lengthComputable) {
                print("上传失败,请重新上传");
                return;
            }
            var loaded = event.loaded;
            var total = event.total;
            var baifenbi = (loaded / total * 100).toFixed(2) + "%";
            print("上传百分比: " , baifenbi);
            print("已上传字节数/总字节数" , loaded + "/" + total);
        }
        xml.send(file);
    // }
  </script>
</html>

test.js:

var body = document.querySelector("body");
body.innerHTML += "<div></div>";

var get_div = document.querySelector("div");

function print(str , value ) {
    if (value !== undefined) {
        get_div.innerHTML += str + value + "<br/>";
    }else {
        get_div.innerHTML += str + "<br/>";
    }
}

书上代码:

img

img

运行结果及报错内容

书上运行结果:

img

我有个问题,open处为什么要用POST不能用GET

get是获取数据的时候用到的，大部分的操作都是post