ajax

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

ajax是一种技术方案，但并不是一种新技术。它依赖的是现有的CSS/HTML/Javascript，而其中最核心的依赖是浏览器提供的XMLHttpRequest对象，是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。

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

确定调用接口和方法，以及数据格式根据，形成文档，便于查询
后端根据文档中确定的数据格式，模拟数据

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

加锁。初始化一个状态锁，点击后立即改变锁的状态，直到收到后端的消息，才将锁再次初始化。如题4代码。

题目4：封装一个 ajax 函数，能通过如下方式调用。后端在本地使用server-mock来 mock 数据

function ajax(opts){ 
    // todo ...
}
document.querySelector('#btn').addEventListener('click', function(){ 
    ajax({ 
        url: '/login', //接口地址 
        type: 'get', // 类型， post 或者 get, 
        data: { 
            username: 'xiaoming', 
            password: 'abcd1234' 
        },
        success: function(ret){ 
            console.log(ret); // {status: 0} 
        }, 
        error: function(){ 
            console.log('出错了'); 
        } 
    })
});

代码：

var lock = true;
function ajax(opts){ 
    if (!lock){
        return;
    }
    var xhr = new XMLHttpRequest();

    opts.success = opts.success || function() {};
    opts.error = opts.error || function() {};
    opts.type = opts.type || 'get';
    opts.data = opts.data || {};

    var dataStr = '';
    for (var key in opts.data) {
        dataStr += key + '=' + opts.data[key] + '&';
    }
    //console.log(dataStr);
    var data = dataStr.slice(0, -1);
    //console.log(data);
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            if (xhr.status == 200){
                opts.success(xhr.responseText);
            }else{
                opts.error();
            }
            
            lock = true;
        }
    }
    if (opts.type.toLowerCase() === 'post') {
        xhr.open(opts.type, opts.url, true);
        xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhr.send(dataStr);
    }
    if (opts.type.toLowerCase() === 'get') {
        xhr.open(opts.type, opts.url + '?' + data, true);
        xhr.send();
    }
    lock = false;
}

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