ajax 是什么唬党？有什么作用撩银？
- AJAX的全稱是Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）给涕。
- ajax是一種在無需重新加載整個網(wǎng)頁的情況下，能夠更新部分網(wǎng)頁的技術额获。
- ajax是一種用于創(chuàng)建快速動態(tài)網(wǎng)頁的技術够庙。通過在后臺與服務器進行少量數(shù)據(jù)交換。ajax可以使網(wǎng)頁實現(xiàn)異步更新抄邀。這意味著可以在不重新加載整個網(wǎng)頁的情況下耘眨，對網(wǎng)頁的某部分進行更新。而傳統(tǒng)的網(wǎng)頁（不使用ajax）如果需要更新內(nèi)容境肾，必須重載整個網(wǎng)頁面剔难。
- 可以和后端交換數(shù)據(jù)胆屿，不用刷新頁面
作用
- 最大的一點是頁面無刷新，用戶的體驗非常好偶宫。
- 使用異步方式與服務器通信非迹，具有更加迅速的響應能力。纯趋。
- 可以把以前一些服務器負擔的工作轉(zhuǎn)嫁到客戶端
- 基于標準化的并被廣泛支持的技術憎兽，不需要下載插件或者小程序。
- ajax可使因特網(wǎng)應用程序更小结闸、更快唇兑，更友好。
前后端開發(fā)聯(lián)調(diào)需要注意哪些事情桦锄？后端接口完成前如何 mock 數(shù)據(jù)扎附？
- 需要和后端約定數(shù)據(jù)接口的名稱
- 需要和后端約定數(shù)據(jù)格式是什么
- 約定請求數(shù)據(jù)格式和響應數(shù)據(jù)格式
根據(jù)約定自己設置模擬數(shù)據(jù),然后來完成測試
點擊按鈕，使用 ajax 獲取數(shù)據(jù)结耀，如何在數(shù)據(jù)到來之前防止重復點擊?
設置一個變量作為狀態(tài)鎖,初始的時候打開,發(fā)送完請求后鎖定,接收到響應數(shù)據(jù)后在解鎖
var lock = true;
var btn = document.querySelector('button');
btn.onclick = function () {
if (!lock) return;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
let res = xhr.response;
}
}
lock = true;
}
xhr.open('GET', 'dizhi');
xhr.send();
lock = false;
}
實現(xiàn)加載更多的功能留夜，后端在本地使用server-mock來模擬數(shù)據(jù)
<!doctype html>
<html>
<head>
<style>
body {
max-width: 800px;
margin: auto;
text-align: center;
}
ul,li {
list-style: none;
}
li {
border: 1px solid;
}
</style>
</head>
<body>
<ul class="more">
</ul>
<button>加載更多</button>
<script>
var btn = document.querySelector('button')
var more = document.querySelector('.more')
var lock = true;
var index = 0;
btn.addEventListener('click', function(){
if (!lock) return;
var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if (xhr.status === 200 || xhr.status === 304) {
var res = JSON.parse(xhr.responseText);
var forgment = document.createDocumentFragment();
for (var i = 0; i < res.news.length; i++) {
var node = document.createElement('li');
node.innerText = res.news[i];
forgment.appendChild(node);
}
more.appendChild(forgment);
index = res.index;
lock = true;
}
}
}
xhr.open('get', '/more?index=' + index + '&length=5')
xhr.send()
lock = false;
})
</script>
</body>
</html>
router.get('/more', function(req, res) {
var index = parseInt(req.query.index); // 通過 req.query獲取請求參數(shù)
var length = parseInt(req.query.length);
var news = [];
var start = index * 5;
for (var i = start; i < start + length; i++) {
news.push('新聞' + i);
}
var moreNew = {
'news': news,
'index': ++index
}
res.send(moreNew)
})
