JavaScript-ajax實踐

小練習：

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

關於ajax

AJAX即“Asynchronous JavaScript and XML”（非同步的JavaScript與XML技術），是一種使用現有標準的新方法，能夠在不重新載入整個頁面的情況下，使網頁實現非同步更新。

傳統方法提交表單資料時，需要向伺服器傳送請求，伺服器接收並處理請求以後再返回新的網頁，不僅浪費頻寬，網頁重新整理還會給使用者帶來不好的瀏覽體驗。

ajax的作用

1. 更新頁面內容時，不需要重新整理，提供更好的使用者體驗；
2. 與伺服器實現非同步通訊，響應效率更高；
3. 良好的技術支援。

題目2： 前後端開發聯調需要注意哪些事情？後端介面完成前如何 mock 資料？

注意事項

1. 充分了解專案需求和內容設計；
2. 專案實現約定：比如介面型別（post／get）和名稱；傳送和接收資料型別和格式等。

mock資料

1. 使用node.js搭建一個web伺服器，這裡推薦使用server-mock，安裝方式為：npm install -g server-mock；還可以使用easy-mock；
2. 建立router.js檔案並進行編輯，用於接收和處理髮過來的請求；
3. 在HTML檔案中呼叫即可。

參考資訊：https://www.npmjs.com/package/server-mock

題目3：點選按鈕，使用 ajax 獲取資料，如何在資料到來之前防止重複點選?

處理思路：阻止使用者在資料到來之前，使用狀態鎖防止重複點選。

題目4：實現載入更多的功能，效果範例426，後端在本地使用server-mock來模擬資料

  <ul class="content"></ul>
  <button id="load-more" class="btn">載入更多</button>

  ul,
  li {
    margin: 0;
    padding: 0;
  }

  .content li {
    list-style: none;
    border: 1px solid #ccc;
    padding: 10px;
    margin: 10px 0;
    cursor: pointer;
  }

  #load-more {
    display: block;
    text-align: center;
    width: 80px;
    height: 35px;
    border: 1px solid #ccc;
    border-radius: 3px;
    cursor: pointer;
    margin: 0 auto;
  }

  var btn = document.querySelector('#load-more');
  var content = document.querySelector('.content');
  var pageIndex = 0;
  var isDataArrive = true;

  btn.addEventListener('click', function() {

    if (!isDataArrive) {
      return;
    }

    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4) {
        if (xhr.status === 200 || xhr.status === 304) {
          var result = JSON.parse(xhr.responseText);
          console.log(result);

          var fragment = document.createDocumentFragment();
          for (var i = 0; i < result.length; i++) {
            var node = document.createElement('li');
            node.innerText = result[i];
            fragment.appendChild(node);
          }
          content.appendChild(fragment);

          pageIndex = pageIndex + 5;
        }
        isDataArrive = true;
      }
    };
    xhr.open('get', '/loadMore?index=' + pageIndex + '&length=5', true);
    xhr.send();
    isDataArrive = false;
  });

app.get('/loadMore', function(req, res) {

  var curIdx = req.query.index;
  var len = req.query.length;
  var data = [];

  for (var i = 0; i < len; i++) {
    data.push('新聞' + (parseInt(curIdx) + i));
  }

  setTimeout(function() {
    res.send(data);
  }, 5000);

});