Flex 布局 / 纯原生 JavaScript 手写属于自己的疫情信息页面

使用腾讯提供的疫情信息接口

疫情信息接口如下：

https://api.inews.qq.com/newsqa/v1/query/inner/publish/modules/list?modules=chinaDayList,chinaDayAddList,nowConfirmStatis,provinceCompare

第一步：纯原生JS实现异步请求（ajax）

为什么使用纯原生的方法实现？

1. 虽然各种js框架层出不穷，但是企业面试官会更青睐于可以使用原生js实现一些功能的同学；
2. 可以让我们从本质上理解异步请求（ajax）；
3. 框架有很多，你曾经有没有为选择哪些框架而纠结过呢？比如jquery封装了ajax，axios也封装了ajax，那么作为学习阶段，就从现在开始不再犹豫和纠结，使用原生js来实现吧，等到我们进入到了工作环境，再去根据公司的那一套技术体系选择吧，总之，掌握了原理，再去学那些封装好的东西，就会轻而易举了！这也是为什么企业面试官总喜欢问一些你平时写项目都用不到的那些底层知识！

先建立目录结构，建立一个css目录来存放style.css，再于主目录建立一个index.html文件，没错，只有两个文件就可以了😁：

上代码！

index.html（注释必读！！！）[ 简单版本，一些特殊情况没有考虑 ]

<script>
	// 定义一个名为 data 的变量，用这个变量接收返回来的数据
    let data;
    // 我们新建一个 XMLHttpRequest 对象用于在后台与服务器交换数据
    // 并把这个新的对象赋值给一个名为 ajax 的变量
    // 这个变量名你想叫什么就叫什么，方便后续的调用即可
    let ajax = new XMLHttpRequest();
   	// 下面这个函数的第一个参数是指你想要以何种请求类型去请求后面的接口，一般为 get 或 post
   	// 想深入了解请求类型请学习HTTP请求相关的内容，面试也会经常被问到
   	ajax.open('GET','https://api.inews.qq.com/newsqa/v1/query/inner/publish/modules/list?modules=chinaDayList,chinaDayAddList,nowConfirmStatis,provinceCompare');
   	// 每当 readyState 改变时就会触发 onreadystatechange 函数
   	// 一共有4个状态：
   	// 0：初始化
   	// 1：建立连接
   	// 2：请求已经接受
   	// 3：请求处理中
   	// 4：请求已完成
   	// 所以我们在 onreadystatechange 函数中应该判断 readyState 的值，当它为 4 时再进行一定的数据操作
    ajax.onreadystatechange = function(){
    
        // readyState == 4说明请求已完成，数据就绪
        if(ajax.readyState == 4){
    
            if(ajax.status == 200 || ajax.status == 304){
    
            	// 请求到的数据赋值给变量 data
                data = ajax.responseText;
                // 打印数据到控制台
                console.log("我们接收到的数据为：" + data);
            }