XMLHttpResquest level2 新特性-优快云博客

本文链接：https://blog.youkuaiyun.com/bdh123b/article/details/121869295

请求时限

xhr.timeout函数可以设置请求时限，如果超过设置的请求时限，就会停止http请求。还可以设置一个请求超时的回调函数。

var xhr = new XMLHttpRequest();
xhr.open("get","http://127.0.0.1:8000?name=js&age=18");
xhr.timeout = 1;
xhr.timeout = function(err) {
    console.log("请求超时");
};
xhr.send();
xhr.onload = function() {
    if(xhr.status == 200){
        console.log(xhr.responseText);
    }
};
xhr.onerror = (err) => {
    console.log(err);
};

FormData获取表单数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form id="f1">
        <input type="text" name="cname" />
        <input type="password" name="pwd"  />
        <button type="submit">提交</button>
    </form>
    <script>
        var form1 = document.getElementById("f1");
        form1.addEventListener("submit",(e) => {
            e.preventDefault();
            var formdata = new FormData(form1);
            var xhr = new XMLHttpRequest();
            xhr.open("post","http://127.0.0.1:8000/post");
            xhr.setRequestHeader("content-Type","application/x-www-form-urlencoded","utf-8");
            xhr.send(formdata);
            xhr.onreadystatechange = function() {
                if(xhr.readyState === 4 && xhr.status ===200){
                    console.log(xhr.responseText);
                }
            }
            xhr.onerror = function (error) {
                console.log(error)
            }
        }); 
    </script>
</body>
</html>

上传文件

　var formData = new FormData();

　　for (var i = 0; i < files.length;i++) {

　　　　formData.append('files[]', files[i]);

　　}
　　xhr.send(formData);

进度信息

　xhr.onprogress = updateProgress;
　xhr.upload.onprogress = updateProgress;
　function updateProgress(event) {
　　　　if (event.lengthComputable) {
　　　　　　var percentComplete = event.loaded / event.total;
　　　　}
　　}

与progress事件相关的，还有其他五个事件，可以分别指定回调函数：

　　* load事件：传输成功完成。

　　* abort事件：传输被用户取消。

　　* error事件：传输中出现错误。

　　* loadstart事件：传输开始。

　　* loadEnd事件：传输结束，但是不知道成功还是失败