ajax

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

AJAX代表异步JavaScript和XML。简而言之，它是使用 XMLHttpRequest 对象与服务器端脚本进行通信。它可以发送以及接收各种格式的信息，包括JSON，XML，HTML，甚至文本文件。AJAX最吸引人的特性是，它的“异步”性质，这意味着它可以做所有这一切，而不必刷新页面。这让您可以根据用户事件更新页面的某些部分。
AJAX的两个主要功能允许您执行以下操作：
1、向服务器发出请求，而不重新加载页面
2、接收和处理服务器中的数据

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

注意事项
约定数据：有哪些需要传输的数据，数据类型是什么；
约定接口：确定接口名称及请求和响应的格式，请求的参数名称、响应的数据格式；
根据这些约定整理成接口文档
如何mock
1、将 mock 数据写在代码中。

// $.ajax({
//   url: ‘https://cntchen.github.io/userInfo’,
//   type: 'GET',
//   success: function(dt) {
    var dt = {
      "isSuccess": true,
      "errMsg": "This is error.",
      "data": {
        "userName": "Cntchen",
        "about": "FE"
      },
    };
    if (dt.isSuccess) {
      render(dt.data);
    } else {
      console.log(dt.errMsg);
    }
//   },
//   fail: function() {}
// });

优点：可以快速修改数据
缺点：无法模拟异步的网络请求，无法测试网络异常；联调前需要做较多改动，增加最终上真实环境的切换成本。接口文档变化需要手动更新
2.搭建本地服务器
3.使用在线mock服务，比如 https://www.easy-mock.com

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

使用状态锁

var  lock=false,
       btn = document.qureySelector('#btn');
btn.addEventListener('click', function(){
    if(lock){
        return;
    }else{
        lock=true;
        ajax({
            ....
            lock=false   //收到响应之后才把false赋值给lock
        })
    }
})

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

 function ajax(opts) {
    var xmlhttp;
    if(window.XMLHttpRequest) {           //IE7+,chrome,Safari,Opera,Firefox
      xmlhttp = new XMLHttpRequest();
    } else {
      xmlhttp = new AcitveXObject("Microsoft.XMLHTTP");  //IE5,IE6
    }
    xmlhttp.onreadystatechange = function() {
      if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        var json = JSON.parse(xmlhttp.responseText);
        opts.success(json);
      }
      if(xmlhttp.status == 404) {
        opts.error();
      }
    }
    var dataStr= '';
    for(var key in opts.data) {
      dataStr += key + '=' + opts.data[key] + '&';
    }
    dataStr = dataStr.substr(0,dataStr.length-1);
    if(opts.type.toLowerCase() == 'get') {
      xmlhttp.open(opts.type, opts.url + '?' + dataStr, true);
      xmlhttp.send();
    }
    if(opts.type.toLowerCase() == 'post') {
      xmlhttp.open(opts.type, opts.url, true);
      xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      xmlhttp.send(dataStr);
    }
  }

https://segmentfault.com/a/1190000004322487