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>
In Example 10-3, the code on line 8 parses the obtained JSON data into JavaScript object resData; the code on lines 10-20 respectively obtains the vaccination data of China and the world through the properties of the object resData, and displays them in the corresponding cells. Example 10-3 outputs the effect in the Chrome browser, as shown in Figure 10-7.
Figure 10-7 Real-time vaccination data display of global new crown vaccine
Video explanation: ajax technology - access to real-time data of the global new crown epidemic_哔哩哔哩_bilibili