ajax技术-使用GET方式获取全球新冠疫苗实时接种数据

       首先打开腾讯全球新冠疫苗接种实时追踪页面,如图10-2所示,然后按快捷键F12打开开发人员工具的Network模块,其中Fetch/XHR选项列出了当前页面的Ajax请求,JS选项卡列出了当前页面的JSONP请求。由此可以获取全球新冠疫苗实时接种、中国累计接种趋势数据的接口地址、需要发送给服务器的数据和服务器返回的数据,如图10-310-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 全球新冠疫苗实时接种数据


视频讲解:ajax技术-获取全球新冠疫情实时数据_哔哩哔哩_bilibili

源码:清华大学出版社-图书详情-《JavaScript前端开发与实例教程(微课视频版)》

猜你喜欢

转载自blog.csdn.net/weixin_43396749/article/details/128019055