ajax是什么？有什么作用？

• AJAX代表異步JavaScript和XML，簡而言之，它是使用XMLHttpRequest對象與服務器端腳本進行通信，它可以發送以及接收各種格式的信息。
• AJAX的兩個主要功能允許執行以下操作：
  1. 向服務器發出請求，而不重新加載頁面
  2. 接收和處理服務器中的數據

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

• 注意事項
  • 約定頁面接口參數
  • 約定頁面數據格式
  • 約定請求參數
  • 約定需要數據類型
• 后端可以通過XMAPP或者server-mock來模擬mock數據

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

• 在提交數據后，直到獲取數據的這段時間內，設置按鈕的屬性不可用
• 設置狀態鎖

var lock = false;
  document.querySelector('#btn').addEventListener('click', function() {
        if (lock) return;
        ...
        var xhr = new XMLHttpRequest();
        xhr.open('get', '/getMusic?name=' + musicName, true);
        xhr.send();
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                document.querySelector('#container').innerHTML = xhr.responseText;
                lock = false;
                console.log(lock);
            }
        }
        lock = true;
    })

封裝一個 ajax 函數，能通過如下方式調用。后端在本地使用server-mock來 mock 數據

function ajax(opts) {
        var xhr;
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        } else {
            xhr = new ActiveXObject('Microsoft.XMLHTTP');
        }
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                var json = JSON.parse(xhr.responseText);
                opts.success(json);
            }
            if (xhr.status === 404) {
                opts.error();
            }
        }
        var data = '';
        for (var key in opts.data) {
            data += key + '=' + opts.data[key] + '&';
        }
        data = data.substr(0, data.length - 1);
        if (opts.type.toLowerCase() === 'get') {
            xhr.open(opts.type, opts.url + '?' + data, true);
            xhr.send();
        }
        if (opts.type.toLowerCase() === 'post') {
            xhr.open(opts.type, opts.url, true);
            xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
            xhr.send(data);
        }

    }

實現加載更多的功能，后端在本地使用server-mock來模擬數據

 var lock = false;
    var curIndex = 2;
    $('#btn').addEventListener('click', function() {
        if (lock) return;
        ajax({
            url: '/loadMore',
            type: 'get',
            data: {
                curIndex: curIndex,
                len: 5
            },
            success: function(data) {
                appendData(data);
                curIndex += 4;
                lock = false;
            },
            error: function() {
                console.log('錯誤')
            }
        })
        lock = true;
    })

    // ajax封裝
    function ajax(opts) {
        var xhr;
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        } else {
            xhr = new ActiveXObject('Microsoft.XMLHTTP');
        }
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                var json = JSON.parse(xhr.responseText);
                opts.success(json);
            }
            if (xhr.status === 404) {
                opts.error();
            }
        }
        var data = '';
        for (var key in opts.data) {
            data += key + '=' + opts.data[key] + '&';
        }
        data = data.substr(0, data.length - 1);
        if (opts.type.toLowerCase() === 'get') {
            xhr.open(opts.type, opts.url + '?' + data, true);
            xhr.send();
        }
        if (opts.type.toLowerCase() === 'post') {
            xhr.open(opts.type, opts.url, true);
            xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
            xhr.send(data);
        }

    }

//渲染數據
 function appendData(data) {
        for (var i = 0; i < data.length; i++) {
            var li = document.createElement('li');
            li.innerHTML = data[i];
            $('#doc-list-content').append(li);
        }
    }

function $(id) {
        return document.querySelector(id);
    }