斷點下載/斷點續傳

知識點一：

獲取服務器文件信息，不下載

方式1，ajax方式（只支持同域）：

測試頁面：http://wvoice.spriteapp.cn/voice/2015/0818/55d2248309b09.mp3

​var head = document.head || document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.src = 'https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js';
head.appendChild(script);
$.ajax({
    url: 'http://wvoice.spriteapp.cn/voice/2015/0818/55d2248309b09.mp3?_' + new Date().getTime(),
    type: 'HEAD',
    success: function(result, status, xhr) {
        console.log(xhr.getAllResponseHeaders());
    }
});

擴展閱讀：

https://chuanke.baidu.com/v1867921-207967-1271723.html

https://chuanke.baidu.com/v1867921-207968-1271734.html

http://www.runoob.com/ajax/ajax-examples.html

http://www.runoob.com/jquery/ajax-ajax.html

方式2，fetch（React-native中使用）

let url = 'http://wvoice.spriteapp.cn/voice/2015/0818/55d2248309b09.mp3';
fetch(url, {
    method: 'HEAD'
})
.then((headers) => {
    console.log(headers);
})
.catch(error => {
    console.error(error);
});

擴展閱讀：

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

請求方式概覽：

GET、POST、PUT、PATCH、DELETE、COPY、HEAD、OPTIONŠ、LINK、UNLINK、PURGE、LOCK、UNLOCK、PROPFIND、VIEW

知識點二：

斷點續傳，關鍵參數：Range

示例：

Ajax分段獲取示例：

測試頁面：http://www.runoob.com/try/try.php?filename=tryjquery_ajax_load

$(document).ready(function() {
    $("#b01").click(function() {
        $.ajax({
            headers: {
                'Range': 'bytes=0-2'
            },
            url: "/jquery/test1.txt",
            async: false,
            success: function(ret) {
                console.log(ret);
            }
        });
    });
});