题目1: ajax 是什么?有什么作用?
AJAX全称是Asynchronous JavaScript and XML,指的是通过Javascript脚本发起HTTP通信;
它可以使用原生的XMLHttpRequest对象向服务器发出HTTP请求,这个请求可以是同步或异步的(一般是异步),建立连接后可以得到服务器的数据,我们就可以利用得到的数据通过JS来更新部分页面而无需对整个页面进行刷新。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新,可以增强用户体验。题目2:前后端开发联调需要注意哪些事情?后端接口完成前如何 mock 数据?
前后端开发联调需要注意:
(1)确定接口信息;有哪些接口,哪些参数,以什么样的请求等,一般要确定详细的接口文档。
(2)确定要填充的数据,哪里填充图片,哪里填充文本信息等。
mock数据指的是在后端开发没有完成时,前端可以通过mock方法搭建本地服务器,模拟后台数据来实现数据交互的效果。
1.自己模拟数据来进行MOCK;
2.使用server-mock或mock.js搭建模拟服务器,进行模拟测试;
3.使用XAMPP等工具,编写PHP文件来进行测试题目3:点击按钮,使用 ajax 获取数据,如何在数据到来之前防止重复点击?
可以加一个状态锁,防止用户重复点击,重复提交ajax,在触发ajax前是锁定的,代码执行完毕后解除锁定
//添加一个状态锁,初始为true,上锁为true,解锁为false
var lock = true;
btn.addEventListener('click', function () {
//状态为false时,直接return
if (!lock) {
return
}
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyStatus === 4) {
//readystate为4时,此次请求结束,上锁
lock = true;
}
}
xhr.open('GET',url);
xhr.send();
//解锁,这时候请求开始
lock = false;
})
- 题目4:实现加载更多的功能