1.ajax 是什么？有什么作用？
Ajax(Asynchronous JavaScript + XML)是一种创建交互式网页应用的开发技术，利用Ajax可以向服务器请求额外的数据而无须卸载页面，会带来更好的用户体验。
Ajax特点：
- Ajax通过JavaScript发送请求、接受服务器传来的数据，然后操作DOM将新数据对网页的某部分进行更新。
- Ajax的核心是XMLHttpRequest对象
2. 前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？
前后端开发联调需要注意的事情：
-
约定接口数据：包括接口名称,前端需要传的查询数据格式，后台返回的数据格式，请求方式(get/post/...)
-
根据约定生成接口文档
mock数据方式：
使用nodejs搭建服务器，如安装server-mock，在项目所在的根目录创建router.js文件，修改router.js代码，添加方法模拟接收前端请求，并返回数据。
3. 点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?
设置一个状态锁变量，当没有ajax请求前，是解锁状态，默认设为false。当点击触发ajax请求后，设置上锁状态true，直到ajax返回结果后，才能开锁。
var isSending= false;
btn.addEventListener("click",function(){
if(isSending){
return
}
var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function(){
if(xhr.readystate === 4){
if(xhr.readystate === 200||xhr.readystate === 304){
...
}
isSending = false;//状态为4可以解锁
}
}
xhr.open('get','/index?length',true)
xhr.send()
isSending = true; //上锁，禁止在请求完成前发请求
})
实现加载更多的功能，效果范例237，后端在本地使用server-mock来模拟数据
<!doctype html>
<html>
<head>
</head>
<style>
.ct {
width: 800px;
margin: 50px auto;
}
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
ul li {
height: 22px;
padding: 10px;
margin: 10px;
border: 1px solid #777;
cursor: pointer;
}
ul li:hover {
background: yellowgreen;
}
#load-more {
display: block;
width: 80px;
height: 40px;
line-height: 40px;
border: 1px solid #E27272;
border-radius: 5px;
color: #E27272;
text-decoration: none;
text-align: center;
margin: 10px auto;
}
#load-more:hover {
background-color: #E27272;
color: #000;
}
#load-more.disabled {
background-color: #ccc;
color: #777;
border-color: #777;
}
#load-more img {
height: 40px;
width: 40px;
}
</style>
<body>
<div class="ct">
<ul class="content-ct">
<li>测试1</li>
<li>测试2</li>
<li>测试3</li>
</ul>
<a href="javascript:void(0)" id="load-more" data-sending="false">加载更多</a>
</div>
<script>
var btn = document.querySelector('#load-more')
var index = 1;
var length = 5;
btn.addEventListener('click', function() {
var isSending = btn.dataset.sending;
if ('true' === isSending) {
return false;
}
var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && (xhr.status === 200 || xhr.status === 304)) {
var content = JSON.parse(xhr.responseText)
render(content);
index = index + length;
//完成请求后解锁
var isSending = false;
btn.dataset['sending'] = isSending;
loadMoreDisplay(btn.dataset.sending);
}
}
xhr.open('get', '/news?&index=' + index + '&length=' + length, true)
xhr.send()
//设置锁
btn.dataset['sending'] = true;
//设置按钮样式
loadMoreDisplay(btn.dataset.sending)
})
function render(content) {
var ul = document.querySelector('.content-ct');
var df = document.createDocumentFragment();
content.forEach(function(element) {
var li = document.createElement('li');
li.innerText = element;
df.appendChild(li);
});
ul.appendChild(df);
}
function loadMoreDisplay(isSending) {
if ('true' === isSending) {
btn.innerHTML = '';
} else {
btn.innerHTML = '加载更多';
}
}
</script>
</body>
</html>
网友评论