AJAX

• 定義
  Asynchronous JavaScript and XML（異步JS和XML）
  一系列web技術(shù)的集合

• 集合

• 使用CSS和XHTML來(lái)標(biāo)準(zhǔn)化呈現(xiàn)墨坚。

• 使用DOM模型來(lái)交互和動(dòng)態(tài)顯示土榴。

• 使用XML 與 XSLT進(jìn)行數(shù)據(jù)互換和操作技術(shù)课梳，

• 使用 XMLHttpRequest 來(lái)和服務(wù)器進(jìn)行異步通信。（核心接口）（JS對(duì)象）

• 使用javascript來(lái)綁定和調(diào)用。

• 作用
  在瀏覽器和Web服務(wù)器之間使用異步數(shù)據(jù)傳輸
  向服務(wù)器獲取新數(shù)據(jù)不需要刷新頁(yè)面等待扇单，提升用戶體驗(yàn)

• 方法
  .onreadystatechange 給對(duì)象綁定函數(shù)，請(qǐng)求成功時(shí)執(zhí)行
  OPEN xhr.open('請(qǐng)求類(lèi)型 get/post' , '請(qǐng)求路徑 URL' ,是否異步true/false)TIP↓
  GET&POST
  get方式
  1比post方式簡(jiǎn)單速度更快奠旺，但是向服務(wù)器傳送的數(shù)據(jù)不能大于2k蜘澜；
  2向服務(wù)器提交的數(shù)據(jù)會(huì)顯示在瀏覽器的url地址上，安全性較差响疚；
  結(jié)論：做數(shù)據(jù)查詢時(shí)鄙信，建議用Get方式
  post方式
  傳送數(shù)據(jù)量大，安全性高一般用于以下幾種情況：
  1.無(wú)法使用緩存文件（更新服務(wù)器上的文件或數(shù)據(jù)庫(kù)）
  2.向服務(wù)器發(fā)送大量數(shù)據(jù)（POST 沒(méi)有數(shù)據(jù)量限制）
  3.發(fā)送包含未知字符的用戶輸入時(shí)忿晕，POST 比 GET 更穩(wěn)定也更可靠
  4.在做數(shù)據(jù)添加装诡、修改或刪除時(shí)，建議用Post方式
  URL
  1.相對(duì)于當(dāng)前頁(yè)面的路徑践盼，也可以使用絕對(duì)路徑鸦采，
  2.該文件可以是任何類(lèi)型的文件，如.txt .xml宏侍，或腳本文件如 .asp .php;
  3.只能向同一個(gè)域中使用相同協(xié)議和端口的URL發(fā)送請(qǐng)求赖淤，否則會(huì)因?yàn)榘踩驁?bào)錯(cuò)蜀漆。
  .setRequestHeader(請(qǐng)求頭 名,請(qǐng)求頭 值)設(shè)置自定義的請(qǐng)求Header信息
  SEND xhr.send(null（用于get） / string（用于post）); 例↓
  不帶數(shù)據(jù)發(fā)送
  var xhr = XMLHttprequest();
  1→ xhr.open('GET','xxx.php',true); -------->get方式 or
  2→ xhr.open('POST','xxx.php',true);-------->post方式
  xhr.send();

  帶數(shù)據(jù)發(fā)送
     get方式↓
       將要發(fā)送的數(shù)據(jù)變成url地址添加到.open()方法的參數(shù)中谅河，格式：
       url = "發(fā)送地址" + "?數(shù)據(jù)名=" + 數(shù)據(jù)值 + "&數(shù)據(jù)名=" + 數(shù)據(jù)值; 
  
       <input type="text" name="username">
       <input type="password" name="password">
       var username = document.getElementsByName('username')[0].value;
       var password = document.getElementsByName('password')[0].value;
       var url = "xxx.php"+"?username="+username+"&password="+password; 
       var xhr = new XMLHttpRequest(); 
       xhr.open("GET",url,true); 
       xhr.send();
  
     post方式↓
       send(string代表post方式向服務(wù)器發(fā)送的數(shù)據(jù))。
       需要使用 setRequestHeader() 來(lái)添加 HTTP Header信息确丢。
  
       var xhr = new XMLHttpRequest();
       xhr.open("POST","xxx.php",true);
       xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
       xhr.send("name=Alex&age=16");
  

• 屬性
  responseText將響應(yīng)信息 作為字符串返回绷耍。
  responseXML將響應(yīng)信息 格式化為Xml Document對(duì)象并返回
  status ↓返回服務(wù)器狀態(tài)碼 200 404↓
  statusText狀態(tài)碼對(duì)應(yīng)情況 OK Not Found
  readyState請(qǐng)求狀態(tài) 0 1 2 3下載中 4下載完成

• 步驟
  1 創(chuàng)建一個(gè)XMLHttpRequest對(duì)象
  2 給這個(gè)XMLHttpRequest對(duì)象綁定一個(gè)監(jiān)聽(tīng)器，當(dāng)請(qǐng)求成功后鲜侥，執(zhí)行操作褂始。
  3 設(shè)置請(qǐng)求參數(shù)，包括get/post方式描函，url地址崎苗，是否異步狐粱。

  var xmlhttp=new XMLHttpRequest();             ----------->步驟1 創(chuàng)建對(duì)象
  xmlhttp.onreadystatechange=function () {  --------------->步驟2 綁定事件
  
    if(xmlhttp.readyState==4 && xmlhttp.status==200){  // 如果請(qǐng)求狀態(tài)ok，數(shù)據(jù)下載完畢
                                         ------------------->步驟3 執(zhí)行操作
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
                                     --------->//得到非XML響應(yīng)信息胆数，作為字符串返回
    xmlDoc=xmlhttp.responseXML; 
    txt="";        --------------------------->//得到非XML響應(yīng)信息肌蜻，解析響應(yīng) 
    x=xmlDoc.getElementsByTagName("ARTIST");
    for (i=0;i<x.length;i++){
       txt=txt + x[i].childNodes[0].nodeValue + "<br />";
    }
    document.getElementById("myDiv").innerHTML=txt;
    }  
  }    
  xmlhttp.open("get","page.json");-------------------->步驟4 設(shè)置請(qǐng)求參數(shù)，準(zhǔn)備發(fā)送
  xmlhttp.send();------------------------------------->步驟5 發(fā)送請(qǐng)求
  

點(diǎn)擊按鈕必尼，使用 ajax 獲取數(shù)據(jù)蒋搜，如何在數(shù)據(jù)到來(lái)之前防止重復(fù)點(diǎn)擊

• 方案1 設(shè)置開(kāi)關(guān)
  var lock =false; 初始狀態(tài)是 關(guān)
  ele.addEventListener('click',function(){ 給lock綁定點(diǎn)擊事件
  if(!lock){
  lock = true; 點(diǎn)擊lock后狀態(tài)是 開(kāi)
  ajax(); 等待AXJX執(zhí)行完畢
  lock = false; 關(guān)閉lock
  }
  });

• 方案2 禁用按鈕
  btn.addEventListener('click',function(){
  this.disabled=true; 使用button的disabled屬性
  ajax(); 等待AXJX執(zhí)行完畢
  setTimeout(this.disabled=false,0); 延時(shí)打開(kāi)按鈕
  });

• 3.限制一定的時(shí)間內(nèi)重復(fù)提交
  var oBtn=document.querySelector(".button");
  var clockTime=null;
  oBtn.addEventListener("click",function(){
  if(clockTime){
  clearTimeout(clockTime)
  }
  clockTime=setTimeout(function(){
  console.log()
  },5000) //5000毫秒內(nèi)提交一次 重復(fù)點(diǎn)擊重新計(jì)時(shí)
  })

前后端開(kāi)發(fā)聯(lián)調(diào)

• 開(kāi)發(fā)之前雙方定好接口
• 約定好頁(yè)面需要的數(shù)據(jù)和數(shù)據(jù)類(lèi)型
• 約定接口的名稱、請(qǐng)求的參數(shù)判莉、響應(yīng)的格式
• 前端通過(guò)mock方法搭建本地服務(wù)器豆挽，模擬后臺(tái)數(shù)據(jù)實(shí)現(xiàn)數(shù)據(jù)交互效果
  • 使用server-mock或mock.js搭建模擬服務(wù)器，進(jìn)行模擬測(cè)試
  • 使用XAMPP等工具券盅，編寫(xiě)PHP文件進(jìn)行測(cè)試
• 后端發(fā)給前端數(shù)據(jù)之前做好本地測(cè)試
  demo 1

Tip

如何mock(寫(xiě)給負(fù)基礎(chǔ)同學(xué)如我)

1 安裝自帶npm的node what?
1.1 下載 這個(gè)就行
1.2 安裝一路next
1.3 配置環(huán)境變量 how
1.3 完成 右鍵+shift => 此處打開(kāi)命令行窗口 ok
1.4 測(cè)試 node -v/返回版本號(hào) => nmp -v/返回版本號(hào)ok

2 安裝mock-server what?
npm install -g server-mock