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

ajax（Asynchronous JavaScript and XML）以異步的方式從服務器獲取數據，不必刷新頁面也能獲取新數據。ajax的核心對象就是XMLhttpRequest，通過JavaScript DOM將ajax獲得的數據顯示在頁面上。

作用是帶來更好的用戶體驗。

2， 前后端開發聯調需要注意哪些事情？后端接口完成前如何 mock 數據？

前后端開發時需要注意：

1. 約定接口類型（GET還是POST)、接口（傳遞到那個路由）
2. 前端傳遞給后端的參數（參數的類型、格式）
3. 后端返回數據的格式（是數組還是字符串還是JSON格式）

后端接口完成前可以使用server-mock搭建模擬服務器

3，點擊按鈕，使用 ajax 獲取數據，如何在數據到來之前防止重復點擊?

設置判斷變量，數據沒拿到時設置為false，拿到數據才設置為true，為false時忽略后面的點擊事件

本例中的isDataArrive即為判斷數據是否拿到的變量

<script>
    //整體思路就是給按鈕添加點擊事件，寫ajax得到數據，然后通過渲染添加到html上就可以了
    var btn = document.querySelector('#load-more');
    var ct = document.querySelector('#ct');
    var tempIndex = 3;//記錄每次的變量

//    針對網速較慢并且重復點擊的情況做得優化：第一種思路，如果一點時間內請求沒到，忽略用戶后面點擊的。第二種思路，用戶點擊了多次，每次的輸出內容都要顯示
    var isDataArrive = true; // 設置判斷變量，數據沒拿到時設置為false


    btn.addEventListener('click',function () {

        if (!isDataArrive) {
            return; //如果數據沒拿到，直接return掉，后面的點擊就被忽略掉
        }

        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 &&　(xhr.status == 200 || xhr.status == 304)) {
                var content = JSON.parse(xhr.responseText);
//                console.log(content); //寫到這先測試一下給的數據對不對
//                開始拼裝html
//                var html = '';
//                for (var i = 0; i < content.length; i ++) {
//                    html += '<li>' + content[i] + '</li>';
//                }
//               拼裝好html，應該是appendChild到ct后面，但是每次appendChild回影響性能，可以使用Fragment，所以可以改寫為：
                var fragment = document.createDocumentFragment();
                for (var i = 0; i < content.length; i ++) {
                    var node = document.createElement('li');
                    node.innerText = content[i]; // 使用innerText不用innerHTML還有個好處是可以防止xss注入
                    fragment.appendChild(node);
                }
                ct.appendChild(fragment);
                tempIndex += 5;

                isDataArrive = true;//readyState === 4 表示數據已經拿到了
            }
        };
        xhr.open('get','/loadMore?index='+ tempIndex +'&length=5',true);
//       前端需要得到一個數組 ['content1','content2',...,'content5']
//       前端需要向后端發送的  /loadMore?index=3&length=5                  /loadMore為接口，后端對loadMore進行處理
//        {
//            index: 3,
//            length: 5,
//         }
/*          一般在請求數據之前都要想清楚前端需要得到什么數據，需要向后端發送的是什么接口，參數是怎么樣的。
            1.GET
            2./loadMore
            3. {
                index: 3,
                length: 5,
            }
            4. ['content1','content2',...,'content5']
 */
        xhr.send();
        isDataArrive = false; // 沒拿到數據設置為false
    })
</script>