Ajax

Ajax

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

Ajax（Asynchronous JavaScript And XML）意思就是异步的JavaScript和XML
事实上，Ajax 与 XML 几乎没有任何关系，因为是异步交互，所以用户的页面不用刷新，在同一个页面中，客户端请求服务数据，当服务器数据返回时,
通过 JavaScript 将数据片段填充到页面的某个部分，即实现了局部刷新。

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

联调
- 约定：
  1. 前后端联调的事件
  2. 传输的数据、接口
  3. 请求和响应的内容和格式
mock数据 : 自己模拟数据
- 使用 sever-mock 等工具搭建环境

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

上锁

var lock = false;
btn.addEventListener('click', function() {
  if (!lock) {
      lock = true;
      ajax(XXXX);
      lock = false;
    }
});

代码

1. 封装一个 Ajax 函数，能通过如下方式调用

function ajax (options) {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      var responseData = JSON.parse(xhr.responseText);
      options.success(responseData);
    }
    if (xhr.readyState === 4 && xhr.status === 404) {
      options.error();
    }
  }

  var dataStr = '';
  for (var key in options.data) {
    dataStr += key + '=' + options.data[key] + '&';
  }
  dataStr = dataStr.substr(0, dataStr.length - 1);

  if (options.type.toLowerCase() === 'get') {
    var url = options.url + '?' + dataStr;
    xhr.open(options.type, url, true);
    xhr.send();
  }
  if (options.type.toLowerCase() === 'post') {
    xhr.open(options.type, options.url, true);
    xhr.setRequestHeader("Content-type", "application/x-www/form-urlencoded");
    xhr.send(dataStr);
  }
}

// BEGIN ** use ajax() ** sample **
  // ajax({
  //   url : 'xxx.php',
  //   type : 'GET',
  //   data : {
  //     key1 : val1,
  //     key2 : val2
  //   },
  //   success : function (data) {
  //     ...code...
  //   },
  //   error : function () {
  //     ...code...
  //   }
  // });
// END   ** use ajax() **