什么是Ajax
Ajax是Asynchronous JavaScript and XML的简称,译为异步的JavaScript和XML。
在以前,每当浏览器发送一个请求,服务器会做出响应,返回一个完整的新页面。如果网络太慢或者其他原因,就会得到一个404的页面,用户体验太差。
Ajax是一种请求数据的方法,它会采用异步的方式发送请求和处理响应,局部更新页面需要被改变的地方,不会刷新整个页面,使用户可以继续在当前页面工作浏览而不必等待响应。
优缺点:
1.用户可以向服务器请求多项内容而不必等待响应,可以继续浏览页面;
2.浏览器请求返回的速度更快;
3.页面只有需要被改变的地方得到更新,而不必刷新整个页面;
4.由于Ajax暴露了和服务器的通讯方式,容易受到攻击。
前后端开发联调需要注意哪些事情?后端接口完成前如何 mock 数据?
前后端联调:
1.约定传输的数据,数据格式,类型;
2.约定接口,请求格式、响应格式等;
3.根据各种约定、编写约定文档。
如何mokc数据
根据约定,使用server-mock来模拟数据。还有很多不同的mock工具,目的都是为了搭建一个虚拟服务器,对数据进行mock。
点击按钮,使用 ajax 获取数据,如何在数据到来之前防止重复点击?
1.数据到达且渲染到页面前,disabled掉按钮,让用户无法重复点击;
var btn = document.querySelector("#btn");
btn.addEventListener("click",function() {
btn.disabled = true;
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
//do something
btn.disabled = false;
}
request.open();
request.send();
})
2.使用一个状态锁,如果状态锁为true,则发送请求,否则忽略用户点击
var lock = true;
var btn = document.querySelector("#btn")
btn.addEventListener("click",function() {
if(!lock) {
return;
}
var request = new XMLHttpRequest()
request.onreadystatechange = function() {
//do something
lock = true;
}
request.open()
request.send()
lock = false;
})