ajax實(shí)踐

ajax 是什么?有什么作用?

  • AJAX的全稱是Asynchronous JavaScript and XML(異步的 JavaScript 和 XML)。
  • ajax是一種在無需重新加載整個(gè)網(wǎng)頁的情況下,能夠更新部分網(wǎng)頁的技術(shù)。
  • ajax是一種用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁的技術(shù)。通過在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換。ajax可以使網(wǎng)頁實(shí)現(xiàn)異步更新。這意味著可以在不重新加載整個(gè)網(wǎng)頁的情況下,對網(wǎng)頁的某部分進(jìn)行更新。而傳統(tǒng)的網(wǎng)頁(不使用ajax)如果需要更新內(nèi)容,必須重載整個(gè)網(wǎng)頁面。
  • 可以和后端交換數(shù)據(jù),不用刷新頁面

作用

  1. 最大的一點(diǎn)是頁面無刷新,用戶的體驗(yàn)非常好。
  2. 使用異步方式與服務(wù)器通信,具有更加迅速的響應(yīng)能力。。
  3. 可以把以前一些服務(wù)器負(fù)擔(dān)的工作轉(zhuǎn)嫁到客戶端
  4. 基于標(biāo)準(zhǔn)化的并被廣泛支持的技術(shù),不需要下載插件或者小程序。
  5. ajax可使因特網(wǎng)應(yīng)用程序更小、更快,更友好。

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

  • 需要和后端約定數(shù)據(jù)接口的名稱
  • 需要和后端約定數(shù)據(jù)格式是什么
  • 約定請求數(shù)據(jù)格式和響應(yīng)數(shù)據(jù)格式

根據(jù)約定自己設(shè)置模擬數(shù)據(jù),然后來完成測試

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

設(shè)置一個(gè)變量作為狀態(tài)鎖,初始的時(shí)候打開,發(fā)送完請求后鎖定,接收到響應(yīng)數(shù)據(jù)后在解鎖

var lock = true;
var btn = document.querySelector('button');
btn.onclick = function () {
  if (!lock) return;
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
      if (xhr.status >= 200 && xhr.status < 300) {
        let res = xhr.response;
      }
    }
    lock = true;
  }
  xhr.open('GET', 'dizhi');
  xhr.send();
  lock = false;
}

實(shí)現(xiàn)加載更多的功能,后端在本地使用server-mock來模擬數(shù)據(jù)

<!doctype html>
<html>
<head>
  <style>
    body {
      max-width: 800px;
      margin: auto;
      text-align: center;
    }
    ul,li {
      list-style: none;
    }
    li {
      border: 1px solid;
    }
  </style>
</head>
<body>
    <ul class="more">
    </ul>
    <button>加載更多</button>   
  <script>
    var btn = document.querySelector('button')
    var more = document.querySelector('.more')
    var lock = true;
    var index = 0;

    btn.addEventListener('click', function(){
        if (!lock) return;
       var xhr = new XMLHttpRequest()
       xhr.onreadystatechange = function(){
         if(xhr.readyState === 4){
          if (xhr.status === 200 || xhr.status === 304) {
              var res = JSON.parse(xhr.responseText);
              var forgment = document.createDocumentFragment();
              for (var i = 0; i < res.news.length; i++) {
                var node = document.createElement('li');
                node.innerText = res.news[i];
                forgment.appendChild(node);
              }
              more.appendChild(forgment); 
              index = res.index;
              lock = true;
          }
         }
       }
      xhr.open('get', '/more?index=' + index + '&length=5')
      xhr.send()
      lock = false;
    })
  </script>
</body>
</html>
router.get('/more', function(req, res) {
  var index = parseInt(req.query.index); // 通過 req.query獲取請求參數(shù)
  var length = parseInt(req.query.length);
  var news = [];
  var start = index * 5;
  for (var i = start; i < start + length; i++) {
    news.push('新聞' + i);
  }
  var moreNew  = {
    'news': news,
    'index': ++index
  }
  res.send(moreNew)
})
最后編輯于
?著作權(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)容