1. ajax 是什么？有什么作用？

Ajax(Asynchronous JavaScript + XML)是一种创建交互式网页应用的开发技术，利用Ajax可以向服务器请求额外的数据而无须卸载页面，会带来更好的用户体验。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。而传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
Ajax特点：

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

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

约定数据：需要传递哪些数据，数据的类型是什么；
约定接口：确定接口的名称以及请求和响应的格式，请求的参数名称、响应的数据格式。
根据这些约定整理成接口文档根据接口文档模拟后端使用的数据，模拟假的数据来测试接口是否可以正常使用。

server-mock可以模拟后端，来和前端进行数据交互。

安装node.js，在git bash里面输入npm install -g server-mock安装server-mock。
在终端cd找到文件所在的文件夹
在当前文件夹创建router.js，该文件是接收处理后端请求的文件（可认为是网站的后端），或者mock init可创建范例文件，再根据自己的需求修改
执行mock strat可将当前文件夹路径作为根目录启动web服务器
在浏览器输入http://localhost:8080/xxx.html, 如果xxx.html是index.html可以不用写，因为默认打开的就是它。

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

通过对数据是否接受完毕的状态来进行判断，当数据接收完毕时则允许下一次请求，否则不处理用户点击按钮的事件；状态锁初始状态为true，当用户点击按钮时开始请求数据，并将状态锁置为false，表示当前正在请求数据，此时再去点击按钮时，点击事件不会被处理也就不会再去发送数据请求，当数据接收完毕后，将状态锁置为true，此时用户可继续点击按钮请求数据。

  var isDataArrive = true;//声明状态锁，默认打开
    btn.addEventListener("click",function(){
        if (!isDataArrive) {
            return;//如果正在请求数据，那这次点击什么都不做
        }
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
            if (xhr.readystate === 4) {
                if (xhr.readystate === 200||xhr.readystate ===304) {
                    //dosomething
                }
                isDataArrive = true;//拿到数据，打开锁
            }
        }
        xhr.open('get','/index?length',true)
        xhr.send()
        isDataArrive = false;//上锁，禁止在请求完成前发请求
    })
</script>

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

前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        ul,li{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        #ct li{
            border: 1px solid #ccc;
            padding: 10px;
            margin-top: 10px;
        }
        .btn{
            width: 80px;
            height: 40px;
            margin: 20px auto;
            padding: 10px auto;
            border: 1px solid #E27272;
            border-radius: 2px;
            text-align: center;
            text-decoration: none;
            color: #E27272;
            display: block;
            line-height: 36px;
        }
        .btn:hover{
            background-color: green;
            color: white;
        }
    </style>
</head>
<body>
    <ul id="ct">

    </ul>
    <a href="javascript:void(0)" id="load-more" class="btn">加载更多</a>

<script>    
    var btn = document.querySelector('#load-more');
    var ct = document.querySelector('#ct');
    var pageIndex = 0;
    var isDataArrive = true;

    btn.addEventListener('click',function(){
        if (!isDataArrive) {
            return;
        }
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
            if (xhr.readyState === 4) {
                if (xhr.status === 200||xhr.status === 304){
                    var results = JSON.parse(xhr.responseText)
                    var fragment = document.createDocumentFragment()
                    for (var i = 0; i < results.length; i++) {
                        var node = document.createElement('li');
                        node.innerText = results[i];
                        fragment.appendChild(node);
                    }
                    ct.appendChild(fragment);
                    pageIndex += 5;
                }else{
                    console.log('It's wrong!)
                }
                isDataArrive = false;
            }
        }
        xhr.open('get','/load-more?index=' + pageIndex + '$length = 7',true)
        xhr.send()
        isDataArrive = true
    })
</script>
</body>
</html>

服务器端

app.get('/load-more',function(req,res){
    var idx = req.query.index;
    var len = req.query.length;
    var data = [];

    for(var i = 0;i < len;i++){
        data.push('new'+(parseInt(idx)+i))
    }
    setTimeout(function(){
        res.send(data);
    },1000)

});