1. ajax是什么？有什么作用？
Ajax是Asynchronous JavaScript and XML的缩写，这一技术能够向服务器请求额外的数据而无需卸载整个页面，会带来良好的用户体验。
- 传统的HTTP请求
1. 浏览器向服务器发送请求
2. 服务器根据浏览器传来数据生成response
3. 服务器把response返回给浏览器
4. 浏览器刷新整个页面显示最新数据
这个过程是同步的，顺序执行
- Ajax请求
AJAX 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求）从服务器获取数据.。这里的异步是指脱离当前浏览器页面的请求、加载等单独执行，这意味着可以在不重新加载整个网页的情况下，通过JavaScript发送请求、接受服务器传来的数据，然后操作DOM将新数据对网页的某部分进行更新，使用Ajax最直观的感受是向服务器获取新数据不需要刷新页面等待了
2. 前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？
- 前后端开发联调需要注意哪些事情
1. 约定数据：约定好页面需要的数据和数据类型
2. 约定接口：
(1)约定接口的名称。
(2)约定请求的参数。
(3)约定响应的的格式，比如：成功后返回什么数据，响应失败返回什么内容。
3. 将约定好的东西整理成接口文档和规范
- 如何mock数据：
1. 安装xampp套件，html代码向php程序发送请求，php程序返回响应的数据给html文件，html代码再处理这些数据。
2. 在node package manager下载安装基于node的应用比如mork-server,在本地创建服务器
3. 自己用node创建一个本地服务器。
3. 点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?
- 方法1
<input type="button" value="点击" disabled="disabled">
<input type="button" value="点击" disabled=true>
<script>
ele.addEventListener('click',function(){
this.disabled=true;
ajax();
setTimeout(this.disabled=false,0);
})
</script>
- 方法二
<script>
// 设置一个开关，初始状态是false，发生点击事件后，开关状态置为true，直到ajax请求完成后，开关状态才会被重新置为false。
var lock = false;
ele.addEventListener('click',function(){
if(lock){
return;
}else{
lock =true;
ajax();
lock=false;
}
})
</script>
4. 封装一个 ajax 函数，能通过如下方式调用
<scirpt>
function ajax(opts){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200||xhr.status == 304){
var results = JSON.parse(xhr.responseText);
opts.success(results);
}
if(xhr.status == 404){
opts.error();
}
}
var dataStr ='';
for(var key in opts.data){
dataStr+ = key+'='+opts.data[key]+'&';
}
dataStr = dataStr.substr(0,dataStr.length-1);
if(opt.type.toLowerCase()==='get'){
xhr.open('get',opts.url+'?'+dataStr,true);
xhr.send();
}
if(opt.type.toLowerCase()==='post'){
xhr.open('post',opts.url,true);
xhr.sendRequestHeader('Content-type','application/x-www-form-urlencoded');
xhr.send(dataStr);
}
};
document.querySelector('#btn').addEventListener('click',function(){
ajax({
url:'getData.php', //接口地址
type:'get', //类型 ：post||get
data:{
username:'xiaoming',
password:'abcd1234'
},
success:function(ret){
console.log(ret);
},
error:function(){
console.log('出错了')
}
})
})
</scirpt>
//后端
app.get('/usermeeage',function(req,res){
var username = req.query.username;
var password = req.query.password;
var ret = {};
ret.username =username;
ret.password =password;
ret = JSON.stringify(ret);
res.send(ret);
})
5.实现加载更多的功能，后端在本地使用server-mock来模拟数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul,li{
margin:0px;
padding:0px;
}
#ct li{
list-style: none;
border: 1px solid #ccc;
padding:10px;
margin-top: 10px;
cursor:pointer;
}
#load-more{
display: block;
margin: 10px auto;
text-align: center;
cursor: pointer;
height: 40px;
line-height: 40px;
width: 80px;
border-radius:3px;
border:1px solid #E27272;
text-decoration:none;
color: #E27272;
}
.btn:hover{
background: green;
color: #fff;
}
li:hover{
background:red;
}
</style>
</head>
<body>
<ul id="ct">
</ul>
<a id="load-more" class="btn" href="#">加载更多</a>
</body>
<script>
var ct = document.querySelector('#ct');
var btn = document.querySelector('#load-more');
var num = 1 // 加载数据的序号
var len = 3 // 加载数据的个数
var locking = true //状态锁 ，判断是否在加载数据
btn.addEventListener('click',function(e){
e.preventDefault();
if(!locking){
return;
}else{
ajax({
url:'loadMore',
type:'get',
data:{
start:num,
length:len
},
success:function(json){
dealwith(json);
},
error:function(){
onError();
}
})
}
});
//http请求
function ajax(opts){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status ===200 || xhr.status ===304){
var json =JSON.parse(xhr.responseText)
opts.success(json)
}
if(xhr.status === 404){
opts.error();
}
}
//转换字符串
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('get',opts.url+'?'+dataStr,true)
xhr.send();
locking = false;
}
if(opts.type.toLowerCase() === 'post'){
xhr.open('post',opts.url,true)
xhr.sendRequestHeader('Content-type','application/x-www-form-urlencoded')
xhr.send('dataStr')
locking = false;
}
}
function dealwith(json){
for(var i =0 ; i<json.length;i++){
var newLi = document.createElement('li');
newLi.innerText = json[i]
ct.appendChild(newLi)
}
num += 3;
locking = true
}
function onError(){
alert('出错了')
}
</script>
</html>
//后端
app.get('/loadMore',function(req,res){
var num = req.query.start;
var len = req.query.length;
var json =[];
for(var i =0 ;i< len;i++){
json.push('内容'+(parseInt(num)+i))
}
setTimeout(function(){
res.send(json);
},4000)
})
网友评论