要努力，然后常在爸爸身邊～

ajax 含義&作用

含義：AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML 通過在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，AJAX 可以使網(wǎng)頁實(shí)現(xiàn)異步更新。這意味著可以在不重新加載整個(gè)網(wǎng)頁的情況下，對網(wǎng)頁的某部分進(jìn)行更新。

作用：實(shí)現(xiàn)網(wǎng)頁的異步加載，局部刷新網(wǎng)頁。當(dāng)在向服務(wù)器獲取新數(shù)據(jù)時(shí)不需要刷新整個(gè)網(wǎng)頁，提高用戶體驗(yàn)。

**優(yōu)點(diǎn): **
異步通信： 它與服務(wù)器使用異步的方式通信，不會(huì)打斷用戶的操作（卡死頁面）。
前后端負(fù)載平衡： 可以將后端服務(wù)器的一些工作轉(zhuǎn)移給客戶端，利用客戶端限制的能力來處理，減輕了服務(wù)器的負(fù)擔(dān)。
數(shù)據(jù)與呈現(xiàn)分離： 利于分工，降低前后耦合。
更新數(shù)據(jù)而不需要刷新頁面： 它能在不刷新整個(gè)頁面的前提下與服務(wù)器通信維護(hù)數(shù)據(jù)，由于ajax是按照需求請求數(shù)據(jù)，避免發(fā)送那些沒有改變的數(shù)據(jù)。

缺陷:
瀏覽器歷史記錄的遺失： 在使用AJAX對頁面進(jìn)行改變后，由于并沒有刷新頁面，沒有改變頁面的訪問歷史，當(dāng)用戶想要回到上一個(gè)狀態(tài)時(shí)，無法使用瀏覽器提供的后退。
AJAX的安全問題： AJAX的出現(xiàn)就像建立起了一直通服務(wù)器的另一條通道，容易遭受到一些攻擊。

前后端開發(fā)聯(lián)調(diào) & 后端接口完成前 mock 數(shù)據(jù)

注意事項(xiàng):

1. 約定數(shù)據(jù)._需要確定需要傳輸?shù)?[數(shù)據(jù)大小等限制] 和 [數(shù)據(jù)類型] !
2. 約定接口._需要統(tǒng)一命名 [接口名稱] 及 [請求的參數(shù)名稱] 和 [響應(yīng)的數(shù)據(jù)格式] 甚至擬定命名表，定制規(guī)范 !
3. 相關(guān)參數(shù)._ 服務(wù)器 & 端口 & 方法 & 請求數(shù)據(jù)的一些限制
4. 再將 [約定] 整理成(接口 / 數(shù)據(jù))文檔.[重要]

** mock 數(shù)據(jù): **

1. 可以自己使用服務(wù)器框架搭建一個(gè)模擬服務(wù)器環(huán)境
   根據(jù)接口文檔.使用假數(shù)據(jù)來驗(yàn)證制作的頁面響應(yīng)和接口是否正常.
2. 可用 express & nodejs
3. 可用 xampp 進(jìn)行模擬
4. 可用 server-mock 模擬(簡單)
5. 可用 postman 在數(shù)據(jù)的模擬傳輸與請求查看

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

<pre>
let AjaxLock = false; //事件觸發(fā)下面代碼 // ******start***** if (!AjaxLock){ AjaxLock = true; xhr.onreadystatechange = function(){ if( xhr.readyState == 4) { //do sth AjaxLock = false; //當(dāng)接受完畢請求數(shù)據(jù)后將鎖打開 } } //ajax配置 xhr.send(); } else { return; }
</pre>

實(shí)現(xiàn)加載 & 后端服務(wù)器加載

<pre>
`
<script>

var btn = document.querySelector('#load-more') //Dom 找到按鈕
var ct = document.querySelector('#ct') //Dom 找到元素節(jié)點(diǎn)
var pageIndex = 0 //初始下標(biāo)
var ajaxLock = false //數(shù)據(jù)鎖 （提高用戶體驗(yàn)&防止多次提交）
btn.addEventListener('click', function(e){ //為按鈕添加點(diǎn)擊事件
e.preventDefault(); //取消a鏈接默認(rèn)事件
if (ajaxLock) { //數(shù)據(jù)鎖為false，通過
return
}
ajaxLock = true; //接著鎖上?。。?！此時(shí)無法狂點(diǎn)
//One-Step. 構(gòu)造函數(shù)初始化一個(gè)XMLHttpRequest對象. 必須在所有其他方法被調(diào)用前調(diào)用構(gòu)造函數(shù)。
var xhr = new XMLHttpRequest()
xhr.open('get', '/loadMore?index='+pageIndex+'&length=5',true) //thr-Step異步請求-請求HTTP方法為：GET；接口名+傳遞參數(shù);
xhr.send() //fou-Step發(fā)送請求
xhr.onreadystatechange = function(){ //Two-Step 監(jiān)聽
if (xhr.readyState === 4){ //整個(gè)請求過程已經(jīng)完畢(4).
if (xhr.status === 200 || xhr.status == 304) { //該請求的響應(yīng)狀態(tài)碼 (例如, 狀態(tài)碼200 表示一個(gè)成功的請求)
var results = JSON.parse(xhr.responseText) //用JSON.parse將響應(yīng)體轉(zhuǎn)換成數(shù)組.
var fragment = document.createDocumentFragment() //Dom創(chuàng)建一文檔片段（最小文檔對象）
for (var i = 0; i<results.length; i++) {
var node = document.createElement('li') //創(chuàng)建li節(jié)點(diǎn)
node.innerText = results[i] //為文本節(jié)點(diǎn)傳入循環(huán)值
fragment.appendChild(node) //添為子元素
}
ct.appendChild(fragment) //同上
pageIndex = pageIndex + 5 //下標(biāo)每次加5，防重復(fù)
ajaxLock = false; //解鎖

  } else {                                                      //報(bào)錯(cuò)
    console.log('Error')
  }
  }         
}

})

</script>
`
</pre>

<pre>
`
app.get('/loadMore', function(req, res) { //固定app.[傳遞類型]+接口名稱 函數(shù)（傳入?yún)?shù)）
var curIdx = req.query.index //通過 req.query獲取請求/傳遞參數(shù).
var len = req.query.length //通過 req.query獲取請求/傳遞參數(shù).
var data = [] //聲明數(shù)組

for(var i=0; i<len; i++) { //遍歷
data.push('序號(hào)：' + (parseInt(curIdx) + i))//循環(huán)推入數(shù)組
}
setTimeout(function(){ //定時(shí)器
res.send(data) //通過 res.query 發(fā)送數(shù)據(jù)
}, 3000) //延遲3秒-（仿延遲）
})
`
</pre>