XHR level2的新功能

设置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.dataconsole.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)

XHR level2的新功能相关推荐

什么是xhr？XMLHttpRequest的基本使用及xhr Level2的新特性详解及案例
目录一.XMLHttpRequest概念 1.定义 2.能否直接使用xhr对象发起Ajax请求 3.什么是Ajax 二.xhr发起GET请求 1.创建xhr对象 2.调用xhr.open()函数 3 ...
ActiveReports 9 新功能：借助目录(TOC)控件为报表添加目录功能
ActiveReports 9 新功能:借助目录(TOC)控件为报表添加目录功能原文:ActiveReports 9 新功能:借助目录(TOC)控件为报表添加目录功能在最新发布的ActiveRep ...
微信小程序长按图片不出现菜单_微信更新，新功能上了热搜
微信在推出新功能方面相当克制,但每一次总能引起全网关注. 昨天,微信又因为一个小功能的改进再次上了热搜,在安卓最新的 7.0.17 版本当中,微信取消了两分钟内删除功能. 在新版微信中,发出的消息在两 ...
drx功能开启后_简单实用！小米手机中这些新功能真香
小米手机作为国产机热销品牌之一,它除了有好看的外观,还有很多隐藏的实用功能,今天小编就来和大家分享5个小米手机里你不知道的功能. Al电话助理看到陌生号码时,很多人第一反应就是挂掉,不想接听,但又担 ...
Windows 2008 R2中的NAP新功能详解
随着Windows Server 2008 R2版本的发布,Windows网络访问保护模式(NAP)又增加了新功能.在本文中,笔者将对新功能进行简要的介绍. Windows Server 2008中提 ...
iOS15.4 来袭：新增“男妈妈”表情及口罩面容解锁、AirTags 反跟踪等新功能
整理 | 章雨铭责编 | 屠敏出品 | CSDN(ID:CSDNnews) 今日,苹果发布了iOS/iPadOS 15.4正式版.该版本带来了一些重大新功能的更新,包括在戴口罩时使用Face ID ...
苹果新功能惹网友众怒，还有隐私可言吗？
编译 | 禾木木出品 | AI科技大本营(ID:rgznai100) 大部分人选择 iPhone 的一大理由就是信息安全,这家公司对于个人隐私的保护一直为人称赞. 最近苹果公司宣布,为了让儿童能够更 ...
@程序员：Python 3.8正式发布，重要新功能都在这里
整理 | Jane.夕颜出品 | AI科技大本营(ID:rgznai100) [导读]最新版本的Python发布了!今年夏天,Python 3.8发布beta版本,但在2019年10月14日,第一个 ...
PyCharm 2019.3发布，增加了哪些新功能呢？
来源 | PyCharm官网整理 | 猪哥校正 | 豌豆花下猫 Python的IDE(Integrated Development Environment 集成开发环境)非常多,如:VS Code ...