使用原生AJAX调用比特币区块接口并动态渲染信息表格

接口规则 #

比特币区块数据可通过接口 https://explorer.api.bitcoin.com/bch/v1/block/[区块哈希] 获取，将地址中的[区块哈希]替换为实际值即可发起请求，可用的测试示例哈希如下：

• 00000000000000000272f89a3e1883efc2ab81a6167ce66030f11b980d6db501
• 000000000000000001e046cc5d9023e7783d0526c8030d5f4d26beafa330bca3
• 0000000000000000022a8d56ceca32156dc906b4adc93565358ac4c4349e59e2
• 00000000000000000166f6ddb85c4984213a9f7a0d40bfa7af5ca48dface7334

功能要求 #

• 页面包含文本为「Enter a bitcoin block hash: 」的输入框，以及文本为「Get Bitcoin Block Information」的按钮
• 点击按钮后使用原生XMLHttpRequest发起AJAX请求获取对应区块的JSON数据，不得使用第三方AJAX库
• 请求成功后生成6行2列的表格展示以下字段：
  1. 第一行：哈希（hash）
  2. 第二行：区块大小（size）
  3. 第三行：区块高度（height）
  4. 第四行：版本号（version）
  5. 第五行：默克尔根（Merkle root）
  6. 第六行：交易列表（tx），交易信息用无序列表展示
• 哈希无效请求失败时，页面显示红色文字提示「Invalid bitcoin block hash」

完整实现代码 #

<!DOCTYPE html>
<html>
<head>
    <title>比特币区块查询工具</title>
    <script type="text/javascript">
        function newAjaxQuery(){
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function(){
                readyStateChangeHandler(xmlhttp);
            }
            var hashInput = document.getElementById("bitcoin");
            var hash = hashInput.value.trim();
            if(!hash){
                handleStatusFailure();
                return;
            }
            var queryUrl = "https://explorer.api.bitcoin.com/bch/v1/block/" + hash;
            xmlhttp.open("GET", queryUrl, true);
            xmlhttp.send();
        }

        function readyStateChangeHandler(xmlhttp) {
            if(xmlhttp.readyState == XMLHttpRequest.DONE){
                if(xmlhttp.status == 200){
                    handleStatusSuccess(xmlhttp);
                } else {
                    handleStatusFailure();
                }
            }
        }

        function handleStatusSuccess(xmlhttp){
            var jsonText = xmlhttp.responseText;
            var blockObj = JSON.parse(jsonText);
            display(blockObj);
        }

        function handleStatusFailure(){
            var displayDiv = document.getElementById("display");
            displayDiv.innerHTML = "<span style='color:red;'>Invalid bitcoin block hash</span>";
        }

        function display(jsonObject){
            var displayDiv = document.getElementById("display");
            var html = "";
            html += "<table border='1' cellpadding='6'>";
            html += "<tr><th>Hash information</th><td>" + jsonObject.hash + "</td></tr>";
            html += "<tr><th>Size</th><td>" + jsonObject.size + "</td></tr>";
            html += "<tr><th>Height</th><td>" + jsonObject.height + "</td></tr>";
            html += "<tr><th>Version</th><td>" + jsonObject.ver + "</td></tr>";
            html += "<tr><th>Merkle root</th><td>" + jsonObject.merkleroot + "</td></tr>";
            html += "<tr><th>tx</th><td><ul>";
            for (var i =0; i < jsonObject.tx.length; i++){
                html += "<li>" + jsonObject.tx[i] + "</li>";
            }
            html += "</ul></td>";
            html += "</table>";
            displayDiv.innerHTML = html;
        }
    </script>
</head>
<body>
    <form>
        <label for="bitcoin">Enter a bitcoin block hash: </label><br>
        <input type="text" id="bitcoin" name="bitcoin" style="width: 600px; padding: 4px;"><br><br>
        <button type="button" onClick="newAjaxQuery()">Get Bitcoin Block Information</button>
    </form>
    <br>
    <div id="display"></div>
</body>
</html>

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