ajax 是什么？有什么作用？

• AJAX 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求）从服务器获取数据.
  通过JavaScript发送请求、接受服务器传来的数据，然后操作DOM将新数据对网页的某部分进行更新，使用Ajax最直观的感受是向服务器获取新数据不需要刷新页面等待

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

• 前后端进行开发前，注意接口的名字，请求的方式，数据的类型
• 后端接口完成前，前端可以通过MOCKJS等工具模拟数据。

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

• 可以设置状态锁
  var flag=false;//设置状态锁
  btn.addEventListerner('click',function(){
  if(!flag){
  flag=true;//打开状态锁
  //to do运行代码
  flag=false;//执行完代码，将状态锁关闭
  }
  })
• 使用计时器
  var oBtn=document.querySelector(".button");
  var clockTime=null;
  oBtn.addEventListener("click",function(){
  if(clockTime){
  clearTimeout(clockTime)
  }
  clockTime=setTimeout(function(){
  //to do
  },5000)
  })

封装一个 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 xml = new XMLHttpRequest;
  xml.onreadystatechange = function(){
    if(xml.readyState == 4 && xml.status == 200){
      var jsonStr = JSON.parse(xml.responseText)
      opts.success(jsonStr);
    }
    if(xml.status == 404){
      opts.error()
    }
  }
  var dataStr = '';
  for(key in opts){
  dataStr += key + '=' + opts.data[key] + "&";    
  };
  dataStr= dataStr.substr(0,dataStr.length-1);
  if(opts.type.toLowerCase == 'post'){
    xml.open(post,opts.url,true);
    xml.setreRequestHeader('Content-type','application-x-www-form-urlencoded');
    xml.send(dataStr);
  }
  if(opts.type.toLowerCase == 'get'){
    xml.open(get,opts.url+'?'+dataStr,true);
    xml.send();
  }
}