题目1： ajax 是什么？有什么作用？
AJAX即Asynchronous JavaScript and XML，异步的 JavaScript 和 XML 通过在后台与服务器进行少量数据交换。
AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
题目2： 前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？
注意事项：
- 约定数据：有哪些需要传输的数据，数据类型是什么；
- 约定接口：确定接口名称及请求和响应的格式，请求的参数名称、响应的数据格式。
mock数据：
- 可以使用服务器框架搭建一个模拟服务器环境，比如使用express&nodejs或者使用xampp，更简单的办法是使用server-mock。在数据的模拟传输与请求查看上，postman也是一个好工具。
题目3：点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?
使用状态锁来防止重复点击。
//设置状态锁初始状态
var ajaxIsLock = false;
function ajax(){
//检查状态锁
if(ajaxIsLock){
return;
}
ajaxIsLock = true; //上锁
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200 || xhr.status === 304){
ajaxIsLock = false //解锁
}
}
}
题目4：封装一个 ajax 函数，能通过如下方式调用。后端在本地使用server-mock来 mock 数据
function ajax(opts){
opts.type = opts.type || 'GET';
opts.success = opts.success || function(){};
opts.error = opts.error || function(){};
opts.dataType = opts.dataType || 'json';
opts.data = opts.data || {};
var dataStr = '';
for(var key in opts.data){
dataStr += key + "=" + opts.data[key] + "&";
}
dataStr = dataStr.substr(0, dataStr.length-1);
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200 || xhr.status === 304) {
if (opts.dataType === 'text') {
opts.success(xhr.responseText);
} else if (opts.dataType === 'json') {
var json = JSON.parse(xhr.responseText);
opts.success(json);
}
} else {
opts.error();
}
}
}
if (opts.type.toLowerCase() === "get") {
xhr.open("get", opts.url + "?" + dataStr, true);
xhr.send();
} else if (opts.type.toLowerCase() === "post") {
xhr.open("post", opts.url, true);
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
xhr.send(dataStr);
}
}
document.querySelector('#btn').addEventListener('click', function(){
ajax({
url: '/login', //接口地址
type: 'get', // 类型， post 或者 get,
data: {
username: 'xiaoming',
password: 'abcd1234'
},
dataType: 'text',
success: function(ret){
alert(ret); // {status: 0}
},
error: function(){
console.log('出错了')
}
})
});
