1： ajax 是什么？有什么作用？
ajax(synchronous JavaScript and XML),是異步的js和xml通過與后臺(tái)服務(wù)器進(jìn)行少量的數(shù)據(jù)交換，從而實(shí)現(xiàn)頁面不重新加載的情況下，對(duì)某部分進(jìn)行更新
2： 前后端開發(fā)聯(lián)調(diào)需要注意哪些事情？后端接口完成前如何 mock 數(shù)據(jù)？
前后端開發(fā)聯(lián)調(diào)需要注意事項(xiàng)：
- 約定數(shù)據(jù)：有哪些需要傳輸?shù)臄?shù)據(jù)，數(shù)據(jù)類型是什么；
- 約定接口：確定接口名稱及請(qǐng)求和響應(yīng)的格式，請(qǐng)求的參數(shù)名稱、響應(yīng)的數(shù)據(jù)格式；
- 根據(jù)這些約定整理成接口文檔
如何mock數(shù)據(jù)： - 可以根據(jù)接口文檔，使用假數(shù)據(jù)來驗(yàn)證我們制作的頁面響應(yīng)和接口是否正常。
- 可以用xampp進(jìn)行模擬
- 也可使用server-mock
3：點(diǎn)擊按鈕，使用 ajax 獲取數(shù)據(jù)，如何在數(shù)據(jù)到來之前防止重復(fù)點(diǎn)擊?
設(shè)置狀態(tài)鎖
var lock=true;
document.querySelector('#btn').addEventListener('click', function(){
if(!lock){
return;
}
ajax({
.......
lock=true;
})
lock=false;
利用ajax異步原理，當(dāng)數(shù)據(jù)未到來時(shí)對(duì)狀態(tài)封鎖，屏蔽用戶的點(diǎn)擊
4：封裝一個(gè) ajax 函數(shù)，能通過如下方式調(diào)用。后端在本地使用server-mock來 mock 數(shù)據(jù)
function ajax(opts){
// todo ...
}
document.querySelector('#btn').addEventListener('click', function(){
ajax({
url: '/login', //接口地址
type: 'get', // 類型， post 或者 get,
data: {
username: 'xiaoming',
password: 'abcd1234'
},
success: function(ret){
console.log(ret); // {status: 0}
},
error: function(){
console.log('出錯(cuò)了')
}
})
});
});
function ajax(opts){
opts.type=opts.type||"get";
opts.datatype=opts.datatype||"json";
opts.data=opts.data||{};
opts.success=opts.success||function(){};
opts.errot=opts.errot||function(){};
var xml=new XMLHttpRequest();
xml.onreadystatechange=function(){
if(xml.readyState===4){
if(xml.status===200||xml.status===304){
if(opts.dataType==="text"){
opts.success(xml.responseText);
}
if(opts.dataType==="json"){
var json=JSON.parse(xml.responseText);
opts.success(json);
}
}else{
opts.error();
}
}
}
var dataStr="";
for(var key in opts.data){
dataStr+=key+"="+opts.data[key]+"&";
}
dataStr=dataStr.substr(0,dataStr.length-1);
if(opts.type.toLowerCase()==="post"){
xml.open(opts.type,opts.url,true);
xml.setRequestHeader("content-type","application/x-www-from-uclencoded");
xml.send(dataStr);
}
if(opts.type.toLowerCase()==="get"){
xml.open(opts.type,opts.url+"?"+dataStr,true);
xml.send();
}
}
5：實(shí)現(xiàn)加載更多的功能，后端在本地使用server-mock來模擬數(shù)據(jù)
<body>
<ul class="ct"></ul>
<input type="button" class="btn" value="加載更多">
<script>
var lock=true;
var pageIndex=0;
$('.btn').addEventListener('click', function(){
if(!lock){
return
}
loadData(function(news){
getMore(news)
pageIndex+=5;
lock=true;
})
lock=false;
})
function loadData(callback){
ajax({
url: '/list', //接口地址
type: 'get', // 類型， post 或者 get,
data: {
index: pageIndex,
length: 5
},
dataType: "json",
success: callback,
error: function(){
console.log('出錯(cuò)了')
}
})
}
function getMore(news){
var box=$(".ct");
var fragment=document.createDocumentFragment();
for(var i=0;i<news.length;i++){
var node=document.createElement("li");
node.innerText=news[i];
fragment.appendChild(node);
}
box.appendChild(fragment);
}
function ajax(opts){
opts.type=opts.type||"get";
opts.datatype=opts.datatype||"json";
opts.data=opts.data||{};
opts.success=opts.success||function(){};
opts.errot=opts.errot||function(){};
var xml=new XMLHttpRequest();
xml.onreadystatechange=function(){
if(xml.readyState===4){
if(xml.status===200||xml.status===304){
if(opts.dataType==="text"){
opts.success(xml.responseText);
}
if(opts.dataType==="json"){
var json=JSON.parse(xml.responseText);
opts.success(json);
}
}else{
opts.error();
}
}
}
var dataStr="";
for(var key in opts.data){
dataStr+=key+"="+opts.data[key]+"&";
}
dataStr=dataStr.substr(0,dataStr.length-1);
if(opts.type.toLowerCase()==="post"){
xml.open(opts.type,opts.url,true);
xml.setRequestHeader("content-type","application/x-www-from-uclencoded");
xml.send(dataStr);
}
if(opts.type.toLowerCase()==="get"){
xml.open(opts.type,opts.url+"?"+dataStr,true);
xml.send();
}
}
function $(id){
return document.querySelector(id);
}
function $$(cls) {
return document.querySelectorAll(cls);
}
</script>
</body>
后臺(tái)模擬數(shù)據(jù)
app.get('/list', function(req, res) {
var index = req.query.index; // 通過 req.query獲取請(qǐng)求參數(shù)
var length= req.query.length;
var arr=[];
for(var i=0;i<length;i++){
arr.push("新聞"+(parseInt(index)+i));
}
res.send(arr);
});
