题目1： ajax 是什么？有什么作用？
ajax就是 Asynchronous JavaScript and XML， 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
作用：只刷新局部页面，在向服务器获取数据时不用刷新整个页面，进而提升用户体验。
题目2： 前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？
注意：
- 约定好需要传输的数据和接口，包括请求的类型get/post，请求url，数据的格式等
如何 mock 数据：
- 使用server-mock
题目3：点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?
var isLoading = false //当前要加载的数据的序号
btn.addEventListener('click', function(){
if(isLoading){
return //如果正在请求数据，那这次点击什么都不做
}
ajax('/loadmore', {
idx:xxx
len:xxx
},function(data){
appendData(data)
isLoading = false//数据到来之后 解开
})
isLoading = true//发请求之前做个标记加锁
})
题目4：封装一个 ajax 函数，能通过如下方式调用。后端在本地使用server-mock来 mock 数据
function ajax(opts){
var xhr = new XMLHttpRequest()
var arr = []
xhr.onreadystatechange = function(){
if(xhr.readystate === 4 &&(xhr.status === 200 || xhr.status ===304)){
var result = JSON.parse(xhr.responseText)
return opts.success(result)
}else{
return opts.error()
}
}
for(var key in opts.data){
arr.push(key + '=' + data[key])
str = arr.join('&')
}
if(opts.type.toLowerCase() === 'get'){
xhr.open('get', opts.url + '?' + str, true)
xhr.send()
}
if(opts.type.toLowerCase() === 'post'){
xhr.open('post', opts.url, true)
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(str)
}
}
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('出错了')
}
})
});
