进阶12-ajax、server-mock的使用
2017-10-02 本文已影响0人
我七
-
题目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：实现加载更多的功能
