Ajax

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

• ajax是一种创建动态网页的技术，它能够在不重载整个网页的情况下，通过Javascript发出请求、获取数据，并通过DOM操作局部的更新网页内容。

2.前后端开发联调需要注意哪些事情？后端接口完成前如何 mock数据？(npm install -g server-mock)

• 前后端开发联调
  • 约定数据格式；
  • 制定前后端接口，约定参数和返回值；
  • 接口或数据格式发生改变时前后端需妥善沟通；
  • 前后端独立开发，前端向Mock-server发送请求，获取模拟数据进行开发和测试；
  • 前后端都完成后，前后端链接调试。
• 后端接口完成前如何 mock数据？
  • 在本地安装Mock-server提供接口和模拟数据。

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

• 可以通过一个变量来进行控制，例如：

var flag = 0;
btn.addEventListener('click', function(e){
    if(flag){return};
    flag = 1;
    var xhr = XMLHttpRequest();
    //todo...
    xhr.onreadystatechange = function(){
        // todo...
        flag = 0;
    }
})
```

###代码题
#####1. 封装一个 ajax 函数，能通过如下方式调用
```
    function ajax(opts){
        // todo ...
    }
    document.querySelector('#btn').addEventListener('click', function(){
        ajax({
            url: 'getData.php',   //接口地址
            type: 'get',               // 类型， post 或者 get,
            data: {
                username: 'xiaoming',
                password: 'abcd1234'
            },
            success: function(ret){
                console.log(ret);       // {status: 0}
            },
            error: function(){
               console.log('出错了')
            }
        })
    });
```
封装函数：
```
    function ajax(opts) {
        var xhr = new XMLHttpRequest();
        var dataStr = '';
        for (key in opts.data) {
            dataStr += key + '=' + opts.data[key] + '&';
        }
        dataStr = dataStr.substr(0, dataStr.length - 1);
        if (opts.type.toLowerCase() === 'get') {
            xhr.open(opts.type, url + '?' + dataStr, true);
            xhr.send();
        }
        if (opts.type.toLowerCase() === 'post') {
            xhr.open(opts.type, url, true);
            xhr.srtRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xhr.send(dataStr);
        }
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                var json = JSON.parse(xhr.responseText);
                opts.success(json);
            } else {
                opts.error();
            }
        }
    }
```

#####2.