nprogress进度条插件使用

nprogress 插件是一个适用于ajax 应用的轻量级的进度条插件

使用步骤:

1. 引入js文件和css文件

	 <link rel='stylesheet' href='nprogress.css'/>
     <script src='nprogress.js'></script>

1. 使用进度条插件
   引入了nprogress.js文件后，就有了一个全局对象NProgress对象
   //开启进度条
   NProgress.start();
   //关闭进度条
   NProgress.done();

   使用场景: 添加到你调用 Ajax 的地方！绑定它到 jQuery ajaxStart 和 ajaxStop 事件上

    当ajax请求开始的时候,显示进度条
    当ajax请求结束的时候,隐藏进度条
   
    写在公共js文件common.js中(别忘记引入html中)
   
    $(document).ajaxStart(function(){
    	//console.log('ajax开始发送了')
    		//开启进度条
    	NProgress.start()
    })
   
    $(document).ajaxStop(function(){
    	// console.log('ajax发送结束')
    	setTimeout(function(){
    		// 关闭进度条
    		NProgress.done()
    	},500)
    })
   

jquery中ajax的全局事件:

jquery的ajax全局事件, 会在任意一个ajax请求执行的时候触发
ajax提供了6个全局事件函数，会被页面中所有的ajax请求触发，在不同时间点会触发不同的全局事件。

在页面中会有很多的ajax请求，但是这些ajax请求都有相同的消息机制，比如我们需要在ajax请求发送之前弹出了一个提示框，提示"正在读取数据...." 在ajax请求成功时显示"获取数据成功...",在ajax结束后隐藏提示框。如果不使用全局事件，那么需要在每一个ajax的beforeSend、success、complete回调函数中都加上相同的代码。

jquery的全局事件需要给document注册（固定写法）
$(document).ajaxStart(function () {
  console.log("ajaxStart在开始一个ajax请求时触发")
})

全局事件的执行时机
// 6个全局事件函数

1. ajaxStart在开始一个ajax请求时触发   (开始进度条)

2. beforeSend回调函数
   ajaxSend在beforeSend回调函数之后触发

3. success回调函数
   ajaxSuccess在success回调函数之后触发

4. error
   ajaxError在error回调函数之后触发

5. complete
   ajaxComplete在complete回调函数之后触发

6. ajaxStop在ajax请求结束时触发   (结束进度条)