關於XHR的使用紀錄與進度條的設計

2023-06-30
當網頁有著龐大的檔案等待載入,為了防止客戶端網頁一直處於載入的狀態下,這時候就會需要進度條來回饋用戶目前的載入狀況。

這時候透過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()

透過以上方法,可以取得數據,繼而提供給進度條進行畫面的渲染,這樣的方式是最理想,也是最準確的。

Contact

Github

Codepen

歡迎參觀我的賣場
© 2013 Copyright Digishot Web | Design Tools
Visitors【696574】
digishot webdesign studio