1. ajax 是什么？有什么作用？
Ajax(Asynchronous JavaScript + XML)是一種創建交互式網頁應用的開發技術，利用Ajax可以向服務器請求額外的數據而無須卸載頁面，會帶來更好的用戶體驗。通過在后臺與服務器進行少量數據交換，AJAX 可以使網頁實現異步更新。這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。而傳統的網頁（不使用 AJAX）如果需要更新內容，必需重載整個網頁面。
Ajax特點：
- Ajax通過JavaScript發送請求、接受服務器傳來的數據，然后操作DOM將新數據對網頁的某部分進行更新。
- Ajax的核心是XMLHttpRequest對象
2. 前后端開發聯調需要注意哪些事情？后端接口完成前如何 mock 數據？
- 約定數據：需要傳遞哪些數據，數據的類型是什么；
- 約定接口：確定接口的名稱以及請求和響應的格式，請求的參數名稱、響應的數據格式。
- 根據這些約定整理成接口文檔根據接口文檔模擬后端使用的數據，模擬假的數據來測試接口是否可以正常使用。
server-mock可以模擬后端，來和前端進行數據交互。
- 安裝node.js， 在git bash里面輸入npm install -g server-mock安裝server-mock。
- 在終端cd找到文件所在的文件夾
- 在當前文件夾創建router.js，該文件是接收處理后端請求的文件（可認為是網站的后端），或者mock init可創建范例文件，再根據自己的需求修改
- 執行mock strat可將當前文件夾路徑作為根目錄啟動web服務器
- 在瀏覽器輸入http://localhost:8080/xxx.html, 如果xxx.html是index.html可以不用寫，因為默認打開的就是它。
3. 點擊按鈕，使用 ajax 獲取數據，如何在數據到來之前防止重復點擊?
通過對數據是否接受完畢的狀態來進行判斷，當數據接收完畢時則允許下一次請求，否則不處理用戶點擊按鈕的事件；狀態鎖初始狀態為true，當用戶點擊按鈕時開始請求數據，并將狀態鎖置為false，表示當前正在請求數據，此時再去點擊按鈕時，點擊事件不會被處理也就不會再去發送數據請求，當數據接收完畢后，將狀態鎖置為true，此時用戶可繼續點擊按鈕請求數據。
var isDataArrive = true;//聲明狀態鎖，默認打開
btn.addEventListener("click",function(){
if (!isDataArrive) {
return;//如果正在請求數據，那這次點擊什么都不做
}
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if (xhr.readystate === 4) {
if (xhr.readystate === 200||xhr.readystate ===304) {
//dosomething
}
isDataArrive = true;//拿到數據，打開鎖
}
}
xhr.open('get','/index?length',true)
xhr.send()
isDataArrive = false;//上鎖，禁止在請求完成前發請求
})
</script>
4. 實現加載更多的功能，效果范例，后端在本地使用server-mock來模擬數據
前端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul,li{
padding: 0;
margin: 0;
list-style: none;
}
#ct li{
border: 1px solid #ccc;
padding: 10px;
margin-top: 10px;
}
.btn{
width: 80px;
height: 40px;
margin: 20px auto;
padding: 10px auto;
border: 1px solid #E27272;
border-radius: 2px;
text-align: center;
text-decoration: none;
color: #E27272;
display: block;
line-height: 36px;
}
.btn:hover{
background-color: green;
color: white;
}
</style>
</head>
<body>
<ul id="ct">
</ul>
<a href="javascript:void(0)" id="load-more" class="btn">加載更多</a>
<script>
var btn = document.querySelector('#load-more');
var ct = document.querySelector('#ct');
var pageIndex = 0;
var isDataArrive = true;
btn.addEventListener('click',function(){
if (!isDataArrive) {
return;
}
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if (xhr.readyState === 4) {
if (xhr.status === 200||xhr.status === 304){
var results = JSON.parse(xhr.responseText)
var fragment = document.createDocumentFragment()
for (var i = 0; i < results.length; i++) {
var node = document.createElement('li');
node.innerText = results[i];
fragment.appendChild(node);
}
ct.appendChild(fragment);
pageIndex += 5;
}else{
console.log('It's wrong!)
}
isDataArrive = false;
}
}
xhr.open('get','/load-more?index=' + pageIndex + '$length = 7',true)
xhr.send()
isDataArrive = true
})
</script>
</body>
</html>
服務器端
app.get('/load-more',function(req,res){
var idx = req.query.index;
var len = req.query.length;
var data = [];
for(var i = 0;i < len;i++){
data.push('new'+(parseInt(idx)+i))
}
setTimeout(function(){
res.send(data);
},1000)
});
