Ajax及其应用-CSDN博客

<!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>
  <ul id="posts"></ul>
  <!-- 无序列表，装一个新闻 -->
  <script>
    var url = "http://1.14.69.117:5000/posts";
    //   var url = "http://1.14.69.117:5000/postsss";

    //1.new对象
    var xhr = new XMLHttpRequest();
    //2.建监听
    xhr.addEventListener("load", function () {
      if (xhr.status === 200) {
        console.log(xhr.response);
        //(1)把JSON格式字符串转换为数组
        var data = JSON.parse(xhr.response);
        //  (2)遍历数组，创建li
        var allLi = "";
        for (var i = 0; i < data.length; i++) {
          var oneLi = `<li>title:${data[i].title} author:${data[i].author}</li>`; //模板字符串
          allLi = allLi + oneLi;
        }
        //(3)将所有li加入到ul
        document.querySelector("#posts").innerHTML = allLi;
      } else {
        console.log("get server error response:", xhr.status);
      }
      // console.log(xhr.response); //第二步（异步） 第一步（同步）
      console.log("recevie all data"); //第三步（异步） 第二步（同步）
    });
    //3.设置参数（默认是异步）
    xhr.open("GET", url, false); //第三个参数为false，即表示同步，为true表示异步
    //4.发送
    xhr.send();
    console.log("after send"); //第一步（异步） 第三步（同步）
  </script>
</body>

</html>