题目1： ajax 是什么？有什么作用？
是一种用于概括异步加载页面内容的技术，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
作用：对页面的请求以异步方式发送到服务器，而服务器不会用整个页面来响应请求。
题目2： 前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？
注意：
约定数据：约定好页面需要的数据和数据类型
约定接口：约定接口的名称、请求的参数、相应的格式（成功或失败分别返回什么）
将约定好的内容整理成接口文档和规范
后端借口完成前mock数据：
使用server-mock，用假数据模拟页面接口是否正确。
题目3：点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?
var btn=document.querySelector("#btn"),
loading=false;
btn.addEventListener('click',function(){
if(loading){
return;
}else{
loading=true; //当loading设置为ture，用户再次点击的时候，就会直接return，不会进入ajax;
ajax{
//内容...
loading=false; //收到响应后，false赋值给loading，不影响下一次点击
}
}
});
题目4：封装一个 ajax 函数，能通过如下方式调用。后端在本地使用server-mock来 mock 数据
var btn=document.querySelector('#loadmore'),
ct=document.querySelector('#ct')
var pageIndex=0;
var lock=true
btn.addEventListener('click',function(e){
e.preventDefault();
//请求 请求发送
//加一个状态锁，当这个数据没到来的时候，
if (!lock) {
return; //跳出执行
}
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)
//要到了数据，然后dosomething,下面就是dosomething,也就是拼接字符串，并且放到html,页面里
options.onSuccess(results)
pageIndex=pageIndex+5
lock=true; //当数据来临完毕的时候，再设为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：**实现加载更多的功能，效果范例65，后端在本地使用server-mock来模拟数据
<!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();
//请求 请求发送
//加一个状态锁，当这个数据没到来的时候，
if (!lock) {
return; //跳出执行
}
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);
//要到了数据，然后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; //当数据来临完毕的时候，再设为true，下次用户点击时正常。
}
}
xhr.open('get','/loadmore?index='+pageIndex+'&length=5',true)
xhr.send()
lock=false //在等待数据的过程中，状态是false,return跳出执行，那么这样用户一直点击，那么一直就return 跳出执行，不会加载
*/
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)
//要到了数据，然后dosomething,下面就是dosomething,也就是拼接字符串，并且放到html,页面里
options.onSuccess(results)
pageIndex=pageIndex+5
lock=true; //当数据来临完毕的时候，再设为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('内容'+(parseInt(getIndex)+i))
}
res.send(data);
});
Paste_Image.png
