题目1：
ajax 是什么？有什么作用？
含义：脚本发起HTTP通信
作用：传输数据到服务器，监听状态码实现服务器返回结果，在整个网页中，数据的发送响应过程中不会影响网页其他位置的操作，这个过程实现了异步操作，节省用户表单验证时间，提高用户体验。
优点：
（1）无刷新更新数据。
AJAX最大优点就是能在不刷新整个页面的前提下与服务器通信维护数据。这使得Web应用程序更为迅捷地响应用户交互，并避免了在网络上发送那些没有改变的信息，减少用户等待时间，带来非常好的用户体验。
（2）异步与服务器通信。
AJAX使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。优化了Browser和Server之间的沟通，减少不必要的数据传输、时间及降低网络上数据流量。
（3）前端和后端负载平衡。
AJAX可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，AJAX的原则是“按需取数据”，可以最大程度的减少冗余请求和响应对服务器造成的负担，提升站点性能。
（4）基于标准被广泛支持。
AJAX基于标准化的并被广泛支持的技术，不需要下载浏览器插件或者小程序，但需要客户允许JavaScript在浏览器上执行。随着Ajax的成熟，一些简化Ajax使用方法的程序库也相继问世。同样，也出现了另一种辅助程序设计的技术，为那些不支持JavaScript的用户提供替代功能。
（5）界面与应用分离。
Ajax使WEB中的界面与应用分离（也可以说是数据与呈现分离），有利于分工合作、减少非技术人员对页面的修改造成的WEB应用程序错误、提高效率、也更加适用于现在的发布系统。
题目2：
前后端开发联调需要注意哪些事情？
（1），发生方式 ：是get还是post，后端用同样的方式接收发送过来的数据
（2），统一接口
（3），前端发送什么数据格式给后端
后端接口完成前如何 mock 数据？
使用server-mock模拟前后端数据传输
//后端router.js文件
app.get(function(req,res){})
统一好接口和发生方式，后端router.js获取前端发生过来的数据保存到req里面
var date1=req.query.xx
查询到变量xx的数据复制给date1,date1就是我们获取到的前端发生过来的xx的数据
获取到前端发送全部数据后，进行某些操作
如：
if(date1===1){
//返回数据到客户端
send(2);
}
前端通过ajax的 var arriDate=XMLHttpResqust.responseText
arriDate就保存着后端返回的数据
题目3：
点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?
添加一个状态锁，记住当前上次数据是否成功响应，如果没有成功响应，return空
var dateArrive=true;
//监听按钮单击状态
Obtn.addEventListener("click",function(){
if(!dateArrive){
return;
}
//调用ajax函数
loadDate(function(news){
render(news);
pageindex=pageindex+5;
//还原状态，不锁定
dateArrive=true;
});
//锁定状态
dateArrive=false;
})
题目4：
封装一个 ajax 函数，能通过如下方式调用。后端在本地使用server-mock来 mock 数据
index.html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div{
text-align: center;
}
#btn{
padding: 6px 10px;
margin-top: 20px;
}
#btn:hover{
background: darkcyan;
}
</style>
</head>
<body>
<div>
<button id="btn" href="javascript:void(0);">登录</button>
</div>
<script>
var Obtn=document.querySelector("#btn");
function loadDate(render){
var obj={
url: '/login', //接口地址
type: 'get', // 类型， post 或者 get,
datas: {
username: 'xiaoming',
passw: 'abcd1234'
},
success: render,
onerror: function(){
console.log('出错了')
}
}
ajax(obj);
}
function render(ret){
console.log(ret,"欢迎您");
}
//ajax请求响应数据
function ajax(obj){
var xhr=new XMLHttpRequest();
var str=obj.url+'?';
for (key in obj.datas) {
str+=key+'='+obj.datas[key]+'&';
}
str=str.substr(0,str.length-1);
xhr.open(obj.type,str,true);
xhr.onreadystatechange=function(){
if(xhr.readyState===4){
if(xhr.status===200||xhr.status===304){
var result=xhr.responseText;
obj.success(result);
}else{
obj.onerror;
}
}
}
xhr.send();
}
//监听按钮单击状态
Obtn.addEventListener("click",function(){
//调用ajax函数
loadDate(function(news){
render(news);
});
})
</script>
</body>
</html>
router.js文件
app.get('/login',function(req,res){
var username=req.query.username;
var passw=req.query.passw;
var dates;
if(username==='xiaoming'&&passw==='abcd1234') {
dates="xiaoming";
}else{
dates="用户名或密码不正确...";
}
res.send(dates);
})
数据mock成功
