题目1: ajax 是什么?有什么作用?
ajax全称Asynchronous Javascript And XML,即创建异步交互的网页应用的一种开发技术,当在网页中涉及到很多数据信息时,往往不是把所有的信息直接写在html页面上,而是通过数据交互从后台获取数据,而传统的表单提交数据需要提交整个网页,有时只是更新页面上很少部分的数据却要刷新整个网页,效率低,用户体验差,因此人们思考通过能否通过局部刷新网页的方式,达到肉眼看起来“无刷新”的效果,这样ajax这种新的技术就被提出来,ajax通过核心对象XMLHttpRequest,用js的方式向服务端提交少量数据,并处理响应,同时不阻塞用户在网页上的其他动作,达到异步刷新,局部更新网页的目的。
题目2: 前后端开发联调需要注意哪些事情?后端接口完成前如何 mock 数据?
确认好分工,角色;约定好接口的参数,格式,数据,接口地址,传递方式,回传数据的内容类型;讨论好接口的实现方式后,由前后台人员确认是否可行,再开始开发;确认接口与html内容整合统一后若页面出现样式或其他问题由谁来解决。
mock数据指的是在后端开发没有完成时,前端可以通过mock方法搭建本地服务器,模拟后台数据来实现数据交互的效果。可以通过安装xampp在本地搭建服务器,也可以安装server-mock,这样不需要特地去写一个后台的处理页面文件来访问数据。
题目3:点击按钮,使用 ajax 获取数据,如何在数据到来之前防止重复点击?
设置状态锁:设置一个变量locked,初始值为false,触发相关事件时为ture,并且设置当locked为true时return。当事件函数里面的ajax执行完之后设置locked为false,这样当ajax请求的数据还没来之前如果重复点击的话,就会直接return出该事件函数,使重复点击无效。
题目4:封装一个 ajax 函数,能通过如下方式调用。后端在本地使用server-mock来 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 tmpArr = [];
for (var key in opts.data) {
tmpArr.push(key + "=" + opts.data[key]);
}
var data = tmpArr.join('&');
if (opts.type.toLowerCase() === 'get') {
xmlhttp.open('get', opts.url + '?' + data);
xmlhttp.send(null);
}
if (opts.type.toLowerCase() === 'post') {
xmlhttp.open('get', opts.url);
xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xmlhttp.send(data);
}
}