進(jìn)階-任務(wù)12

題目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
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容