1. ajax 是什么?有什么作用?
-
AJAX即“Asynchronous JavaScript and XML”(异步的JavaScript与XML技术),指的是一套综合了多项技术的浏览器端网页开发技术。
- AJAX可以使用页面不刷新更新数据,AJAX应用可以仅向服务器发送并取回必须的数据,并在客户端采用JavaScript处理来自服务器的回应。因为在服务器和浏览器之间交换的数据大量减少,服务器回应更快了。同时,很多的处理工作可以在发出请求的客户端机器上完成,因此Web服务器的负荷也减少了。
2. 前后端开发联调需要注意哪些事情?后端接口完成前如何 mock 数据?
- 前后端联调需要注意一下几点:
- 约定前后端联调的时间。
- 约定双方需要传输的数据和接口,在接口文档中确定好参数的名称、格式等。
- 约定请求和响应的格式和内容。
- 可以使用server-mock模拟后端数据。
- 安装node.js,使用npm install -g server -mock安装server-mock
- 创建一个文件,如果是windows使用git-bash,如果是苹果系统使用终端打开这个文件,使用mock start 启动一个web服务器,会显示这个服务器地址,例如:localhost:8080
- 打开localhost:8080就是你创建的这个文件
- 使用终端输入:mock init 会在动在你创建的文件下面生成3个文件。
- 当html使用url对接口进行请求,会被router.js里相同的接口接受
3. 点击按钮,使用 ajax 获取数据,如何在数据到来之前防止重复点击?
- 可以声明一个变量处理是否可以再次发送请求的一个状态。
var btn = document.querySelector('.query-area button')
var input = document.querySelector('.query-area input')
var isArrive = true;
btn.addEventListener('click', function () {
if (!isArrive) {return};
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
isArrive = true;
if (xhr.status === 200 || xhr.status === 304) {
var result = JSON.parse(xhr.responseText);
render(result);
}
}
}
xhr.open('get', '/getFriends?username=' + input.value, true)
xhr.send()
isArrive =false;
})
4. 实现加载更多的功能,后端在本地使用server-mock来模拟数据
加载更多ajax.html
加载更多router.js