ajaxテクノロジー - 世界の新型クラウンワクチンのリアルタイムワクチン接種データ表示

1 <script>
2        var tds = document.querySelectorAll('td'); //获取页面中所有单元格
3        var xhr = new XMLHttpRequest();       
4        xhr.open("GET", "服务器地址?modules=VaccineTopData", true);
5        xhr.onreadystatechange = function () {
6       if (xhr.readyState == 4 && xhr.status == 200) {         
7            //将获取的JSON数据解析成JavaScript对象                
8            var resData = JSON.parse(xhr.responseText); 
9            //第2个单元格的内容设置为中国累计接种数据
10           tds[1].innerHTML = resData.data.VaccineTopData.中国.total_vaccinations;
11           //第3个单元格的内容设置为中国较上日新增数据
12           tds[2].innerHTML =resData.data.VaccineTopData.中国.new_vaccinations;
13           //第4个单元格的内容设置为中国每百人接种数据
14        tds[3].innerHTML=resData.data.VaccineTopData.中国.total_vaccinations_per_hundred;
15           //第6个单元格的内容设置为全球累计接种数据
16           tds[5].innerHTML =resData.data.VaccineTopData.全球.total_vaccinations;
17           //第7个单元格的内容设置为全球较上日新增数据
18           tds[6].innerHTML =resData.data.VaccineTopData.全球.new_vaccinations;
19           //第8个单元格的内容设置为全球每百人接种数据
20       tds[7].innerHTML =resData.data.VaccineTopData.全球.total_vaccinations_per_hundred;
21            }
22      }
23     xhr.send();
24 </script>

例10-3では、8行目のコードは取得したJSONデータをJavaScriptオブジェクトresDataに解析し、10行目から20行目のコードはオブジェクトresDataのプロパティを通じて中国と世界のワクチン接種データをそれぞれ取得し、対応するセル。例 10-3 では、図 10-7 に示すように、Chrome ブラウザにエフェクトを出力します。

図 10-7 世界の新しいクラウンワクチンのリアルタイムワクチン接種データ表示

---

ビデオ説明: ajax テクノロジー - 世界的な新型コロナウイルス感染症のリアルタイム データへのアクセス_哔哩哔哩_bilibili

ソースコード:清華大学出版局-書籍詳細-「JavaScript フロントエンド開発とサンプル チュートリアル (マイクロクラス ビデオ版)」