js实现ajax获取数据

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- GET 比 POST 更简单更快，可用于大多数情况下。 不过，在以下情况始终使用 POST： 缓存文件不是选项（更新服务器上的文件或数据库）
    向服务器发送大量数据（POST 无大小限制） 发送用户输入（可包含未知字符），POST 比 GET 更强大更安全 -->
  <ul id="list"></ul> <button id="btn1">检测浏览器是否支持</button> <button id="btn2">获取数据</button>
  <script>
    // $(function(){
    // var api = './data/data.json';
    // $.ajax({
    // type:'GET',
    // url:api,
    // dataType:'json',
    // success:function(result){
    // console.log(result);
    // var each = '';
    // $.each(result.list,function(i,n){
    // each += `<li>'${n.texturl}'</li>`;
    // })
    // $('#list').append(each)
    // }
    // })
    // })
    // ajax对象是window对象的一个子对象window.XMLhttpRequest，是用来实现异步请求数据
    // 1、定义变量，存放ajax对象 { var xhr = window.XMLHttpRequest; console.log(xhr); }
    // 2、判断浏览器是否支持XMLHttpRequest
    {
      var btn1 = document.querySelector('#btn1');
      btn1.onclick = function () {
        if (window.XMLHttpRequest) {
          var xhr = new XMLHttpRequest();
          alert(xhr + '支持')
        }
      }
    }
    // 3、通过ajax获取数据
    {
      var btn2 = document.querySelector('#btn2');
      var list = document.querySelector('#list');
      btn2.onclick = function () {
        if (window.XMLHttpRequest) {
          // 1.创建ajax对象
          var xhr = new window.XMLHttpRequest();
          // 2.调用ajax对象中的open方法：打开请求
          var api = './data/data.json';
          // method：请求的类型：GET 还是 POST
          // url：服务器（文件）位置
          // async：true（异步）或 false（同步）
          xhr.open('get', api, true);
          // 3. 调用ajax对象中的send方法：发送请求
          xhr.send();
          // 4. 将从服务器上请求到的数据显示在页面上
          // onreadystatechange 监听服务器的响应状态
          // readyState 保存了 XMLHttpRequest 的状态。
          // 0: 请求未初始化
          // 1: 服务器连接已建立
          // 2: 请求已接收
          // 3: 正在处理请求
          // 4: 请求已完成且响应已就绪
          // status
          // 200: "OK"
          // 403: "Forbidden"
          // 404: "Page not found"
          xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
              // xhr.responseText 是数据的文本状态(字符串形式)
              // JSON.parse() 方法用于将一个 JSON 字符串转换为对象。
              var res = JSON.parse(xhr.responseText);
              console.log(res.list);
              var lis = res.list
              lis.forEach(function (value, index, arr) {
                console.log(value.nid);
                // (1)定义需要添加的dom标签
                var li = document.createElement('li');
                li.classList.add('m')
                // (2)定义添加的dom的文本内容
                var text = document.createTextNode(value.nid);
                // (3)将文本内容追加到dom标签中
                li.appendChild(text);
                // (4)将虚拟dom添加到页面中
                list.appendChild(li);
                var a = document.createElement('a');
                var text1 = document.createTextNode('走你');
                a.appendChild(text1)
                a.href = '' + value.texturl + ''
                li.appendChild(a)
              })
            }
          }
        } else {
          console.log('请求失败');
        }
      }
    }
    console.log(document.querySelector('.m'));
  </script>
</body>

</html>

data.json模拟的数据：

{
  "status": 200,
  "message": "成功",
  "list": [{
    "nid": 1,
    "title": "t1",
    "texturl": "https://www.jq22.com/",
    "addtime": "20201-5-20 22:22:22"
  }, {
    "nid": 2,
    "title": "t2",
    "addtime": "20201-5-20 22:22:22",
    "texturl": "https://www.jq22.com/"
  }, {
    "nid": 3,
    "title": "t3",
    "addtime": "20201-5-20 22:22:22",
    "texturl": "https://www.jq22.com/"
  }]
}

202106301625040640180092