ajax 是什么？有什么作用？
Ajax（Asynchronus JavaScript And XML）是一種利用XMLHttpRequest對象，實現當對服務器請求額外的數據而無需卸載頁面的技術，可以帶來更好的用戶體驗。能夠以異步的方式從服務器端取得更多信息。
前后端開發聯調需要注意哪些事情？后端接口完成前如何 mock 數據？
約定數據格式
約定接口（類型、名字、參數）
通過server mock實現，如下
app.get('/getFriends', function (req, res) {
var username = req.query.username
var ret = ["nobody"]
if (username == "bb") {
ret = ["小明","小剛"]
}
res.send(ret)
});
app.psot('/getFriends', function (req, res) {
var username = req.body.username
var ret = ["nobody"]
if (username == "bb") {
ret = ["小明","小剛"]
}
res.send(ret)
});
//在當前網頁文件夾下創建router.js,并如上通過get或post方法從URL中獲取請求，再通過send方法返回響應
git 指令
點擊按鈕，使用 ajax 獲取數據，如何在數據到來之前防止重復點擊?
設置狀態鎖
var btn = document.querySelector('.loadingMore a')
var ctn = document.querySelector('#ct')
var target = 0
var dataArrive = true //設置狀態鎖
btn.addEventListener('click',function(){
if(!dataArrive){
return;
} //當判斷是否有狀態鎖
var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status === 200||xhr.status === 304){
var newLi = JSON.parse(xhr.responseText)
console.log(newLi)
var fragment = document.createDocumentFragment()
for(var i=0; i < newLi.length; i++){
var node = document.createElement('li')
node.innerText = newLi[i]
fragment.appendChild(node)
}
ctn.appendChild(fragment)
dataArrive = ture //得到響應，解鎖
}else{
console.log("it's wrong")
}
}
}
xhr.open('get','/loadingMore?index='+target+'&length=5',true)
xhr.send()
target += 5
dataArrive = false //已發送請求，加狀態鎖
})
實現加載更多的功能，后端在本地使用server-mock來模擬數據
- 源代碼
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.loadingMore {
text-align: center;
}
a {
text-decoration: none;
border: 1px solid orangered;
border-radius: 5px;
padding: 10px 20px;
}
a:hover {
background-color: orangered;
color: white;
cursor: pointer;
}
li {
list-style: none;
}
#ct li {
border: 2px solid brown;
border-radius: 4px;
padding: 15px 20px;
margin: 10px 0px;
}
li:hover{
background-color: brown;
color: white;
}
</style>
</head>
<body>
<ul id="ct">
</ul>
<div class="loadingMore">
<a>加載更多</a>
</div>
<script>
var btn = document.querySelector('.loadingMore a')
var ctn = document.querySelector('#ct')
var target = 0
var dataArrive = true
btn.addEventListener('click',function(){
if(!dataArrive){
return;
}
var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status === 200||xhr.status === 304){
var newLi = JSON.parse(xhr.responseText)
console.log(newLi)
var fragment = document.createDocumentFragment()
for(var i=0; i < newLi.length; i++){
var node = document.createElement('li')
node.innerText = newLi[i]
fragment.appendChild(node)
}
ctn.appendChild(fragment)
dataArrive = ture //得到響應，解鎖
}else{
console.log("it's wrong")
}
}
}
xhr.open('get','/loadingMore?index='+target+'&length=5',true)
xhr.send()
target += 5
dataArrive = false //已發送請求，加狀態鎖
})
</script>
</body>
</html>
- 后端server mock 模擬數據
app.get('/loadingMore',function(req,res){
var tgIndex = req.query.index
var tgLength = req.query.length
var data = []
for(var i = 0; i < tgLength; i++){
data.push('新聞'+(parseInt(tgIndex)+ i+1))
}
res.send(data)
})
效果圖
