⑴ 什么是AJAX
1.什么是Ajax?
Ajax的全称是：AsynchronousJavaScript+XML
2.Ajax的定义：
Ajax不是一个技术，它实际上是几种技术，每种技术都有其独特这处，合在一起就成了一个功能强大的新技术。
3.Ajax包括：
XHTML和CSS
使用文档对象模型(DocumentObjectModel)作动态显示和交互
使用XML和XSLT做数据交互和操作
使用XMLHttpRequest进行异步数据接收
使用JavaScript将它们绑定在一起
Web开发领域的最新时髦术语其实质是“旧貌换新颜”。
Ajax（AsynchronousJavaScriptandXML）是结合了Java技术、XML以及JavaScript等编程技术，可以让开发人员构建基于Java技术的Web应用，并打破了使用页面重载的惯例。
Ajax是使用客户端脚本与Web服务器交换数据的Web应用开发方法。这样，Web页面不用打断交互流程进行重新加裁，就可以动态地更新。使用Ajax，用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。
异步JavaScript和XML（AJAX）不是什么新技术，而是指这样一种方法：使用几种现有技术——包括级联样式表（CSS）、JavaScript、XHTML、XML和可扩展样式语言转换（XSLT），开发外观及操作类似桌面软件的Web应用软件。实现Ajax的所有组件都已存在了许多年。AdaptivePath的用户体验战略部门主管兼创办合伙人JesseJamesGarrett今年2月发表在AdaptivePath网站上的一篇文章中杜撰了这个术语。
异步这个词是指AJAX应用软件与主机服务器进行联系的方式。如果使用旧模式，每当用户执行某种操作、向服务器请求获得新数据，Web浏览器就会更新当前窗口。
如果使用AJAX的异步模式，浏览器就不必等用户请求操作，也不必更新整个窗口就可以显示新获取的数据。只要来回传送采用XML格式的数据，在浏览器里面运行的JavaScript代码就可以与服务器进行联系。JavaScript代码还可以把样式表加到检索到的数据上，然后在现有网页的某个部分加以显示。
在面向消费者的诸多应用当中，Google的Gmail和GoogleMaps就是最常见的例子。在Gmail当中，AJAX负责如何开启线程会话，以显示不同邮件的文本内容。而在Maps当中，AJAX允许用户以一种似乎无缝的方式拖拉及滚动地图。
还有雅虎的Flickr像片共享应用和亚马逊网站的A9搜索引擎。另外，雅虎新的Web邮件服务可能很快就会吸引AJAX支持者的莫大关注，这项服务基于雅虎收购Oddpost后得到的技术。
这些UI都充分地使用了后台通道，也被一些开发者称为“Web2.0”，并导致了大家对Ajax应用兴趣的猛涨。
然而，AJAX应用软件厂商越来越把目光瞄准了企业。譬如说，Scalix的WebAccess电子邮件应用软件其实比微软Outlook自己的Web邮件界面更像Outlook。
不过AJAX应用软件的适用领域具有一定的局限性。因为它们利用了一些最新的Web技术，所以只能在某些Web浏览器里面运行——不过AJAX适用的浏览器正越来越多。
Ajax
Ajax，异步JavaScript与XML，是使用客户端脚本与Web服务器交换数据的Web应用开发方法。这样，Web页面不用打断交互流程进行重新加裁，就可以动态地更新。使用Ajax，你可以创建接近本地桌面应用的，直接的、高可用的、更丰富的、更动态的Web用户接口界面。
Ajax处理过程
一个Ajax交互从一个称为XMLHttpRequest的JavaScript对象开始。如同名字所暗示的，它允许一个客户端脚本来执行HTTP请求，并且将会解析一个XML格式的服务器响应。Ajax处理过程中的第一步是创建一个XMLHttpRequest实例。使用HTTP方法（GET或POST）来处理请求，并将目标URL设置到XMLHttpRequest对象上。
现在，记住Ajax如何首先处于异步处理状态？当你发送HTTP请求，你不希望浏览器挂起并等待服务器的响应，取而代之的是，你希望通过页面继续响应用户的界面交互，并在服务器响应真正到达后处理它们。要完成它，你可以向XMLHttpRequest注册一个回调函数，并异步地派发XMLHttpRequest请求。控制权马上就被返回到浏览器，当服务器响应到达时，回调函数将会被调用。
在JavaWeb服务器上，到达的请求与任何其它HttpServletRequest一样。在解析请求参数后，servlet执行必需的应用逻辑，将响应序列化到XML中，并将它写回HttpServletResponse。
一个Ajax交互从一个称为XMLHttpRequest的JavaScript对象开始。如同名字所暗示的，它允许一个客户端脚本来执行HTTP请求，并且将会解析一个XML格式的服务器响应。Ajax处理过程中的第一步是创建一个XMLHttpRequest实例。使用HTTP方法（GET或POST）来处理请求，并将目标URL设置到XMLHttpRequest对象上。
现在，记住Ajax如何首先处于异步处理状态？当你发送HTTP请求，你不希望浏览器挂起并等待服务器的响应，取而代之的是，你希望通过页面继续响应用户的界面交互，并在服务器响应真正到达后处理它们。要完成它，你可以向XMLHttpRequest注册一个回调函数，并异步地派发XMLHttpRequest请求。控制权马上就被返回到浏览器，当服务器响应到达时，回调函数将会被调用。
在JavaWeb服务器上，到达的请求与任何其它HttpServletRequest一样。在解析请求参数后，servlet执行必需的应用逻辑，将响应序列化到XML中，并将它写回HttpServletResponse。
一个Ajax交互从一个称为XMLHttpRequest的JavaScript对象开始。如同名字所暗示的，它允许一个客户端脚本来执行HTTP请求，并且将会解析一个XML格式的服务器响应。Ajax处理过程中的第一步是创建一个XMLHttpRequest实例。使用HTTP方法（GET或POST）来处理请求，并将目标URL设置到XMLHttpRequest对象上。
现在，记住Ajax如何首先处于异步处理状态？当你发送HTTP请求，你不希望浏览器挂起并等待服务器的响应，取而代之的是，你希望通过页面继续响应用户的界面交互，并在服务器响应真正到达后处理它们。要完成它，你可以向XMLHttpRequest注册一个回调函数，并异步地派发XMLHttpRequest请求。控制权马上就被返回到浏览器，当服务器响应到达时，回调函数将会被调用。
在JavaWeb服务器上，到达的请求与任何其它HttpServletRequest一样。在解析请求参数后，servlet执行必需的应用逻辑，将响应序列化到XML中，并将它写回HttpServletResponse。
⑵ 进阶|监控上传和下载进度
进阶|监控上传和下载进度一、写在前面网路的不稳定性，网速的变化，会导致有时一个请求可能需要很长的的时间，而这个过程如果没有相应的提示，让用户感知进度，这可能是一种糟糕的体验。这在体现请求进度，加载进度的需求，在文件上传下载业务中，更为强烈。
下面从XHR请求和axios两个角度，分析如何实现监控请求进度，获取文件上传下载进度。
tips：上传下载进度监控，不应仅仅是数据传输进度比的获取，还应包括传输过程可能出现的状态。
二、xhr监控进度XHR的出现，在web应用发展历史上是具有里程碑意义的，它使得DHTML的D更加真实。此外，ajax和axios本质上也是一种对XHR的封装实现。在js中我们无须依赖第三方插件，就可以实现异步请求，因为有XHR（newXMLHttpRequest()），这有时很有用。所以，几遍在项目中可能很少再使用XHR，而是使用它的某种实现，例如axios或ajax，了解XHR也是有意义的。
XHR在监控请求进度上，其实提供了方便的API，下面是和XHR进度相关的事件：
事件类型说明触发次数loadstart接收到响应数据时触发。1次progress当请求接收到更多数据时，周期性地触发0或多次error当request遭遇错误时触发。0或多次abort当request被停止时触发，例如当程序调用XMLHttpRequest.abort()时。0或多次loadXMLHttpRequest请求成功完成时触发。0或多次loadend当请求结束时触发,无论请求成功(load)还是失败(abort或error)。1次上面的事件就可以方便用于监控请求进度，请求状态，progress可能更为常用，这常常结合进度回调的event.loaded和event.total，来获取进度的百分比。
①使用XHR监控下载进度示例：
letxhr=newXMLHttpRequest();//要监控请求进度，可以在xhr对象上注册进度相关的事件//每个请求，开始都会触发loadStart，结束都会触发loadEnd事件，它们之间，//还可能会触发一个或多个其他事件，有些事件可能会多次触发。xhr.addEventListener("progress",updateProgress);xhr.addEventListener("load",transferComplete);xhr.addEventListener("error",transferFailed);xhr.addEventListener("abort",transferCanceled);xhr.open();//服务端到客户端的传输进程（下载）functionupdateProgress(event){//如果`lengthComputable`属性的值是false，那么意味着总字节数是未知并且total的值为零。if(event.lengthComputable){letprogress=event.loaded/event.total*100;console.log('加载进度：'+progress+'%')//一个百分比进度}else{//总大小未知时不能计算进度信息}}functiontransferComplete(event){console.log("传输完成");}functiontransferFailed(event){console.log("传输失败");}functiontransferCanceled(event){console.log("该请求已经被取消");}//...其他内容tips：注意，需要在请求调用open()之前添加事件监听，否则progress事件将不会被触发。
②使用XHR监控上传进度示例：
progress事件同时存在于下载和上传的传输。下载进度监控示例就如同上面的示例，下面是上传相关事件在XMLHttpRequest.upload对象上被触发的示例：
letxhr=newXMLHttpRequest();xhr.upload.addEventListener("progress",updateProgress);xhr.upload.addEventListener("load",transferComplete);xhr.upload.addEventListener("error",transferFailed);xhr.upload.addEventListener("abort",transferCanceled);xhr.open();//上传进度functionupdateProgress(event){//如果`lengthComputable`属性的值是false，那么意味着总字节数是未知并且total的值为零。if(event.lengthComputable){letprogress=event.loaded/event.total*100;console.log('上传进度：'+progress+'%')//一个百分比进度}else{//总大小未知时不能计算进度信息}}functiontransferComplete(event){console.log("上传完成");}functiontransferFailed(event){console.log("上传失败");}functiontransferCanceled(event){console.log("取消上传");}三、axios监控进度axios提供了方便的api去获取请求的进度：
//`onUploadProgress`允许为上传处理进度事件onUploadProgress:function(progressEvent){letnum=progressEvent.loaded/progressEvent.total*100//计算进度constloadingText='进度：'+num+'%'},//`onDownloadProgress`允许为下载处理进度事件onDownloadProgress:function(progressEvent){//对原生进度事件的处理letnum=progressEvent.loaded/progressEvent.total*100//计算进度constloadingText='进度：'+num+'%'},下面是一个axios结合element-ui的el-upload组件的使用示例
<el-uploadref="upload"id="upload-box"action="void":http-request="customUpload":before-upload="handleBefore":on-preview="handlePreview":on-remove="handleRemove":before-remove="beforeRemove":on-success="handleSuccess":with-credentials="true"accept="*"list-type="text":show-file-list="false":file-list="fileList"></el-upload>customUpload(file){letFormDatas=newFormData()FormDatas.append('file',file.file)//封装过的axiosaxios({method:'post',url:this.$api.uploadFile,//接口地址data:FormDatas,//请求配置按需配置即可headers:{'Accept':'application/json','Content-Type':'multipart/form-data;boundary='+newDate().getTime()},//上传进度onUploadProgress:(progressEvent)=>{letnum=progressEvent.loaded/progressEvent.total*100|0//计算进度this.loadingText='进度：'+num+'%'file.onProgress({percent:num})//进度条}}).then((res)=>{res.code===0&&file.onSuccess(res)//上传成功(打钩的小图标)}).finally(()=>{this.loading=false})}四、写在后面①XHR未设置默认的超时限制，这意味着理论上一个请求的进度可以无限长。但实践中，应该设置合理的超时限制，并对相应的错误做处理。
②服务器必须在响应中提供Content-Length（内容长度）首部，才能对传输数据估算从传输进度。
③对于分块数据，因为响应的总长度未知，所以无法进行数据传输进度的估算。
原文:https://juejin.cn/post/7103188024887869476