題目1： ajax 是什么？有什么作用？
是一種用于概括異步加載頁面內(nèi)容的技術(shù)，AJAX 可以使網(wǎng)頁實現(xiàn)異步更新。這意味著可以在不重新加載整個網(wǎng)頁的情況下，對網(wǎng)頁的某部分進行更新。
作用：對頁面的請求以異步方式發(fā)送到服務器，而服務器不會用整個頁面來響應請求。
題目2： 前后端開發(fā)聯(lián)調(diào)需要注意哪些事情？后端接口完成前如何 mock 數(shù)據(jù)？
注意：
約定數(shù)據(jù)：約定好頁面需要的數(shù)據(jù)和數(shù)據(jù)類型
約定接口：約定接口的名稱、請求的參數(shù)、相應的格式（成功或失敗分別返回什么）
將約定好的內(nèi)容整理成接口文檔和規(guī)范
后端借口完成前mock數(shù)據(jù)：
使用server-mock，用假數(shù)據(jù)模擬頁面接口是否正確。
題目3：點擊按鈕，使用 ajax 獲取數(shù)據(jù)，如何在數(shù)據(jù)到來之前防止重復點擊?
var btn=document.querySelector("#btn"),
loading=false;
btn.addEventListener('click',function(){
if(loading){
return;
}else{
loading=true; //當loading設置為ture，用戶再次點擊的時候，就會直接return，不會進入ajax;
ajax{
//內(nèi)容...
loading=false; //收到響應后，false賦值給loading，不影響下一次點擊
}
}
});
題目4：封裝一個 ajax 函數(shù)，能通過如下方式調(diào)用。后端在本地使用server-mock來 mock 數(shù)據(jù)
var btn=document.querySelector('#loadmore'),
ct=document.querySelector('#ct')
var pageIndex=0;
var lock=true
btn.addEventListener('click',function(e){
e.preventDefault();
//請求 請求發(fā)送
//加一個狀態(tài)鎖，當這個數(shù)據(jù)沒到來的時候，
if (!lock) {
return; //跳出執(zhí)行
}
loadData(renderPage)
})
function loadData(callback){
ajax({
type:'get',
url:'/loadmore',
data:{
index:pageIndex,
length:5
},
onSuccess:callback,
onError:function(){
alert('出錯了')
}
})
}
function renderPage(news){
var fragment=document.createDocumentFragment()
for(i=0;i<news.length;i++){
var node=document.createElement('li')
node.innerText=news[i]
fragment.appendChild(node);
}
ct.appendChild(fragment)
}
function ajax(options){
var xhr=new XMLHttpRequest()
xhr.onreadystatechange=function(){
if (xhr.readyState===4&& (xhr.status===200 || xhr.status==304)) {
var results=JSON.parse(xhr.responseText)
//要到了數(shù)據(jù)，然后dosomething,下面就是dosomething,也就是拼接字符串，并且放到html,頁面里
options.onSuccess(results)
pageIndex=pageIndex+5
lock=true; //當數(shù)據(jù)來臨完畢的時候，再設為true，下次用戶點擊時正常。
}
}
var query='?'
for(key in options.data){
query+=key+'='+options.data[key]+'&'
}
query=query.substr(0,query.length-1)
xhr.open(options.type,options.url+query,true)
xhr.send()
}
題目5：**實現(xiàn)加載更多的功能，效果范例65，后端在本地使用server-mock來模擬數(shù)據(jù)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>server-mock使用說明</title>
<style>
.container{
width: 900px;
margin: 0 auto;
}
ul,li,p,a {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #000;
}
li {
list-style: none;
border: 1px solid #CCC;
padding: 10px;
margin-bottom: 10px;
text-align: left;
cursor: pointer;
}
li:hover {
background-color: #228C4C;
}
#loadmore {
display: inline-block;
border: 1px solid #E27272;
border-radius: 3px;
padding: 10px;
color: #E27272;
}
.main {
text-align: center;
}
.bcgcolor {
background: #008000;
}
</style>
</head>
<body>
<div class="container">
<div class="main">
<ul id="ct">
</ul>
<a href="#" id="loadmore">加載更多</a>
</div>
<script>
var btn=document.querySelector('#loadmore'),
ct=document.querySelector('#ct')
var pageIndex=0;
var lock=true
btn.addEventListener('click',function(e){
e.preventDefault();
//請求 請求發(fā)送
//加一個狀態(tài)鎖，當這個數(shù)據(jù)沒到來的時候，
if (!lock) {
return; //跳出執(zhí)行
}
loadData(renderPage)
})
/*
var xhr=new XMLHttpRequest()
xhr.onreadystatechange=function(){
if (xhr.readyState===4&& (xhr.status===200 || xhr.status==304)) {
var results=JSON.parse(xhr.responseText)
console.log(results);
//要到了數(shù)據(jù)，然后dosomething,下面就是dosomething,也就是拼接字符串，并且放到html,頁面里
var fragment=document.createDocumentFragment()
for(i=0;i<results.length;i++){
var node=document.createElement('li')
node.innerText=results[i]
fragment.appendChild(node);
}
ct.appendChild(fragment)
pageIndex=pageIndex+5
lock=true; //當數(shù)據(jù)來臨完畢的時候，再設為true，下次用戶點擊時正常。
}
}
xhr.open('get','/loadmore?index='+pageIndex+'&length=5',true)
xhr.send()
lock=false //在等待數(shù)據(jù)的過程中，狀態(tài)是false,return跳出執(zhí)行，那么這樣用戶一直點擊，那么一直就return 跳出執(zhí)行，不會加載
*/
function loadData(callback){
ajax({
type:'get',
url:'/loadmore',
data:{
index:pageIndex,
length:5
},
onSuccess:callback,
onError:function(){
alert('出錯了')
}
})
}
function renderPage(news){
var fragment=document.createDocumentFragment()
for(i=0;i<news.length;i++){
var node=document.createElement('li')
node.innerText=news[i]
fragment.appendChild(node);
}
ct.appendChild(fragment)
}
function ajax(options){
var xhr=new XMLHttpRequest()
xhr.onreadystatechange=function(){
if (xhr.readyState===4&& (xhr.status===200 || xhr.status==304)) {
var results=JSON.parse(xhr.responseText)
//要到了數(shù)據(jù)，然后dosomething,下面就是dosomething,也就是拼接字符串，并且放到html,頁面里
options.onSuccess(results)
pageIndex=pageIndex+5
lock=true; //當數(shù)據(jù)來臨完畢的時候，再設為true，下次用戶點擊時正常。
}
}
var query='?'
for(key in options.data){
query+=key+'='+options.data[key]+'&'
}
query=query.substr(0,query.length-1)
xhr.open(options.type,options.url+query,true)
xhr.send()
}
</script>
</body>
</html>
后端 router.js代碼
/**
* 頁面路由，從模板渲染頁面渲染頁面,
* htttp://localhost:8080/user
* 支持 ejs, jade 模板
*/
app.get('/loadmore', function(req, res) {
var getIndex=req.query.index
var len=req.query.length
var data=[]
for(var i=0;i<len;i++){
data.push('內(nèi)容'+(parseInt(getIndex)+i))
}
res.send(data);
});
Paste_Image.png
