當網頁有著龐大的檔案等待載入，為了防止客戶端網頁一直處於載入的狀態下，這時候就會需要進度條來回饋用戶目前的載入狀況。
這時候透過XHR可以很容易的取得數據，以下為XHR的一些狀態以及使用範例:
const xhr = new XMLHttpRequest()
// 監聽載入事件
xhr.onload = () => { console.log(`The transfer is completed: ${xhr.status} ${xhr.response}`) }
// 監聽錯誤事件
xhr.onerror = () => { console.error('Download failed.') }
//監聽取消事件
xhr.onabort = () => { console.error('Download cancelled.') }
//監聽處理事件
xhr.onprogress = event => {
// event.loaded : 目前載入數據量
// event.total : 全部需要載入的數據量，需要有 `Content-Length` header 時才能取得
console.log(`Downloaded ${event.loaded} of ${event.total} bytes`)
}
//取得要偵測進度的檔案，然後send()即開始監視載入
xhr.open('GET', '/download-attachment')
xhr.send()
透過以上方法，可以取得數據，繼而提供給進度條進行畫面的渲染，這樣的方式是最理想，也是最準確的。
