如何使用JavaScript的XMLHttpRequest从API提取circuitName等指定数据

你调用的Ergast F1赛事接口返回的赛事数据存储在MRData.RaceTable.Races数组中，你需要的字段都可以从这个数组的单条元素（因为你请求的是下一场赛事，数组仅有1个元素）中提取，修改后的代码如下：

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function(){
    if(this.readyState == 4 && this.status == 200){
        var json = JSON.parse(xhr.responseText);
        var raceData = json.MRData.RaceTable.Races[0];
        
        // 提取目标字段
        var circuitName = raceData.Circuit.circuitName;
        var date = raceData.date;
        var raceName = raceData.raceName;
        var round = raceData.round;
        var season = raceData.season;
        var time = raceData.time;
        
        // 按需组装内容插入DOM
        var showContent = `
            赛季：${season}<br>
            轮次：${round}<br>
            赛事名称：${raceName}<br>
            赛道名称：${circuitName}<br>
            比赛日期：${date}<br>
            比赛时间：${time}
        `;
        document.getElementById('playlist').innerHTML = showContent;
    }
};

xhr.open("GET", "http://ergast.com/api/f1/current/next.json", true);
xhr.send();

接口返回数据结构参考：

内容的提问来源于stack exchange，提问作者smksx