ajax

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

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），通过XMLHttpRequest对象与服务器端脚本进行通信，从而实现以下作用：
（1）向服务器发出请求而不必重新加载页面；
（2）接收和处理服务器中返回的数据；

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

接口叫什么？接口名称，统一命名，定制规范，甚至拟定命名表。
接口传什么？数据类型确定，数据大小等限制的确定。
接口的相关参数： 服务器？端口？方法？请求数据的一些限制？
按照上述确认后的版本严格执行
前端可以在本地模拟服务器环境，mock数据请求的响应

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

状态锁

var locked = true;
btn.addEventListener("click", function () {
    if (!locked) {
        return;
    }
    var xhr = new XMLHttpRequest();

    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            locked = true;
        }
    }
    xhr.open();
    xhr.send();
    locked = false;
}

其他方法：

只允许同时存在一次提交操作，并且直到本次提交完成才能进行下一次提交。
无限制的提交，但是以最后一次操作为准。
无论提交如何频繁，任意两次有效提交的间隔时间必定会大于或等于某一时间间隔；即以一定频率提交。
任意两次提交的间隔时间，必须大于一个指定时间，才会促成有效提交。

参考：怎样防止重复发送 Ajax 请求？

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

function ajax(opt){
var xhr = new XMLHttpRequest;
xhr.onreadystatechange = function(){
  if (xhr.readyState === 4) {
    if (xhr.status === 200||xhr.status === 304) {
      var results = xhr.responseText;
      opt.success(results);
    }else{
      opt.error()
    }
  }
}
var query = '?';
for(key in opt.data){
  query+=key+'='+opt.data[key]+'&'; 
}
var query = query.substr(0,query.length-1)
xhr.open(opt.type,opt.url+query,true)
xhr.send()
}
document.querySelector('#btn').addEventListener('click',function(){
ajax({
  url: '/login',
  type: 'get',
  data: {
    username: 'xiaoming',
    password: 'abcd1234'
  },
  success: function(ret){
   console.log(ret);
  },
  error: function(){
    console.log('出错！')
  }
})
})

//router部分:
app.get('/login', function(req, res) {
var name=req.query.username;
var pwd=req.query.password;
var datas;
if(name ==='xiaoming'&& pwd ==='abcd1234'){
  datas = '登陆成功';
}else {
  datas = '用户名或密码错误';
}
  res.send(datas);
});