XMLHttpRequest()新升级版的优势

// XMLHttpRequest() 新版四大优点：

1、 可设置HTTP请求时限 / timeout属性

作用是超过时长可停止请求，返回提示给用户

  var xhr = new XMLHttpRequest()
 //超过3秒就不再请求
 xhr.timeout = 3000;
 xhr.timeout = function() {
 	alert('请求超时');
 }
 xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks')
 xhr.send();

2、 使用FormData对像管理表单数据

为方便表单处理 H5新增的功能，

模拟表单操作

  var fd = new FormData()
   fd.append('name', 'zs')
   fd.append('upwd', '123468')

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

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

 //FormData对像 快速获取网页表单的值 

form的表单而布局

<form action="" id="form1">
 <input type="text" name="username" autocomplete="off" value="">
 <input type="password" name="upwd">
 <button type="submit">提交</button>
</form>

快速获取网页全部表单值 提交

 var form = document.querySelector('#form1')
 form.addEventListener('submit', function(e) {
 	e.preventDefault()
    //获取form的值
 	var fd = new FormData(form)
 	//创建新XHR请求
 	var xfd = new XMLHttpRequest()
 	xfd.open('post', 'http://www.liulongbin.top:3006/api/formdata')
 	xfd.send(fd);

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

3、 可以上传文件

上传文件 html布局

 <!-- 上传文件 -->
<input type="file" name="username" autocomplete="off" id="file1">
<button type="submit" id="butn">上传文件</button>
<!-- 上传成功的图 -->
<img src="" alt="">

上传文件js代码

// 先验证用户是否选择文件上传
var butn = document.querySelector('#butn')
butn.addEventListener('click', function() {
	var files = document.querySelector('#file1').files;
	if (files.length <= 0) {
		return alert('请选择上传文件')
	}
	// 将用户选择的文件添加到 FormData()
	var fd = new FormData();
	fd.append('avatar', files[0]);
	
	//创建新的xhr请求
	var xfd = new XMLHttpRequest();
	xfd.open('POST', 'http://www.liulongbin.top:3006/api/upload/avatar')
	xfd.send(fd);
	//监听xfd.onreadystatechange事件
	xfd.onreadystatechange = function() {
		if (xfd.readyState === 4 && xfd.status === 200) {
			var data = JSON.parse(xfd.responseText);
			console.log(data);
			//如果  data的satus等200 那表示 上传成功 了
			if (data.status === 200) {
			//便把地址赋值给图片的SRC
				document.querySelector('img').src = 'http://www.liulongbin.top:3006' + data.url
			} else {
				alert('上传文件失败')
			}
		}
	};
})

4、 可以获得数据传输进度信息

需要引入的文件
引用了bootstrap的进度条布局及样式
进度条的样式变化是用jQuery写的，所以也引进了 jquery.min.js

<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery.min.js"></script>

<div class="progress" style="width:  300px">
<div class="progress-bar progress-bar-danger progress-bar-striped active" style="width: 0%" id="jdt"> 0%</div>

	//监听文件上传的进度
	// onprogress 事件在浏览器上传下载时触发。
	xfd.upload.onprogress = function(e) {
		// lengthComputable 是一个布尔值 表当前上传的资源 是否具胡可计算的长度
		if (e.lengthComputable) {
			//计算上传的进度  e.loaded 已传的字节     e.total  总需传的字节
			// Math.ceill向上取整
			var pC = Math.ceil((e.loaded / e.total) * 100);
			console.log(pC)
			$('#jdt').attr('style', 'width:' + pC + '%;').html(pC + '%')
		}
	}
      //监听xfd的上传进度是否完成
	xfd.upload.onload = function() {
	//完成后 便给  进度条，移除所有的样式   再新增绿色的样式
		$('#jdt').removeClass().addClass('progress-bar progress-bar-success');
	}