前端AJAX学习笔记——XMLHttpRequest Level2

旧版XMLHttpRequest缺点：

1. 只支持文本数据传输，无法读取上传文件
2. 请求和响应时，只提示有没有完成，没有显示进度

XMLHttpRequest Level2新特性：

1. 可以设置HTTP请求时限
2. 可以使用FormData对象管理表单数据
3. 可以上传文件
4. 可以获取数据传输的进度

1.设置HTTP请求时限

可以设置请求等待时限，请求超过了这个时限就会自动停止，还可以设置配套的timeout事件指定回调函数。

xhr.timeout = 3000; //请求最多等待3秒
xhr.ontimeout = function(){ //超时后停止请求并执行回调函数
    alert('请求超时');
}

2.使用FormData对象管理表单数据和上传文件

        HTML5新增了FormData对象，可以模拟表单操作。

    <form id="form1">
        用户名<input type="text" name="user">
        密码<input type="password" name="pwd">
        <input type="file" name="" id="file1">
        <button type="submit">提交</button>
    </form>
    <script>
        var form1 = document.querySelector('#form1');
        form1.addEventListener('submit',function(e){
            //阻止表单默认提交
            e.preventDefault();
            //获取用户上传的文件
            var file = document.querySelector('#file1').files;
            //创建FormData对象并把表单数据传进去
            var fd = new FormData(form1);
            //还可以手动添加数据
            fd.append('age','22');
            //把文件传到fd里
            fd.append('img',file[0]);
            var xhr = new XMLHttpRequest();
            xhr.open('POST','http://127.0.0.1:8000/server');
            //AJAX请求需要设置请求头，但form提交不需要，nodejs也不用
            // xhr.setRequestHeader('Content-Type','application/x-www-urlencoded');
            xhr.send(fd);
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4 && xhr.status === 200){
                    console.log(xhr.response);
                }
            }
        })
    </script>

  

可以看到数据都传输过去了

3.显示文件上传进度

        新版XMLHttpRequest可以通过xhr.upload.onprogress事件获取文件上传进度。

    <form id="form1">
        用户名<input type="text" name="user">
        密码<input type="password" name="pwd">
        <input type="file" name="" id="file1">
        <button type="submit">提交</button>
    </form>
    <script>
        var form1 = document.querySelector('#form1');
        form1.addEventListener('submit',function(e){
            e.preventDefault();
            var file = document.querySelector('#file1').files;
            var fd = new FormData(form1);
            fd.append('a',100);
            fd.append('img',file[0]);
            var xhr = new XMLHttpRequest();
            //监听xhr.upload的onprogress事件
            x.upload.onprogress = function(e){
                //lengthComputable的值是布尔型，表示当前上传的文件是否有可计算的长度
                if(e.lengthComputable){
                    //e.loaded表示已上传的字节  e.total表示文件的总字节
                    var persent = Math.ceil((e.loaded / e.total) * 100);
                    console.log(persent+'%');
                }
            }
            xhr.open('POST','http://127.0.0.1:8000/server');
            xhr.send(fd);
            xhr.onreadystatechange = ()=>{
                if(xhr.readyState === 4 && xhr.status === 200){
                    console.log(xhr.response);
                }
            }
        })
    </script>