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

• AJAX代表異步JavaScript和XML。簡而言之，它是使用 XMLHttpRequest 對象與服務(wù)器端腳本進(jìn)行通信。它可以發(fā)送以及接收各種格式的信息，包括JSON，XML，HTML，甚至文本文件。
• 向服務(wù)器發(fā)出請求，而不重新加載頁面；接收和處理服務(wù)器中的數(shù)據(jù)

題目2：前后端開發(fā)聯(lián)調(diào)需要注意哪些事情？后端接口完成前如何 mock 數(shù)據(jù)？

接口叫什么？接口名稱，統(tǒng)一命名，定制規(guī)范，甚至擬定命名表。
接口傳什么？數(shù)據(jù)類型確定，數(shù)據(jù)大小等限制的確定。
接口的相關(guān)參數(shù)： 服務(wù)器？端口？方法？請求數(shù)據(jù)的一些限制？
按照上述確認(rèn)后的版本嚴(yán)格執(zhí)行

• 前端可以在本地模擬服務(wù)器環(huán)境，mock數(shù)據(jù)請求的響應(yīng)

題目3：點(diǎn)擊按鈕，使用 ajax 獲取數(shù)據(jù)，如何在數(shù)據(jù)到來之前防止重復(fù)點(diǎn)擊?

• 在表單submit按鈕點(diǎn)擊后，把按鈕disabled
• 使用外部變量鎖定，用戶提交請求后將flag由true變?yōu)閒alse，當(dāng)響應(yīng)成功后把flag變回true
• 可以多次提交請求，但是以最后一次操作為準(zhǔn)，即盡快返回最后一次請求的響應(yīng)，前面的請求abort()掉
• 設(shè)置時(shí)間間隔，使任意兩次有效提交的間隔時(shí)間大于等于它

題目4： 封裝一個(gè) ajax 函數(shù)，能通過如下方式調(diào)用。后端在本地使用server-mock來 mock 數(shù)據(jù)

function ajax(opts){
          var httpRequest = new XMLHttpRequest()
          httpRequest.onreadystatechange = alertContents
          function alertContents() {
            if(httpRequest.readyState === XMLHttpRequest.DONE) {
              if(httpRequest.status === 200) {
                var response = JSON.parse(httpRequest.responseText)
                opts.success(response)
              } else {
                opts.error()
              }
            }
          }
          var query = ''
          for(var key in opts.data) {
            query += key + '=' + opts.data[key] + '&'
          }
          query = query.substr(0, query.length-1)
          if(opts.type.toLowerCase() === 'get') {
            httpRequest.open(opts.type, opts.url+'?'+query, true)
            httpRequest.send()
          }
          if(opts.type.toLowerCase() === 'post') {
            httpRequest.open(opts.type, opts.url, true)
            httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
            httpRequest.send(query)
          }
        }

work_ajax.png

題目5：

var btn = document.getElementById('load-more')
        var ct = document.getElementById('ct')
        var start = 6
        var len = 5
        var isDataArrive = true
        btn.addEventListener('click',function(e) {
          e.preventDefault()
          if(!isDataArrive) {
            return
          }
          ajax({
            url: '/load',
            type: 'get',
            data: {
              curIdx: start,
              length: len
            },
            success: function(res){
              var data = res.data
              console.log(data)
              render(data)
              isDataArrive = true
              //btn.classList.remove('loading')
            },
            error: function(res) {
              console.log(res.status)
            }
          })
          isDataArrive = false
          //btn.classList.add('loading')
        })

        function render(data) {
          var fragment = document.createDocumentFragment()
          var text = ''
          for(var i=0;i<data.length;i++) {
            var li = document.createElement('li')
            li.innerText = '列表'+data[i]
            fragment.appendChild(li)
          }
          ct.appendChild(fragment)
          start += len
        }

        function ajax(opts){
          var httpRequest = new XMLHttpRequest()
          httpRequest.onreadystatechange = alertContents
          function alertContents() {
            if(httpRequest.readyState === XMLHttpRequest.DONE) {
              if(httpRequest.status === 200) {
                var response = JSON.parse(httpRequest.responseText)
                opts.success(response)
              } else {
                opts.error(response)
              }
            }
          }
          var query = ''
          for(var key in opts.data) {
            query += key + '=' + opts.data[key] + '&'
          }
          query = query.substr(0, query.length-1)
          if(opts.type.toLowerCase() === 'get') {
            httpRequest.open(opts.type, opts.url+'?'+query, true)
            httpRequest.send()
          }
          if(opts.type.toLowerCase() === 'post') {
            httpRequest.open(opts.type, opts.url, true)
            httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
            httpRequest.send(query)
          }
        }

//router.js
/*
* url: '/load'
* reqPara: {start:1, len:5}
* resPara: {status:1, data:[1,2,3,4,5]}
*/
app.get('/load', function(req, res) {
    //req.query可以獲取請求參數(shù)
    var curIdx = req.query.curIdx
    var len = req.query.length
    var data = []
    for(var i=0;i<len;i++) {
        data.push((parseInt(curIdx)+i))
    }
    res.send({
        status: 1,
        data: data
    })
})

ajax9.png