如何在JavaScript中替换XMLHttpRequest以在移动设备上解析文件？

如何解决如何在JavaScript中替换XMLHttpRequest以在移动设备上解析文件？

出于个人用途，我需要在线上观看视频章节，发现了这一点：http://html5videoguide.net/demos/google_io/3_navigation/#videoBox

那是完美的，因为那正是我所需要的。它可以完美地在台式设备上运行，但不能在移动设备上运行（确切的链接以及我使用它的方式）。

调试后，问题似乎出在navigation.js文件中，该文件使用XMLHttpRequest解析.vtt文件以读取不同的章节（我的iPhone上显示警报“无法检索文件。”）。 XMLHttpRequest似乎已被弃用，但在我的情况下必须使用。

我得到了

“ [弃用]不赞成在主线程上使用同步XMLHttpRequest，因为它对最终用户的体验有不利影响。 在这一行上：

xhr = new XMLHttpRequest(); if (xhr != null) { xhr.open("GET",url,false /* sync */);

我只有一些JS技能，我了解脚本的用途及其功能，但是我没有足够的知识来使脚本在移动设备上兼容。我认为只有检索功能需要重写，不确定...

有帮助吗？

非常感谢！

完整的navigation.js脚本：

var video,track;
var cues = [];
var xhr;

// get video and track elements
video = document.getElementsByTagName('video')[0];
track = video.querySelectorAll('track')[0];

// display chapters once video is loaded
video.addEventListener("loadedmetadata",init,false);
if (video.readyState >= video.HAVE_METADATA) {
    init.apply(video); // missed the event
}

// display chapters
function init(evt) {
    // grab chapters out of <track>
    retrieve(track.getAttribute('src'));
    // display chapters in list and transport bar
    //displayChapters();
}

// seek chapters
function seekChapter(chapter) {
    if (chapter) {
        video.currentTime = parseFloat(cues[chapter].start);
    }       
}

// retrieve chapters via xhr and process them
function retrieve(url) {
    xhr = new XMLHttpRequest();
    if (xhr != null) {
        xhr.open("GET",true /* sync */);
        xhr.setRequestHeader('Content-Type','text/text; charset=utf-8');
        
        xhr.onreadystatechange = function() {
          if (xhr.readyState == 4 /* complete */) {
            if (xhr.status != 200) {
                alert('Unable to retrieve file.');
            } else {
                cues = parseWebVTT(xhr.responseText);
            }
          }
        }
        xhr.send();
    } else {
        alert('Error retrieving file.');
    }
}

// Function to parse webvtt file
function parseWebVTT(data) {
    var srt;
    // check WEBVTT identifier
    if (data.substring(0,6) != "WEBVTT") {
        alert("Missing WEBVTT header: Not a WebVTT file - trying SRT.");
        srt = data;
    } else {
        // remove WEBVTT identifier line
        srt = data.split('\n').slice(1).join('\n');
    }

    // clean up string a bit
    srt = srt.replace(/\r+/g,''); // remove dos newlines
    srt = srt.replace(/^\s+|\s+$/g,''); // trim white space start and end

    //    srt = srt.replace(/<[a-zA-Z\/][^>]*>/g,''); // remove all html tags for security reasons

    // parse cues
    var cuelist = srt.split('\n\n');
    for (i = 0; i < cuelist.length; i++) {
        var cue = cuelist[i];
        var content = "",start,end,id = "";
        var s = cue.split(/\n/);
        var t = 0;
        // is there a cue identifier present?
        if (!s[t].match(/(\d+):(\d+):(\d+)/)) {
            // cue identifier present
            id = s[0];
            t = 1;
        }
        // is the next line the time string
        if (!s[t].match(/(\d+):(\d+):(\d+)/)) {
            // file format error: next cue
            continue;
        }
        // parse time string
        var m = s[t].match(/(\d+):(\d+):(\d+)(?:.(\d+))?\s*--?>\s*(\d+):(\d+):(\d+)(?:.(\d+))?/);
        if (m) {
            start =
            (parseInt(m[1],10) * 60 * 60) +
            (parseInt(m[2],10) * 60) +
            (parseInt(m[3],10)) +
            (parseInt(m[4],10) / 1000);
            end =
            (parseInt(m[5],10) * 60 * 60) +
            (parseInt(m[6],10) * 60) +
            (parseInt(m[7],10)) +
            (parseInt(m[8],10) / 1000);
        } else {
            // Unrecognized timestring: next cue
            continue;
        }

        // concatenate text lines to html text
        content = s.slice(t+1).join("<br>");

        // add parsed cue
        cues.push({id: id,start: start,end: end,content: content});
    }
    displayChapters();
}

// display chapter list on screen
function displayChapters() {
    // create navigation list on right
    var chapters = document.getElementById('chapters');
    for (i=0; i < cues.length; i++) {
        var item = document.createElement('li');
        item.id = cues[i].id;
        var link = document.createElement('a');
        link.href = '#videoBox';
        link.innerHTML = cues[i].id + ': ' + cues[i].content;
        link.setAttribute('data-chapter',i);
        link.onclick = function () {
            seekChapter(this.getAttribute('data-chapter'));
        }
        item.appendChild(link);
        chapters.appendChild(item);
    }
}```