进阶任务十二-ajax

ajax 是什么？有什么作用？
AJAX=异步 JavaScript 和 XML。是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
前后端开发联调需要注意哪些事情？
- 接口名称，统一命名，定制规范
- 数据类型一致
- 数据提交方式 get/post
后端接口完成前如何 mock 数据？
- 搭建node.js环境，使用server-mock模拟前后端数据传输
点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?

<script>
    var btn=document.querySelector("#load-more")
    var isDataArrive=true
    
    btn.addEventListener("click",function(){
      if(!isDataArrive){
        return
      }
      var xhr=new XMLHttpRequest()
      xhr.onreadystatechange=function(){
        if(xhr.readyState === 4 && (xhr.status === 200||xhr.status === 304)){
          console.log("test")
          isDataArrive=true
        }
      }
     xhr.open("get","/test",true) 
     xhr.send()
     isDataArrive=false
    })
    
  </script>

增加isDataArrive作为锁，在数据到来之前，不会再次发送ajax请求

实现加载更多的功能
网页代码：

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        #ct li {
            list-style: none;
            border: 1px solid #ccc;
            padding: 10px;
            margin-top: 10px;
            cursor: pointer;
        }

        #load-more {
            display: block;
            margin: 10px auto;
            cursor: pointer;
        }

        .btn {
            height: 40px;
            line-height: 40px;
            width: 80px;
            border: 1px solid #e27272;
            border-radius: 3px;
            text-align: center;
            text-decoration: none;
            color: #e27272;
        }

        .btn:hover {
            background-color: greenyellow;
            color: #fff;
        }
    </style>
</head>
<body>
    <ul id="ct"></ul>
    <a href="#" class="btn" id="load-more">加载更多</a>
    <script>
        var ct = document.querySelector("#ct")
        var btn = document.querySelector("#load-more")
        var pageIndex = 0
        var isDataArrive = true

        btn.addEventListener("click", function(e) {
            e.preventDefault();

            if(!isDataArrive) {
                return;
            }

            var xhr = new XMLHttpRequest()
            xhr.onreadystatechange = function() {
                if(xhr.readyState === 4) {
                    if(xhr.status === 200 || xhr.status === 304) {
                        var result = JSON.parse(xhr.responseText)

                        var fragment = document.createDocumentFragment()
                        for(var i = 0;i < result.length; i++) {
                            var node = document.createElement("li")
                            node.innerText = result[i]
                            fragment.appendChild(node)
                        }
                        ct.appendChild(fragment)
                        pageIndex += 5
                    }else {
                        console.log("出错了")
                    }
                    isDataArrive = true
                }
            }

            xhr.open("get", "/loadMore?index=" + pageIndex + "&length=5", true)
            xhr.send()
            isDataArrive = false
        })
    </script>
</body>
</html>

后端代码：

app.get("/loadMore", function(req,res) {
  var curIdx = req.query.index
  var len = req.query.length
  var data = []
  for(var i = 0; i < len; i++){
    data.push("新闻" + (parseInt(curIdx) + i))
  }
  setTimeout(function(){res.send(data)}, 5000)
}
)

进阶任务十二-ajax

推荐阅读更多精彩内容