⑴ 什麼是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