进阶12 ajax实践

使用server-mock

1.安装nodejs
2.打开gitbash,执行npm install -g server-mock
使用：搭建web服务器

在终端cd到你的文件所在的文件夹
执行mock start可将当前文件夹路径作为根目录启动一个web服务器
在浏览器中输入http://localhost:8080/xx.html

题目1： ajax 是什么？有什么作用？

Ajax(Asynchronous JavaScript + XML)是一种创建交互式网页应用的开发技术，利用Ajax可以向服务器请求额外的数据而无须卸载页面，会带来更好的用户体验。
Ajax特点：

Ajax通过JavaScript发送请求、接受服务器传来的数据，然后操作DOM将新数据对网页的某部分进行更新。
Ajax的核心是XMLHttpRequest对象

题目2：前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？

前后端开发联调需要注意事项：

约定接口数据：包括接口名称,前端需要传的查询数据格式，后台返回的数据格式，请求方式(get/post/...)
根据约定生成接口文档

mock数据方式：
使用nodejs搭建服务器，如安装server-mock，在项目所在的根目录创建router.js文件，修改router.js代码，添加方法模拟接收前端请求，并返回数据。

3：点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?

添加一个判断数据是否到来的isDataArrive变量，4中有实现。

4：实现加载更多的功能，效果范例312，后端在本地使用server-mock来模拟数据

参考代码

//router.js
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);
    },3000);
    
});

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>
      加载更多
    </title>
    <style>
      ul,li{
      margin: 0;
      padding: 0
    }
    #ct li{
      list-style:none;
      border: 1px solid #ccc;
      padding: 10px;
      margin-top: 10px;
      cursor:pointer;
    }
    #load-more{
      display: block;
      margin: 10px auto;
      text-align: center;
      cursor: pointer;
    }
    #load-more img{
      width: 40px;
      height: 40px;
    }
    .btn{
      display: inline-block;
      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: green;
      color: #fff;
    }
      </style>
  </head>
  <body>
    <ul id="ct">
    </ul>
    <a id="load-more" class="btn" href="javascript:void(0);">
      加载更多
    </a>
  </body>

  <script>
      var btn = document.querySelector("#load-more");
      var ct = document.querySelector('#ct');
      var pageIndex = 0;
      var isDateArrive = true;             //防止多次点击造成的多次请求
      
      btn.onclick = function(){
        if(!isDateArrive){
            return;
        }
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){

          if(xhr.readyState === 4){
            if(xhr.status === 200 || xhr.statue === 304){
              var result = JSON.parse(xhr.responseText);
              var fragment = document.createDocumentFragment();
              for(var i=0;i<result.length;i++){
                var li = document.createElement('li');
                li.innerText = result[i];
                fragment.appendChild(li);
              }
              ct.appendChild(fragment);
              pageIndex += 5;
              isDateArrive = true;
            }
            else {
              console.log('出错了');
            }
          }
        }
        xhr.open('get','/loadMore?index='+pageIndex+'&length=5',true);
        xhr.send();
        isDateArrive = false;
      }     
    </script>
</html>