題目1： ajax 是什么？有什么作用？
- 概念：ajax是一種技術的泛稱，它依賴的是現有的CSS/HTML/Javascript，而其中最核心的依賴是瀏覽器提供的XMLHttpRequest對象，是這個對象使得瀏覽器在不刷新頁面的情況下向服務器發出HTTP請求與接收HTTP響應。
- 作用：可以和后端交換數據，不用刷新頁面,用戶體驗好
題目2： 前后端開發聯調需要注意哪些事情？后端接口完成前如何 mock 數據？
- 前后端開發聯調需要注意哪些事情:
- 約定數據: 后端數據寫好,放在模板里,前端可以寫頁面,互不影響
- 約定接口: 請求和響應的格式;接口名稱,請求參數,響應
- 后端接口完成前如何mock數據
mock數據指的是在后端開發沒有完成時，前端可以通過mock方法搭建本地服務器，模擬后臺數據來實現數據交互的效果。
可安裝xampp在本地搭建(php等)服務器，也可以安裝server-mock，這樣不需要特地去寫一個后臺的處理頁面文件來訪問數據。
server-mock步驟： 1.下載node.js
2.命令行下載server-mock npm install -g server-mock --registry=https://registry.npm.taobao.org
3.在終端 cd到你的文件所在的文件夾;mock init 可創建范例文件 4.執行mock start可將當前文件夾路徑作為根目錄啟動一個 web服務器 5.在瀏覽器輸入 http://localhost:8080/xxx.html
題目3：點擊按鈕，使用 ajax 獲取數據，如何在數據到來之前防止重復點擊?
設置一個密碼鎖,在觸發ajax前是鎖定的,之后若重復點擊都不會觸發ajax,直到代碼執行完再解除鎖定.
var flag= true; //目前可以點擊
btn.addEventListener('click',function(){
if(!flag){return}
ajax({
...
flag= true; //加載完成后可以點擊
});
flag= false; //點擊后不可重復點擊
});
題目4：實現加載更多的功能，效果范例327，后端在本地使用server-mock來模擬數據
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="css/loadmore.css">
<title>load-more</title>
</head>
<body>
<ul id="loadBox">
<li>內容1</li>
<li>內容2</li>
</ul>
<button id="btn">加載更多</button>
</body>
<script>
flag = true;//開鎖
var pageindex = 2;
var cfragment = document.createDocumentFragment();
btn.onclick=function () {
if(!flag){return}
this.classList.add("loading");
this.innerText="";
var that = this;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if(xhr.readyState==4){
if(xhr.status==200 ||xhr.status==304){
var res = JSON.parse(xhr.responseText);
for(var i=0;i<res.length;i++){
var cli = document.createElement("li");
cli.innerText = res[i];
cfragment.appendChild(cli)
}
loadBox.appendChild(cfragment);
pageindex+=5;
} else {
alert('系統異常');
}
that.classList.remove("loading");
that.innerText="加載更多";
flag=true;//開鎖
}
};
xhr.open('get','/loadmore?pageindex='+pageindex+'&len=5',true);
xhr.send();
flag = false;//關鎖
}
</script>
</html>
```javascript
//server-mock
router.get('/loadmore',function (req,res) {
var pageindex = req.query.pageindex;
var len = req.query.len;
var result=[];
for(var i =0;i<len;i++){
result[i] ="內容"+ (parseInt(pageindex)+1+i);
}
setTimeout(function () {
res.send(result)
},1000)
})
//css部分
@charset "utf-8";
body {
font-family: "Microsoft YaHei";
}
#loadBox {
padding: 0;
}
#loadBox li {
padding: 10px;
margin-top: 10px;
border: 1px solid #ccc;
list-style: none;
cursor: pointer;
}
#loadBox li:hover {
background: green;
}
#btn {
border: 1px solid #E27272;
width: 80px;
height: 40px;
line-height:38px;
color: #E27272;
cursor: pointer;
margin: 0 auto;
text-align: center;
background-color: #fff;
border-radius: 2px;
display: block;
outline: none;
box-sizing: border-box;
}
.loading {
background: url("../images/loading.gif") no-repeat center center/auto 100% ;
}
效果：
[](https://segmentfault.com/a/1190000004322487 對應的參考文章不錯，可作為資料對 XMLHttpRequest 對象有個更細致的了解
如果對自己代碼有更高要求，可以參考兩個視頻 ajax封裝170和ajax封裝231
想提前學習 HTTP，可以提前做這個這個高級部分的任務，視頻沒權限可以直接用贈送的谷幣購買觀看
https://segmentfault.com/a/1190000004322487)
