1.ajax 是什么？有什么作用？
Asynchronous JavaScript and XML（异步的 JavaScript 和 XML 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
作用：
- 更新数据而不需要刷新页面： 它能在不刷新整个页面的前提下与服务器通信维护数据，由于ajax是按照需求请求数据，避免发送那些没有改变的数据。
- 异步通信： 它与服务器使用异步的方式通信，不会打断用户的操作（卡死页面）。
- 前后端负载平衡： 可以将后端服务器的一些工作转移给客户端，利用客户端限制的能力来处理，减轻了服务器的负担。
- 数据与呈现分离： 利于分工，降低前后耦合。
缺点 - 浏览器历史记录的遗失： 在使用AJAX对页面进行改变后，由于并没有刷新页面，没有改变页面的访问历史，当用户想要回到上一个状态时，无法使用浏览器提供的后退。
- AJAX的安全问题： AJAX的出现就像建立起了一直通服务器的另一条通道，容易遭受到一些攻击
2.前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？
注意事项：
约定数据：有哪些需要传输的数据，数据类型是什么；
约定接口：确定接口名称及请求和响应的格式，请求的参数名称、响应的数据格式；
根据这些约定整理成接口文档
如何mock数据：
1.自己模拟数据来进行MOCK；
2.使用server-mock或mock.js搭建模拟服务器，进行模拟测试；
3.使用XAMPP等工具，编写PHP文件来进行测试。
3.点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?
1.初始化数据是已经响应成功 var isDataArrive = true
2.当刚刚发送请求时，立即将再次发送封锁，防止用户多次点击
xhr.open(type,url ,true);
xhr.send();
isDataArrive = false
btn.addEventListener("click",function(){
if(!isDataArrive){
return;
}
...
}
3.当服务器响应完成，返回数据后，立即设置 isDataArrive = true，这样用户再次点击就可以重新发送请求了
var isDataArrive = true;//1
btn.addEventListener("click",function(){
if(!isDataArrive){
return;
} //3
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status ===200 || xhr.status ===304){
//do something
}else{
//do something
}
isDataArrive = true //4
}
};
xhr.open(type,url ,true);
xhr.send();
isDataArrive = false; //2
})
4.封装一个 ajax 函数，能通过如下方式调用。后端在本地使用server-mock来 mock 数据
function ajax(opts){
opts.success = opts.success || function(){};
opts.error = opts.error || function(){};
opts.type = opts.type || 'get';
opts.dataType = opts.dataType || 'json';
opts.data = opts.data || {};
var dataStr = '';
for(var key in opts.data){
dataStr += key+ '='+opts.data[key] + '&';
}
dataStr = dataStr.substr(0,dataStr.length-1);
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 ){
if(xhr.status === 200 || xhr.status ===304){
if(opts.dataType === 'text'){
opts.success(xhr.responseText)
}
if(opts.dataType === 'json'){
var json =JSON.parse(xhr.responseText);
opts.success(json)
}
}else{
opts.error()
}
}
};
if(opts.type.toLowerCase() === 'get'){
xhr.open(opts.type,opts.url+'?'+dataStr,true);
xhr.send();
}
if(opts.type.toLowerCase() === 'post'){
xhr.open(opts.type,opts.url,true);
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
xhr.send(dataStr)
}
}
5.实现加载更多的功能，效果范例，后端在本地使用server-mock来模拟数据
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>加载更多</title>
<style>
.container {
list-style: none;
margin: 0;
padding: 0;
}
.container li {
border: 1px solid #cccccc;
padding: 10px;
margin-bottom: 10px;
}
.container li:hover{
background: green;
color: #ffffff;
}
#btn{
text-align: center;
text-decoration: none;
color: #e27272;
border: 1px solid #e27272;
border-radius: 3px;
display: block;
margin: 0 auto;
width: 80px;
height: 40px;
line-height: 40px;
}
#btn img{
width: 40px;
height: 40px;
}
</style>
</head>
<body>
<ul class="container">
<li>内容1</li>
<li>内容2</li>
</ul>
<a href="#" id="btn">加载更多</a>
<script>
var btn = document.getElementById("btn");
var ct = document.querySelector(".container");
var idx = 3;
var isDataArr = true;
btn.addEventListener("click",function(e){
e.preventDefault();
if(isDataArr===false){
return;
}
btn.innerHTML = "";
ajax({
url: "/loadMore",
type: "get",
data: {
index: idx,
length: 5
},
success: function(data){
var fragment = document.createDocumentFragment();
for(var i = 0; i < data.length; i++){
var node = document.createElement("li");
node.innerText = data[i];
fragment.appendChild(node);
}
ct.appendChild(fragment);
btn.innerHTML = "加载更多";
idx += 5;
},
error: function(){
console.log("加载失败")
}
});
});
function ajax(opts){
opts.success = opts.success || function(){};
opts.error = opts.error || function(){};
opts.type = opts.type || 'get';
opts.dataType = opts.dataType || 'json';
opts.data = opts.data || {};
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 ){
if(xhr.status === 200 || xhr.status ===304){
if(opts.dataType === 'text'){
opts.success(xhr.responseText)
}
if(opts.dataType === 'json'){
var json =JSON.parse(xhr.responseText);
opts.success(json)
}
}else{
opts.error()
}
}
isDataArr = true;
};
var dataStr = '';
for(var key in opts.data){
dataStr += key+ '='+opts.data[key] + '&';
}
dataStr = dataStr.substr(0,dataStr.length-1);
if(opts.type.toLowerCase() === 'get'){
xhr.open(opts.type,opts.url+'?'+dataStr,true);
xhr.send();
}
if(opts.type.toLowerCase() === 'post'){
xhr.open(opts.type,opts.url,true);
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
xhr.send(dataStr)
}
isDataArr = false;
}
</script>
</body>
</html>
后台代码
app.get('/loadMore', function(req, res){
var curIdx = req.query.index;
var len = req.query.length;
var data = [];
for(var i=0;i<len;i++){
data.push("内容"+(parseInt(curIdx)+i))
}
setTimeout(function(){
res.send(data)
},1000)
});
网友评论