js通過HEAD請求方式提前獲取下載文件大小,XMLHttpRequest和ajax兩種實例

HTTP 中定義了 7 種請求方式：GET、POST、HEAD、PUT、DELETE、OPTIONS、TRACE、CONNECT。

【GET：獲取資源】【POST：傳輸實體文本】【HEAD：獲得報文首部】【PUT：傳輸文件】【DELETE：刪除文件】【OPTIONS：詢問支持的方法】【TRACE：追蹤路徑】【CONNECT：要求用隧道協議連接代理】

下面我們使用HEAD方式來實現在下載文件前通過獲得返回報文的頭部來獲取文件大小：

var url = 'http://'; //文件下載鏈接
var fileSize = 0; //下載文件大小    
var xhr = new XMLHttpRequest();
    xhr.open('HEAD', url, true);    // 也可用POST方式
    xhr.onreadystatechange = () => {
     if (xhr.readyState == 4) {
       if (xhr.status == 200) {
         fileSize = xhr.getResponseHeader('Content-Length');
         console.log(fileSize)
       } else {
         alert('ERROR');
       }
     }
    };
    xhr.send()

 這種發放在業務邏輯中一般用來獲取后台通過報文頭部傳遞的參數，不只是來獲取文件大小。

ajax方式的代碼如下：

             $.ajax({
                url: item.m3u8Url,
                async: false,
                timeout: 2000,
                // type: 'HEAD',
                complete: function( xhr,data ){
                  console.log(xhr.getResponseHeader("hls-next"));
                  hlsNext = Math.floor(xhr.getResponseHeader("hls-next")/1000)
                  console.log('hlsNext',hlsNext)
                }
              });