1.Ajax是什么？有什么作用？
Ajax是一種技術方案，ajax全稱是Asynchrous JavaScript XML的縮寫。
作用：與服務器交換數據并更新部分網頁，在不重新加載整個頁面的情況下，用戶的體驗較好。
2.前后端開發聯調需要注意哪些事情？后端接口完成前如何 mock 數據？
需要和后端約定好
接口叫什么？接口名稱，統一命名，定制規范，甚至擬定命名表。
接口傳什么？數據類型確定，數據大小等限制的確定。
接口的相關參數： 服務器？端口？方法？請求數據的一些限制？
按照上述確認后的版本嚴格執行
后端接口如何 mock數據，
1.自己模擬數據來進行MOCK；
2.使用server-mock或mock.js搭建模擬服務器，進行模擬測試；
3.使用XAMPP等工具，編寫PHP文件來進行測試。
3.點擊按鈕，使用 ajax 獲取數據，如何在數據到來之前防止重復點擊?
當正在發送AJAX，還沒有接受到數據之前，按鈕沒有功能，也就是不發送AJAX。
我們可以做一個變量，來監視Ajax的狀態。。
具體步驟如下，
- 聲明一個變量，至少是Ajax請求的父作用域里面。(例如 isloading=false)
- if (isloading===ture) 什么都不做，返回一個空就可以了。
- if(isloading===false) 發送AJAX，
var isloading=false
if(isloading){
returen;
}else{
isloding=ture
發送Ajax請求。
接受到Ajax請求之后{ isloading=false ; dosomething}
}
4.實現加載更多的功能.
- html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>加載更多</title>
<style type="text/css">
* {
margin:0;
pading:0;
text-align:center;
}
ul {
margin:0px;
padding:0px;
}
#ct li{
border:solid 1px #ccc;
border-radius:5px;
margin:10px;
list-style:none;
padding:20px;
}
button {
color:red;
border:1px solid red;
display:inline-block;
padding:20px;
background:#fff;
}
</style>
</head>
<body>
<ul id="ct">
</ul>
<button type="button">加載更多</button>
<script>
var ct=document.querySelector('#ct');
var btn=document.querySelector('button');
var times=0;
var isloading = false
btn.addEventListener('click',function() {
if (isloading) {
return;
} else{
isloading = true
var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && (xhr.status === 200 || xhr.status === 304)) {
var result = JSON.parse(xhr.responseText)
isloading = false
var d = document.createDocumentFragment()
for (var i = 0; i < result.length; i++) {
var node = document.createElement('li')
node.innerText = result[i]
d.appendChild(node)
}
ct.appendChild(d)
times += 5
}
}
xhr.open('get','/addnews?index='+times+'&length=5',true)
xhr.send()
}
})
</script>
</body>
</html>
sever mock
router.get('/addnews',function(req,res){
var index = req.query.index;
var length = req.query.length;
var b=[]
for(var i=0;i<length;i++){
b[i]='新聞'+(parseInt(index)+i);
}
setTimeout((function(){
res.send(b)
}),5000)
})// 做了一個延時
