题目1： ajax 是什么？有什么作用？
ajax是一种技术方案，但并不是一种新技术。它依赖的是现有的CSS/HTML/Javascript，而其中最核心的依赖是浏览器提供的XMLHttpRequest对象，是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。
所以我用一句话来总结两者的关系：我们使用XMLHttpRequest对象来发送一个Ajax请求。
作用：实现网页的异步加载，局部刷新网页。当在向服务器获取新数据时不需要刷新整个网页，提高用户体验。
题目2： 前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？
前后端开发联调需要注意事项：
- 约定数据：有哪些需要传输的数据，数据类型是什么；
- 约定接口：确定接口名称及请求和响应的格式，请求的参数名称、响应的数据格式；
- 根据这些约定整理成接口文档
如何mock数据：
- 可以根据接口文档，使用假数据来验证我们制作的页面响应和接口是否正常。
- 可以用xampp进行模拟
- 也可使用server-mock
题目3：点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?
设置一个状态变量来防止重复发送请求
var isDataArrival = true;
btn.addEventListener('click',function (e) {
if (!isDataArrival){
return;
}
if(xhr.readyState === 4){
isDataArrival=true;
}
xhr.open('get',url);
xhr.send();
isDataArrival = false;
});
题目4：实现加载更多的功能，效果范例345，后端在本地使用server-mock来模拟数据
function ajax(opts) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var result = JSON.parse(xmlhttp.responseText) opts.success(result);
}
if(xmlhttp.readyState == 4 && xmlhttp.status == 404) {
opts.error();
}
};
var dataString = ''; for(var key in opts.data) {
dataString += key + '=' + opts.data[key] + '&';
}
dataString = dataString.substring(0, dataString.length - 1);
if(opts.type.toLowerCase() === 'get') {
xmlhttp.open('get', opts.url + '?' + dataString, true); xmlhttp.send();
}
if(opts.type.toLowerCase() === 'post') {
xmlhttp.open('post', opts.url, true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form- urlencoded");
xmlhttp.send(dataString);
}
}
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('出错了')
}
})
});
