Ajax記述

テーマ1:ajaxとは何ですか.何の役に立つの?
AJAXは、Webページ全体を再ロードすることなく、一部のWebページを更新できる技術です.AJAXは、バックグラウンドでサーバと少量のデータ交換を行うことで、Webページの非同期更新を実現します.これは、ページ全体を再ロードすることなく、ページの一部を更新できることを意味する.
题目2:前后に连调を开発してどれらの事に注意しなければなりませんか?バックエンドインタフェースが完了する前にどのようにmockデータをしますか?
注意事項:1.約定データ:データ型及びサイズ制限2を決定する.約束インタフェース:インタフェースの名前、要求の方法を決定します.データはどうやって?自分でサーバフレームワークを使用してシミュレーションサーバ環境を構築したり、mock-serverを使用してシミュレーションしたりすることができます.
テーマ3:ボタンをクリックしてajaxを使ってデータを取得して、どのようにデータが来る前に重複クリックを防止しますか?

     
var dataArrive = true;
btn.addEventListener("click",function(){
if(!dataArrive){
    return;
}
var xhr = new XMLHttpRequest();
xhr.open();
xhr.send();
var dataArrive = false;
if (xhr.readyState === 4) {
    var dataArrive = true;
 }

});

タイトル4:ajax関数をカプセル化し、次のように呼び出すことができます.バックエンドはローカルでserver-mockを使用してmockデータを使用します

function ajax(opt){
    var xhr = new XMLHttpRequest;
    xhr.onreadystatechange = function(){
      if (xhr.readyState === 4) {
        if (xhr.status === 200||xhr.status === 304) {
          var results = xhr.responseText;
          opt.success(results);
        }else{
          opt.error()
        }
      }
    }
    var query = '?';
    for(key in opt.data){
      query+=key+'='+opt.data[key]+'&'; 
    }
    var query = query.substr(0,query.length-1)
    xhr.open(opt.type,opt.url+query,true)
    xhr.send()
  }
  document.querySelector('#btn').addEventListener('click',function(){
    ajax({
      url: '/login',
      type: 'get',
      data: {
        username: 'xiaoming',
        password: 'abcd1234'
      },
      success: function(ret){
       console.log(ret);
      },
      error: function(){
        console.log('  ！')
      }
    })
  })

//router  :
app.get('/login', function(req, res) {
  var name=req.query.username;
  var pwd=req.query.password;
  var datas;
  if(name ==='xiaoming'&& pwd ==='abcd1234'){
    datas = '    ';
  }else {
    datas = '        ';
  }
  res.send(datas);
});

タイトル5:より多くの機能を搭載
htmlファイル

  

    のロード
  
    var btn = document.querySelector('#load-more');
    var ct = document.querySelector('#ct')
    var curIndex = 0;
    var dataArrive = true;
    btn.addEventListener('click',function(e){
      e.preventDefault()
      if(!dataArrive){
        return;
      }
    loadData(randerPage)
    })
    function loadData(callback){
      var xhr = new XMLHttpRequest()
      xhr.onreadystatechange = function(){
    
      if (xhr.readyState === 4){
        if(xhr.status === 200 ||xhr.status ===304){
          var results = JSON.parse(xhr.responseText)
          console.log(results)  
          callback(results)
          curIndex=curIndex+5
    }else{
      console.log('  ')
    }
    dataArrive = true;
    }
  }
     xhr.open('get','/loadMore?index='+curIndex+'&length=5',true)
     xhr.send()
     dataArrive = false;
    }
    function randerPage(news){
      var fragment = document.createDocumentFragment()
          for(var i = 0;i<news.length;i++){
          var node = document.createElement('li')
          node.innerText = news[i]
          fragment.appendChild(node)
      }
          ct.appendChild(fragment);
    }
  

router部分

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))
  }
    res.send(data);
});