1. ajax 是什么？有什么作用？
AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），通过XMLHttpRequest对象与服务器端脚本进行通信，从而实现以下作用：
（1）向服务器发出请求而不必重新加载页面；
（2）接收和处理服务器中返回的数据；
2. 前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？
接口叫什么？接口名称，统一命名，定制规范，甚至拟定命名表。
接口传什么？数据类型确定，数据大小等限制的确定。
接口的相关参数： 服务器？端口？方法？请求数据的一些限制？
按照上述确认后的版本严格执行
前端可以在本地模拟服务器环境，mock数据请求的响应
3. 点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?
状态锁
var locked = true;
btn.addEventListener("click", function () {
if (!locked) {
return;
}
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
locked = true;
}
}
xhr.open();
xhr.send();
locked = false;
}
其他方法：
只允许同时存在一次提交操作，并且直到本次提交完成才能进行下一次提交。
无限制的提交，但是以最后一次操作为准。
无论提交如何频繁，任意两次有效提交的间隔时间必定会大于或等于某一时间间隔；即以一定频率提交。
任意两次提交的间隔时间，必须大于一个指定时间，才会促成有效提交。
4. 封装一个 ajax 函数，能通过如下方式调用。后端在本地使用server-mock来 mock 数据
function ajax(opt){
var xhr = new XMLHttpRequest;
xhr.onreadystatechange = function(){
if (xhr.readyState === 4) {
if (xhr.status === 200||xhr.status === 304) {
var results = xhr.responseText;
opt.success(results);
}else{
opt.error()
}
}
}
var query = '?';
for(key in opt.data){
query+=key+'='+opt.data[key]+'&';
}
var query = query.substr(0,query.length-1)
xhr.open(opt.type,opt.url+query,true)
xhr.send()
}
document.querySelector('#btn').addEventListener('click',function(){
ajax({
url: '/login',
type: 'get',
data: {
username: 'xiaoming',
password: 'abcd1234'
},
success: function(ret){
console.log(ret);
},
error: function(){
console.log('出错！')
}
})
})
//router部分:
app.get('/login', function(req, res) {
var name=req.query.username;
var pwd=req.query.password;
var datas;
if(name ==='xiaoming'&& pwd ==='abcd1234'){
datas = '登陆成功';
}else {
datas = '用户名或密码错误';
}
res.send(datas);
});