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