1鉴分、 ajax 是什么？有什么作用箕戳？

ajax即asynchronous javascript and xml(異步j(luò)avascript和xml)
作用：

• 實(shí)現(xiàn)網(wǎng)頁(yè)的異步加載响疚，局部刷新網(wǎng)頁(yè)
• 向服務(wù)器獲取新數(shù)據(jù)時(shí)不需要刷新整個(gè)網(wǎng)頁(yè)，提高用戶體驗(yàn)

2译荞、前后端開(kāi)發(fā)聯(lián)調(diào)需要注意哪些事情瓤的？后端接口完成前如何 mock 數(shù)據(jù)？

前后端開(kāi)發(fā)聯(lián)調(diào)需要注意事項(xiàng)：

• 約定數(shù)據(jù)：有哪些需要傳輸?shù)臄?shù)據(jù)吞歼，數(shù)據(jù)類型是什么圈膏；
• 約定接口：確定接口名稱及請(qǐng)求和響應(yīng)的格式，請(qǐng)求的參數(shù)名稱篙骡、響應(yīng)的數(shù)據(jù)格式稽坤；
• 根據(jù)這些約定整理成接口文檔

如何mock數(shù)據(jù)：

• 可以根據(jù)接口文檔，使用假數(shù)據(jù)來(lái)驗(yàn)證我們制作的頁(yè)面響應(yīng)和接口是否正常糯俗。
• 可以用xampp進(jìn)行模擬
• 也可使用server-mock

3尿褪、點(diǎn)擊按鈕，使用 ajax 獲取數(shù)據(jù)得湘，如何在數(shù)據(jù)到來(lái)之前防止重復(fù)點(diǎn)擊?

  var btn = document.querySelector('.btn')
  var lock = true
  btn.addEventListener('click',function(){
    if (!lock) {
      return
    }

    var xhr. = new XMLHttpRequest()
    xhr.onreadystatechange = function(opts){
      if (xhr.readyState === 4 && xhr.status ===200) {
        var data = JSON.parse(xhr.responseText)
        opts.success(data)
      }else if (xhr.readyState === 4) {
        opts.error()
      }
      lock = true
    }
    xhr.open()
    xhr.send()
    lock = false

  })

4杖玲、封裝一個(gè) ajax 函數(shù)，能通過(guò)如下方式調(diào)用淘正。后端在本地使用server-mock來(lái) mock 數(shù)據(jù)

function ajax(opts){
    // todo ...
}
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('出錯(cuò)了')
        }
    })
});

代碼

  <input class="username" type="text" name="username" placeholder="請(qǐng)輸入用戶名">
  <input class="password" type="password" name="password" placeholder="請(qǐng)輸入密碼">
  <input class="btn" type="submit" name="submit" value="提交">
  <ul class="ct"></ul>

  <script type="text/javascript">
    function ajax(opts) {
      var xhr = new XMLHttpRequest()
      xhr.onreadystatechange = function(){
        if (xhr.readyState === 4 && xhr.status === 200) {
          var results = JSON.parse(xhr.responseText)
          opts.success(results)
        } else if (xhr.readyState === 4 && xhr.status ===404) {
          opts.error()
        }
      }

      var dataStr = ''
      for (var key in opts.data) {
        dataStr += key + '=' + opts.data[key] + '&'
      }
      dataStr = dataStr.substr(0,dataStr.length-1)
/*
      var dataArr = []
      for (var key in opts.data) {
        dataArr.push(key + '=' + opts.data[key])
      }
      dataStr = dataArr.join('&') 
*/
      var urlStr = ''
      if (opts.type === 'get') {
        urlStr += opts.url + '?' + dataStr
        xhr.open(opts.type,urlStr,true)
        xhr.send(null) 
      }else if (opts.type === 'post') {
        xhr.open(opts.type,opts.url,true)
        xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')
        xhr.send(dataStr)
      }
    }

    var username = document.querySelector('.username')
    var password = document.querySelector('.password')
    var ct = document.querySelector('.ct')
    var btn = document.querySelector('.btn')
    btn.addEventListener('click', function(){
      ajax({
        url: '/login',   //接口地址
        type: 'post',               // 類型， post 或者 get,
        data: {
          username: username.value,
          password: password.value
        },
        restype: 'json',
        success: function(ret){   
          ct.innerText = ret
          console.log(ret);       // {status: 0}
        },
        error: function(){
          console.log('出錯(cuò)了')
        }
      })
    });
  </script>

mock.js

app.get('/login', function(req, res) {
  var username = req.query.username
  var password = req.query.password
  console.log('有請(qǐng)求來(lái)了');
  console.log(username,password);
    if (username === 'xiaoming' && password === 'abcd1234') {
      var friends = ['xiaoming','abcd1234'] 
    res.send(friends);
    }else{
    var friends = ['請(qǐng)重新輸入']
        res.send(friends);
    }
});
app.post('/login', function(req, res) {
  var username = req.body.username
  var password = req.body.password
  console.log('有請(qǐng)求來(lái)了');
    console.log(username,password);
    if (username === 'xiaoming' && password === 'abcd1234') {
      var friends = ['xiaoming','abcd1234'] 
      res.send(friends);
    }else{
      var friends = ['請(qǐng)重新輸入']
      res.send(friends);
    }
});

5鸿吆、實(shí)現(xiàn)加載更多的功能囤采，后端在本地使用server-mock來(lái)模擬數(shù)據(jù)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>加載更多</title>
  <style type="text/css">

    ul,li {
      list-style: none;
      padding: 0;
    }
    li {
     display: block;
     margin: 10px auto;
     border: 1px solid #ccc;
     padding: 5px;
     /*
     width: 600px;
     height: 30px;
     box-sizing: border-box;
     */
    }
    .ct li:hover {
      background-color: green;
      cursor: pointer;
    }
    .btn {
      cursor: pointer;
      width: 100px;
      height: 40px;
      border-radius: 3px;
      font-size: 16px;
      margin: 20px auto;
      display: block;
      outline: none;
    }
    .btn:hover {
      background-color: pink;
      color: green;
    }
  </style>
</head>
<body>
  <ul class="ct"></ul>
  <button class="btn">加載更多</button>

  <script type="text/javascript">
    var ct = $('.ct')
    var btn = $('.btn')
    var lock = true
    var index = 0

    btn.addEventListener('click', function(){
      if (!lock) {
        return
      }
      ajax({
        url: '/loadMore',   //接口地址
        type: 'post',               // 類型， post 或者 get,
        data: {
          index: index,
          length: 5
        },
        restype: 'json',
        success: function(ret){
          var fragment = document.createDocumentFragment()
          for (var i = 0; i < ret.length; i++) {
                var li = document.createElement('li')
                li.innerText = ret[i]
                fragment.appendChild(li)
             }   
          ct.appendChild(fragment)
          index += 5       // {status: 0}
        },
        error: function(){
          console.log('出錯(cuò)了')
        }
        
      })

    });    

    function ajax(opts){
      var xhr = new XMLHttpRequest()
      xhr.onreadystatechange = function(){
        if (xhr.readyState === 4 && xhr.status === 200) {
          var data
          if (opts.restype.toLowerCase() === 'text') {
            data = xhr.responseText
          } else if (opts.restype.toLowerCase() === 'json') {
            data = JSON.parse(xhr.responseText)
          } else if (opts.restype.toLowerCase() === 'xml') {
            data = xhr.responseXML
          }
          opts.success(data)
        }else if(xhr.readyState === 4){
          opts.error(); 
        }
        lock = true
      }

      var dataStr = ''
      for (var key in opts.data) {
        dataStr += key + '=' + opts.data[key] + '&'
      }
      dataStr = dataStr.substr(0,dataStr.length-1)
/*
      var dataArr = []
      for (var key in opts.data) {
        dataArr.push(key + '=' + opts.data[key])
      }
      dataStr = dataArr.join('&') 
*/
      var urlStr = ''
      if (opts.type === 'get') {
        urlStr += opts.url + '?' + dataStr
        xhr.open(opts.type,urlStr,true)
        xhr.send(null) 
      }else if (opts.type === 'post') {
        xhr.open(opts.type,opts.url,true)
        xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')
        xhr.send(dataStr)
      }
      lock = false
    }

    function $(cls){
      return document.querySelector(cls)
    }
  </script>
</body>
</html>

mock數(shù)據(jù)

app.get('/loadMore',function(req,res) {
  var index = req.query.index
  var length = req.query.length
  var data = []
  for (var i = 0; i < length; i++) {
    data.push('內(nèi)容' + (parseInt(index) + i+1))
  }
  setTimeout(send,1000)
  function send(){
    res.send(data)
  }
    // body...
})

app.post('/loadMore',function(req,res) {
  var index = req.body.index
  var length = req.body.length
  var data = []
  for (var i = 0; i < length; i++) {
    data.push('內(nèi)容' + (parseInt(index) + i+1))
  }
  setTimeout(send,1000)
  function send(){
    res.send(data)
  }
  
    // body...
})