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

ajax就是 Asynchronous JavaScript and XML， 是一種用于創建快速動態網頁的技術。
通過在后臺與服務器進行少量數據交換，AJAX 可以使網頁實現異步更新。這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。
作用：只刷新局部頁面，在向服務器獲取數據時不用刷新整個頁面，進而提升用戶體驗。

題目2： 前后端開發聯調需要注意哪些事情？后端接口完成前如何 mock 數據？

注意：

• 約定好需要傳輸的數據和接口，包括請求的類型get/post，請求url，數據的格式等

如何 mock 數據：

• 使用server-mock

題目3：點擊按鈕，使用 ajax 獲取數據，如何在數據到來之前防止重復點擊?

var isLoading = false //當前要加載的數據的序號
btn.addEventListener('click', function(){
  if(isLoading){
    return //如果正在請求數據，那這次點擊什么都不做
  }
  ajax('/loadmore', {
    idx:xxx
    len:xxx
  },function(data){
    appendData(data)
    isLoading = false//數據到來之后 解開
  })
  isLoading = true//發請求之前做個標記加鎖
})

題目4：封裝一個 ajax 函數，能通過如下方式調用。后端在本地使用server-mock來 mock 數據

function ajax(opts){
    var xhr = new XMLHttpRequest()
    var arr = []
    xhr.onreadystatechange = function(){
      if(xhr.readystate === 4 &&(xhr.status === 200 || xhr.status ===304)){
        var result = JSON.parse(xhr.responseText)
        return opts.success(result)
      }else{
        return opts.error()
      }
    }
    for(var key in opts.data){
      arr.push(key + '=' + data[key])
      str = arr.join('&')
    }
    if(opts.type.toLowerCase() === 'get'){
      xhr.open('get', opts.url + '?' + str, true)
      xhr.send()
    }
    if(opts.type.toLowerCase() === 'post'){
      xhr.open('post', opts.url, true)
      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
      xhr.send(str)
    }
}


document.querySelector('#btn').addEventListener('click', function(){
    ajax({
        url: '/login',   //接口地址
        type: 'get',               // 類型， post 或者 get,
        data: {
            username: 'xiaoming',
            password: 'abcd1234'
        },
        success: function(ret){
            console.log(ret);       // {status: 0}
        },
        error: function(){
           console.log('出錯了')
        }
    })
});

題目5：實現加載更多的功能

DEMO