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