w3c api_如何使用其Web API显示W3C规范数据

荣获艾美奖（Emmy®）奖的 W3C是万维网的国际标准组织。 它创建新的Web标准并不断对其进行修订，以使其在全球范围内保持一致和相关。

随着时间的推移，浏览器和网站已越来越符合标准，这使网站可以在所有各种浏览器中呈现和统一工作。 可公开获得的最有用的资源之一是w3c.org中的W3C规范文档。

最近， W3C通过Web API提供了其数据 ，该项目的页面位于Github中。 该API在其项目页面中的介绍如下：

“为了响应社区中想要与W3C数据进行交互的开发人员的需求，W3C系统团队开发了一个Web API。 通过它，我们可以提供有关规范，组，组织和用户的数据。”

在今天的帖子中，我们将看到如何通过W3C API获取规范数据 。 您可以在https://api.w3.org/doc中找到可以发布以获取规范数据和其他请求的各种请求，该请求还带有一个沙箱，用于测试API的每个请求，但是您需要API密钥。

首先让我们看看如何获取API密钥 。

1. 登录到您的W3C帐户或创建一个 。
2. 然后转到您的个人资料页面中的管理API密钥 。
3. 单击“ 新建API密钥”，并为其命名以生成密钥。
4. 然后，如果愿意，可以将其复制粘贴到网页https://api.w3.org/doc开头的api密钥文本框中，以测试沙箱中的API。

对于这篇文章，我们将研究使用短名称显示规范URL，描述和文档状态的请求 。 该请求看起来像这样：

https://api.w3.org/Specifications/{shortname}?apikey={apikey}&_format=json

例如，HTML5规范请求将如下所示；

https://api.w3.org/Specifications/html5?apikey={apikey}&_format=json

现在，让我们集中讨论用于显示通过API提取的数据HTML。 为此，我决定使用HTML模板 。 HTML模板用于保存已解析但无法呈现HTML代码，直到使用JavaScript将其添加到页面中为止。

<div id="w3cSpecs">
    <h1>W3C SPECS</h1>
</div>

<Template>
    <div class="w3cSpec">
        <h2 class="w3cSpecHeader"></h2>     
        <h3>URL</h3>
        <a class="w3cSpecLink"></a>
        <h3>Description</h3>
        <div class="w3cDescription"></div>
        <h3 >Latest Version Status</h3>
        <mark class="status"></mark>
    </div>
</Template>

模板准备就绪。 现在，在将要发出HTTP请求并以HTML显示响应JSON数据JavaScript上。 这是我们将开始的一组全局变量：

var shortnames = ['html5','selectors4','battery-status','fullscreen'],
    xmlhttp = new XMLHttpRequest(),
    w3cSpecsEle = document.querySelector('#w3cSpecs'),
    templateEle = document.querySelector('Template');

shortnames是我们要在网页中显示的规范的缩写的数组； 如果要查找规范的简称 ，请查看其W3C URL，然后在末尾看到它。

但是，不能保证您将能够获得所有这样的规格。 尚无可通过API获得的简短名称和规范列表。

遍历shortnames数组，并为每个shortnames数组发布一个HTTP请求，然后获取响应。

for (var i=0;i<shortnames.length;i++){
    xmlhttp.open('GET', 'https://api.w3.org/Specifications/'+shortnames[i]+'?apikey={your-api-key}&_format=json', false);
    xmlhttp.send();
    xmlhttp.onreadystatechange = checkRequestState();
}

function checkRequestState(){
    if(xmlhttp.readyState === 4 && xmlhttp.status === 200){
        var jsonResponse = JSON.parse(xmlhttp.responseText);
        displaySpec(jsonResponse)
    }
}

responseText是一个JSON字符串，必须进行解析才能获取JSON对象。 displaySpec是将使用JSON数据并将其显示为HTML的函数。

以下是HTML5规范的示例JSON响应文本，以及displaySpec的代码之后。

function displaySpec(json){
    if ('content' in templateEle) {
        /* get Template's content */
        templateEleContent = templateEle.content;
        /* add spec title to h2 header */
        w3cSpecHeader = templateEleContent.querySelector('.w3cSpecHeader');
        w3cSpecHeader.textContent = json.title;
        /* add spec URL to the link  */
        w3cSpecLink = templateEleContent.querySelector('.w3cSpecLink');
        w3cSpecLink.textContent = json.shortlink;   
        w3cSpecLink.href = json.shortlink;      
        /* add spec description */
        w3cSpecDetail = templateEleContent.querySelector('.w3cDescription'); 
        w3cSpecDetail.innerHTML = json.description;
        /* add spec status and color it based on its value */
        W3cSpecLatestVerStatus = templateEleContent.querySelector('mark');
        var status = json._links["latest-version"].title;
        W3cSpecLatestVerStatus.textContent = status;
        switch(status){
            case 'Recommendation':
                W3cSpecLatestVerStatus.className = "recommendation";
                break;
            case 'Working Draft':
                W3cSpecLatestVerStatus.className = 'draft';
                break;
            case 'Retired':
                W3cSpecLatestVerStatus.className = 'retired';
                break;
            case 'Candidate Recommendation':
                W3cSpecLatestVerStatus.className = 'candidateRecommendation';
                break;
        }
        /* add copy of the Template's content to the main div */
        w3cSpecsEle.appendChild(document.importNode(templateEleContent, true));
    }
    else {/* add JS code to create the elements individually */ }
}

if ('content' in templateEle)用于检查浏览器是否支持HTML模板，如果不支持，则在JS本身中创建所有HTML元素。 并且在需要支持的情况下，用JSON中的相应数据填充模板内容中HTML元素，最后，将模板内容的副本附加到主要的#w3cSpecs div中。

而已。 带有一些CSS样式，输出如下所示：

翻译自: https://www.hongkiat.com/blog/display-w3c-data-using-web-api/