ajax是什么剥懒？有什么作用渔欢？

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

前后端開發(fā)聯(lián)調(diào)需要注意哪些事情碧信？后端接口完成前如何mock數(shù)據(jù)?

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

點擊按鈕，使用 ajax 獲取數(shù)據(jù)输涕，如何在數(shù)據(jù)到來之前防止重復(fù)點擊?

• 在提交數(shù)據(jù)后音婶，直到獲取數(shù)據(jù)的這段時間內(nèi)慨畸，設(shè)置按鈕的屬性不可用
• 設(shè)置狀態(tài)鎖

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 函數(shù)莱坎，能通過如下方式調(diào)用。后端在本地使用server-mock來 mock 數(shù)據(jù)

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);
        }

    }

實現(xiàn)加載更多的功能寸士，后端在本地使用server-mock來模擬數(shù)據(jù)

 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);
        }

    }

//渲染數(shù)據(jù)
 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);
    }