题目1： ajax 是什么？有什么作用？

Ajax是Asynchronous JavaScript and XML的缩写，这一技术能够向服务器请求额外的数据而无需卸载整个页面，会带来良好的用户体验。

AJAX 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求）从服务器获取数据

这里的异步是指脱离当前浏览器页面的请求、加载等单独执行，这意味着可以在不重新加载整个网页的情况下，通过JavaScript发送请求、接受服务器传来的数据，然后操作DOM将新数据对网页的某部分进行更新，使用Ajax最直观的感受是向服务器获取新数据不需要刷新页面等待了

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

前后端开发联调中需要注意的是数据的传输，即需要事先协议好前端传入后台的请求，后端穿回前端的数据，浏览器发出请求即服务器发回数据，这是前后端沟通的渠道。
因此，在后端接口完成前，我们可以使用node.js中server-mock在本地模拟后端，虚拟出后端传回来的数据，前端对数据进行运行处理，以检测前端网页的功能。

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

防止重复点击有两种思路：
1.在服务器数据到来之前，忽略用户的重复点击；
2.服务器对用户的重复请求进行判断，如果请求相同，则只返回一组数据。
这两种思路分别是对应前端和后端。
思路1就是在前端对用户的操作进行判断，类似于之前的密码验证，能有效阻止90%的不当操作，更为有效的提高服务器速率。
前端对重复点击进行判断，只需要给发送的请求添加一个状态锁的属性，在服务器数据到来之前，状态锁为false，来之后为true，然后在浏览器发送请求前对状态锁进行判断。

 <script>
      var btn = document.querySelector('.layout > a')
      var ct = document.querySelector('#show')
      var isLoading = false;//状态锁设置初始状态

  function getrRndomint(min,max){
    return Math.floor(Math.random()*(max-min+1)+min)
  }

  btn.addEventListener('click',function(e){
    e.preventDefault();

    var xhr = new XMLHttpRequest()

    if (isLoading) {
      return ;
    };//对状态进行判断，阻止重复点击
    xhr.onreadystatechange = function(){
     if(xhr.readyState === 4 && (xhr.status === 200 || xhr.status === 304)){
      var data = JSON.parse(xhr.responseText)
      ct.innerHTML= '';
      for (var i = 0; i< data.length; i++) {
        var image = document.createElement('img')
        image.src = data[i]
        ct.appendChild(image)
      }
      console.log(data)
     }
     isLoading = false;//收到后台数据，状态锁为false
   }

  xhr.open('get', '/picture?number=' + (getrRndomint(3,6)), true)
  xhr.send()
  isLoading = true;// 发送请求后未收到后台数据，状态锁为true
  })
</script>

题目4：实现加载更多的功能，效果范例368，后端在本地使用server-mock来模拟数据

切换图片（图片资源来自后台）