-
关键词:Ajax
Ajax:在不刷新页面的情况下,向服务器发送请求、获取数据,并异步更新网页的某部分!
1. Ajax 是什么?有什么作用?
- Ajax 全称“Asynchronous Javascript And XML”,即:异步的 JavaScript 和 XML。
- Ajax 本质就是一个 XMLHttpRequest 对象,这个对象提供了一些接口:用于向服务器发送请求和解析服务器响应。
- Ajax 就是一种技术,可在不刷新页面的情况下,与服务器交互数据,采用异步方式更新网页的部分内容。
- 采用 Ajax 与服务器交互数据,可使用户拥有较好的体验:运行页面上某个功能时页面不会重新加载,且等待过程中不会影响页面上其他功能的运行。
2. 前后端开发联调需要注意哪些事情?后端接口完成前如何 mock 数据?
前后端在进行开发前,需要协作商定数据和接口的各项细节,后端负责提供数据,前端负责展示数据(根据数据负责页面的开发)。
- 前后端开发联调注意事项
- URL:接口名称
- 发送请求的参数和格式(get/post)
- 数据响应的数据格式(数组/对象)
- 根据前后端约定,整理接口文档
- 如何 mock 数据
- 搭建 web 服务器
- 根据接口文档仿造假数据
- 关联前后端文件,开启 web 服务器
- 验证前端页面功能及显示是否正确
3. 点击按钮,使用 ajax 获取数据,如何在数据到来之前防止重复点击?
- 思路
- 使用状态锁检验此刻是否正在请求数据(是否上锁):是则放弃请求,否则发送请求
- 请求数据之前,解锁状态:“ 发送 Ajax 请求 ” 代码可执行
- 正在请求数据,上锁状态:“ 发送 Ajax 请求 ” 代码被禁用
- 拿到后台数据,解锁状态:“ 发送 Ajax 请求 ” 代码被解禁
- 代码
var btn = document.querySelector('.btn');
var isLoading = false; // 状态锁1:发送请求之前,解锁状态
btn.addEventListener('click', function () {
if(isLoading){
return; // 状态锁0:用于检测是否正在请求数据,是则跳出,否则继续
}
ajax({ // 调用封装的 ajax 函数
method: 'get',
url: '/lockModal',
data: {},
async: 'true',
success: function () {
onSuccess();
isLoading = false; // 状态锁3.1:请求数据已完成(成功拿到数据),解锁状态
},
error: function() {
onError();
isLoading = false; // 状态锁3.2:请求数据已完成(失败拿到数据),解锁状态
}
});
isLoading = true; // 状态锁2:正确请求数据,上锁状态
})
4. 封装一个 ajax 函数,能通过如下方式调用。后端在本地使用server-mock来 mock 数据
- Download
- ajax 调用格式
ajax({
method: '',
url: '',
data: {},
// dataType: '', // 若需要则添加,否则不需添加
asyns: true, // 根据需要可以设置封装函数的默认值为 true
success: function () {},
error: function () {}
})
- ajax 简单封装
function ajax(opts) {
// 三、对数据进行处理
// 3.1、若数据存在,将数据组装成字符串
if(opts.data){
var dataStr = '';
for(var key in opts.data){
dataStr = dataStr + key + '=' + opts.data[key] + '&';
}
opts.data = dataStr.substring(0, dataStr.length-1);
}
// 3.2、将方法处理为小写
opts.method = opts.method.toLowerCase();
// 3.3、若为 get 方法,重新组装 url
if( (opts.method == 'get') && opts.data){
opts.url = opts.url + '?' + opts.data;
}
// 四、开始 AJAX 函数
// 4.1、创建 AJAX 对象
var xhr = new XMLHttpRequest();
// 4.2、规定所需数据格式
xhr.open(opts.method, opts.url, opts.asyns);
// 4.3、发送请求
if(opts.method == 'get'){
xhr.send();
}else if(opts.method == 'post'){
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send(opts.data);
}
// 4.4、检测服务器响应
xhr.onreadystatechange = function () {
if( (xhr.readyState == 4) && (xhr.status == 200) ){
opts.success( JSON.parse(xhr.responseText) );
console.log(opts.method);
}else {
opts.error(); // 此处有待改进,目前到此为止
}
}
}
5. 实现加载更多的功能,后端在本地使用 server-mock 来模拟数据
- 思路
- 编写 HTML 和 CSS 代码
- JS部分:给 ‘加载更多’ 按钮添加事件:当用户点击时,执行下列代码
- 调用封装好的 ajax 函数,将定义好的请求发送给后端
- 在后端 mock 数据,获取前端参数,处理数据,给前端发送数据
- 前端接收并调用数据,将数据展示在页面上
6. 额外实现一个功能:换一批看看,后端自行 mock 数据
- 思路:与第5题思路大致相同
- 代码:穿梭到 github 查看代码