1. 题目1: ajax 是什么?有什么作用?
AJAX是对Asynchronous Javascript +XML的简写,它的诞生使得向服务器请求额外的数据而不用刷新页面。它的优缺点如下:
优点:
- 更新数据而不需要刷新页面: 它能在不刷新整个页面的前提下与服务器通信维护数据,由于ajax是按照需求请求数据,避免发送那些没有改变的数据。
- 异步通信: 它与服务器使用异步的方式通信,不会打断用户的操作(卡死页面)。
- 前后端负载平衡: 可以将后端服务器的一些工作转移给客户端,利用客户端限制的能力来处理,减轻了服务器的负担。
- 数据与呈现分离: 利于分工,降低前后耦合。
缺点:
- 浏览器历史记录的遗失: 在使用AJAX对页面进行改变后,由于并没有刷新页面,没有改变页面的访问历史,当用户想要回到上一个状态时,无法使用浏览器提供的后退。
- AJAX的安全问题: AJAX的出现就像建立起了一直通服务器的另一条通道,容易遭受到一些攻击。
2. 前后端开发联调需要注意哪些事情?后端接口完成前如何 mock 数据?
确认好分工,角色;约定好接口的参数,格式,数据,接口地址,传递方式,回传数据的内容类型;讨论好接口的实现方式后,由前后台人员确认是否可行,再开始开发;确认接口与html内容整合统一后若页面出现样式或其他问题由谁来解决。
mock数据指的是在后端开发没有完成时,前端可以通过mock方法搭建本地服务器,模拟后台数据来实现数据交互的效果。可以通过安装xampp在本地搭建服务器,也可以安装server-mock,这样不需要特地去写一个后台的处理页面文件来访问数据。
3. 题目3:点击按钮,使用 ajax 获取数据,如何在数据到来之前防止重复点击?
button.onclick = function(){
var req = new XMLHttpRequest()
req.open('GET','/xxx')
var lock = false
if(!lock){
lock = true
req.onreadyStateChange = function(){
if(req.readyState ===4){
lock = false
}
}
req.send()
}
}
4.实现加载更多的功能,效果范例208,后端在本地使用server-mock来模拟数据
代码里的server.js 需要用 node打开