首先打开腾讯全球新冠疫苗接种实时追踪页面,如图10-2所示,然后按快捷键F12打开开发人员工具的Network模块,其中Fetch/XHR选项列出了当前页面的Ajax请求,JS选项卡列出了当前页面的JSONP请求。由此可以获取全球新冠疫苗实时接种、中国累计接种趋势数据的接口地址、需要发送给服务器的数据和服务器返回的数据,如图10-3和10-4所示。图中标号1代表Network模块,标号2代表服务器数据接口地址和需要发送给服务器的数据,标号3代表服务器返回的数据。
图10-2 腾讯全球新冠疫苗接种实时追踪页面
图10-3 全球新冠疫苗实时接种数据接口地址及数据
图10-4 中国累计接种趋势数据的接口地址及数据
【例10-1】使用GET方式获取全球新冠疫苗实时接种数据。
1<script>
2 //创建XMLHttpRequest对象
3 var xhr = new XMLHttpRequest();
4 //设置异步请求类型和服务器地址
5 xhr.open("GET", "https://服务器地址?modules=VaccineTopData", true);
6 //监听Ajax状态的变化
7 xhr.onreadystatechange = function () {
8 //请求已完成并且状态码代表成功
9 if (xhr.readyState == 4 && xhr.status == 200) {
10 //控制台输出返回数据
11 console.log(xhr.responseText)
12 }
13 }
14 //向服务器发送数据
15 xhr.send();
16</script>
例10-1中,第3行代码创建XMLHttpRequest对象;第5行代码设置异步请求类型和服务器地址,使用GET方式;第7-13行代码监听Ajax状态的变化,当请求已完成并且状态码代表成功时向控制台输出返回数据;第15行代码向服务器发送数据。例10-1在Chrome浏览器控制台中输出结果,如图10-5所示。
图10-5 全球新冠疫苗实时接种数据