ajax(より多くのロードを実現)

テーマ1:ajaxとは何ですか.何の役に立つの?

ajaxは非同期javascriptとxml

です.

1利点

ウェブページの非同期ロードを実現し、

ローカルリフレッシュページ(他のいくつかのリクエスト方式でローカル更新できないものと比較)

前後端負荷バランス:バックエンドサーバのいくつかの作業をクライアントに移行することができ、クライアント制限の能力を利用して処理し、サーバの負担を軽減する

.

2欠点:

ブラウザ履歴の紛失:AJAXを使用してページを変更した後、ページをリフレッシュしていないため、ページのアクセス履歴は変更されず、ユーザーが前の状態に戻りたい場合、ブラウザが提供した後退は使用できません.

题目2:前后に连调を开発してどれらの事に注意しなければなりませんか?バックエンドインタフェースが完了する前にどのようにmockデータをしますか?

インタフェースの名前は何ですか?インタフェース名、統一ネーミング、カスタム仕様、ネーミングテーブルの作成も行います.

インタフェースは何を伝えますか?データ型決定

インタフェースの関連パラメータ:いったいサーバに何を伝えたいのですか?要求データの制限はありますか?

フロントエンドのスタッフは、express&nodejsを使用するかxamppを使用するなど、サーバフレームワークを使用してシミュレーションサーバ環境を構築することができ、より簡単な方法はserver-mockを使用することである.データのシミュレーション転送とリクエスト表示ではpostmanも良いツールです.

テーマ3:ボタンをクリックしてajaxを使ってデータを取得して、どのようにデータが来る前に重複クリックを防止しますか?

let AjaxLock = false;
if (!AjaxLock){
    AjaxLock = true;
    xhr.onreadystatechange = function(){
        if( xhr.readyState == 4) {
            //do sth
            AjaxLock = false; 
            //              
        }
    }
    xhr.send();
} else {
    return;
}

テーマ4:より多くの機能をロードすることを実現し、効果例228、バックエンドはローカルでserver-mockを使用してデータをシミュレートする

index.html

  
  
  


  

      
  1
      
  2
  
  

      のロード
  

// ajax     
function ajax(obj){
  var xhr=new XMLHttpRequest();
  xhr.onreadystatechange=function(){
    if (xhr.readyState == 4 && xhr.status == 200) {
      var json=JSON.parse(xhr.responseText); 
            obj.success(json);//            
        }
        if (xhr.readyState == 4 && xhr.status == 404) {
            obj.error();
        }
  }
  function params(data){
    var arr=[];
    for(var i in data){
      arr.push(i+'='+data[i]);
    }
    return arr.join('&');
  }
  var data=params(obj.data);//  url       ，             
  if (obj.type.toLocaleLowerCase()==='get') {
    xhr.open(obj.type,obj.url+'?'+data,true);
    xhr.send();
  }
  if (obj.type.toLocaleLowerCase()==='post') {
    xhr.open(obj.type,obj.url,true);
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    xhr.send(data);
  }
}
var ctLi = document.querySelector('.ct-li'),
  flag=true;
document.querySelector('.btn').addEventListener('click', function() {
  var li=ctLi.children;
      if(!flag){
        return;
    }else{
      flag=false
        ajax({//       
        url: '/getMore', 
        type: 'get', 
        data: {
           start: li.length, //       ，            
           len: 6 
        },
        success: function(ret) {
          addContent(ret);//         html           
          flag=true
        },
        error: function() {
            console.log('   ');
        }
    });
   }
    });
 function addContent(ret){
   for (var i = 0; i < ret.data.length; i++) {
        var newLi = document.createElement('li');
            newLi.innerText=ret.data[i];
            ctLi.appendChild(newLi);
      }//            html       
 }

route.js

app.get('/getMore', function(req, res) {
    var start=parseInt(req.query.start),
        len=req.query.len;
    var data=[];
    for (var i = 1; i < len; i++) {
        data.push('  '+(start+i))

    }
    res.send({
        data: data
    });
});