XHR level2的新功能

原创已于 2022-09-29 14:04:34 修改 · 489 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #servlet #前端

于 2022-09-29 11:20:37 首次发布

这篇博客详细介绍了如何使用XMLHttpRequest和jQuery进行HTTP请求，包括设置请求超时、管理表单数据、上传文件及进度跟踪。同时，也提到了axios库的使用方法，如发起GET和POST请求。此外，还涉及了使用jQuery实现加载效果。

设置HTTP请求的时限

xhr.timeout=3000;

最长等待3秒就自动停止HTTP请求。还有一个timeout事件，用来指定回调函数

xhr.ontimeout=function(event){
   alert('请求超时')；
}

设置FormData对象管理表单数据

// 1、创建 FormData 实例
var fd = new FormData();
// 2、调用 append函数，向fd中追加数据
fd.append('uname', 'zs');
fd.append('upwd', '123456');
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://www.liulongbin.top:3006/api/formdata');
xhr.send(fd);

xhr.onreadystatechange = function() {
   if (xhr.readyState === 4 && xhr.status === 200) {
       console.log(JSON.parse(xhr.responseText));
    }
}

直接获取form表单中的数据

// 1、通过 DOM 操作，获取到 form 表单元素
var form = document.querySelector('#form1');

form.addEventListener('submit', function(e) {
    // 阻止表单默认行为
    e.preventDefault();

    // 创建 FormData 快速获取到 form 表单中的数据
    var fd = new FormData(form);

    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'http://www.liulongbin.top:3006/api/formdata');
    xhr.send(fd);

    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            console.log(JSON.parse(xhr.responseText));
         }
     }
})

上传文件

1、定义UI结构

<!-- 1、文件选择框 -->
<input type="file" id="file1">
<!-- 2、上传文件的按钮 -->
<button id="btnUpload">上传文件</button>
<br />
<!-- 3、img 标签，来显示上传成功以后的图片 -->
<img src="" alt="" id="img" width="800">

2、验证是否选择了文件

// 1、获取到文件上传按钮
var btnUpload = document.querySelector('#btnUpload');
// 2、为按钮绑定点击事件处理函数
btnUpload.addEventListener('click', function() {
     // 3、获取到用户选择的文件列表
     var files = document.querySelector('#file1').files;
     if (files.length <= 0) {
         return alert('请选择要上传的文件');
      }

3、向FormData 中追加文件

   var fd = new FormData();
     // 将用户选择的文件，添加到FormData中
     fd.append('avatar', files[0]);

4、使用 xhr 发起上传文件的请求

      var xhr = new XMLHttpRequest();
      xhr.open('POST', 'http://www.liulongbin.top:3006/api/upload/avatar');
      xhr.send(fd);

5、监听 onreadystatechange事件

       xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                var data = JSON.parse(xhr.responseText);
                if (data.status === 200) {
                    // 上传成功
                    document.querySelector('#img').src = 'http://www.liulongbin.top:3006' + data.url;
                 } else {
                     // 上传失败
                     console.log('图片上传失败！' + data.message);
                    }
                }
            }

获取数据传输的进度信息

//创建 XHR 对象
 var xhr = new XMLHttpRequest();
//监听 xhr.Upload的 onprogress 事件
xhr.upload.onprogress = function(e) {
    //e.lengthComputable 是一个布尔值，表示当前上传的资源是否有可计算的长度
    if (e.lengthComputable) {
        // 计算出上传的进度
        //e.loaded 已传输的字节
        //e.total 需要传输的总字节
        var procentComplete = Math.ceil((e.loaded / e.total) * 100);
        console.log(procentComplete);
     }
}

监听上传完成的事件

xhr.upload.onload = function() {}

使用jquery上传文件

    <input type="file" id="file1">
    <button id="btnUpload">上传文件</button>
    <br/>
    <img src="assets/loading.gif" style="display: none;" id="loading" />

发起请求（必须使用Ajax，不能使用$.post）

 $.ajax({
     method: 'POST',
     url: 'http://www.liulongbin.top:3006/api/upload/avatar',
     data: fd,
     //不对  processData 中的数据进行 url 编码，而是将 FormData 数据原样发送到服务器
     processData: false,
     //不修改 content-Type 属性，使用 FormData 默认的 content-Type值
     contentType: false,
     success: function(res) {
       console.log(res);
     }
 })

jQuery实现loading效果

ajaxStart(callback)

Ajax请求开始时，执行ajaxStart请求函数。可以在该函数的callback中显示loading效果

注：$(document).ajaxStart()函数会监听当前文档内所有的Ajax请求

// 监听到Ajax请求被发起了
$(document).ajaxStart(function() {
    $('#loading').show();
});

ajaxStop(callback)

Ajax请求结束时，执行ajaxStop函数。可以在该函数的callback中隐藏loading效果

// 监听到Ajax完成
$(document).ajaxStop(function() {
    $('#loading').hide();
});

点击按钮触发事件

$('#btnUpload').on('click', function() {
    var files = $('#file1')[0].files;
    if (files.length <= 0) {
        return alert('请选择文件再上传');
    }
    var fd = new FormData();
    fd.append('avatar', files[0]);
    //...发起请求代码
});

axios

Axios是专注于网络数据请求的库，相对于原生的XMLHttpRequest对象，axios简单易用，相对于jQuery更加轻量化，只专注于网络数据请求

axios发起GET请求

语法：

axios.get('url',{params:{/*参数*/} }).then(callback)

示例：

<button id="btn1">发起GET请求</button>
    <script>
        document.querySelector('#btn1').addEventListener('click', function() {
            //请求的 URL 地址
            var url = 'http://www.liulongbin.top:3006/api/get';
            //请求的参数对象
            var paramsObj = {
                name: 'zs',
                age: 20
            }
            //调用 axios.get() 发起 GET 请求
            axios.get(url, {
                params: paramsObj
            }).then(function(res) {
              //res是axios封装的对象 里面的data属性才是服务器返回的数据 所有用res.data
                console.log(res.data);
            })
        })
    </script>

axios发起POST请求

语法：

axios.get('url',{/*参数*/}).then(callback)

示例：

<button id="btn2">发起POST请求</button>
document.querySelector('#btn2').addEventListener('click', function() {
            var url = 'http://www.liulongbin.top:3006/api/post';
            var dataObj = {
                address: '北京',
                location: '顺义区'
            }
            axios.post(url, dataObj).then(function(res) {
                console.log(res.data);
            })
})

直接使用axios发起请求

语法：

axios({ method:'请求类型', 
     url:'请求的URL地址', 
     data:{/*POST数据*/}, 
     params:{/*GET参数*/} 
}).then(callback)