ajax 是什么？有什么作用？
Ajax是Asynchronous JavaScript and XML的缩写，这一技术能够向服务器请求额外的数据而无需卸载整个页面，会带来良好的用户体验。传统的HTTP请求流程大概是这样的，
- 浏览器向服务器发送请求
- 服务器根据浏览器传来数据生成response
- 服务器把response返回给浏览器
- 浏览器刷新整个页面显示最新数据
- 这个过程是同步的，顺序执行
AJAX 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求）从服务器获取数据
这里的异步是指脱离当前浏览器页面的请求、加载等单独执行，这意味着可以在不重新加载整个网页的情况下，通过JavaScript发送请求、接受服务器传来的数据，然后操作DOM将新数据对网页的某部分进行更新，使用Ajax最直观的感受是向服务器获取新数据不需要刷新页面等待了
前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？
前后端开发联调需要注意事项：
- 约定数据：有哪些需要传输的数据，数据类型是什么；
- 约定接口：确定接口名称及请求和响应的格式，请求的参数名称、响应的数据格式；
- 根据这些约定整理成接口文档
如何mock数据：
- 可以根据接口文档，使用假数据来验证我们制作的页面响应和接口是否正常。
- 也可使用server-mock
点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?
伪代码：
var isLoading= true, //设置一个状态锁
btn = document.qureySelector('#btn');
btn.addEventListener("click",function(){
if(isLoading){ //每次触发点击事件 判断锁状态
isLoading= false; // 更改所状态，防止二次请求
ajax（function(){
isLoading= true; //异步请求处理完成，还原锁状态
});
}
});
封装一个 ajax 函数，能通过如下方式调用。后端在本地使用server-mock来 mock 数据·
<body>
<button id="btn">点我</button>
</body>
<script>
function ajax(opts){
opts.url = opts.url || '';
opts.type = opts.type || 'get';
opts.data = opts.data || null;
opts.dateType = opts.dateType || 'json';
opts.success = opts.success || function(){};
opts.error = opts.error || function(){};
var str = '';
if(opts.data){
for(var key in opts.data){
str += key + '=' + opts.data[key] +'&';
}
}
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
if(opts.dateType == 'text'){
opts.success(xmlhttp.responseText);
}
if(opts.dateType == 'json'){
var json = JSON.parse(xmlhttp.responseText);
opts.success(json);
}else{
opts.error();
}
}
}
xmlhttp.open(opts.type,opts.url,true);
if((opts.type.toLowerCase()) == 'post'){
xmlhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
}
xmlhttp.send(str);
}
document.querySelector('#btn').addEventListener('click', function(){
console.log("-------------");
ajax({
url: 'login', //接口地址
type: 'post', // 类型， post 或者 get,
data: {
username: 'xiaoming',
password: 'abcd1234'
},
success: function(ret){
console.log(ret); // {status: 0}
},
error: function(){
console.log('出错了')
}
})
});
</script>
<style>
ul,li{
margin:0;
padding:0;
list-style: none;
line-height: 1.8;
}
li {
border:1px solid #ccc;
margin-top:10px;
padding:5px 10px;
}
li:hover {
color: white;
background-color: green;
}
#btn {
display: block;
width: 64px;
margin: 10px auto;
color:#E27272;
border: 1px solid #E27272;
text-decoration: none;
padding: 11px 8px;
border-radius: 4px;
}
</style>
</head>
<body>
<ul>
<li class="item">内容1</li>
<li class="item">内容2</li>
</ul>
<a href="#" id="btn">加载更多</a>
</body>
<script>
function ajax(opts){
opts.url = opts.url || '';
opts.type = opts.type || 'get';
opts.data = opts.data || null;
opts.dateType = opts.dateType || 'json';
opts.success = opts.success || function(){};
opts.error = opts.error || function(){};
var str = '';
if(opts.data){
for(var key in opts.data){
str += key + '=' + opts.data[key] +'&';
}
}
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
isLoading = false;
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
if(opts.dateType == 'text'){
opts.success(xmlhttp.responseText);
}
if(opts.dateType == 'json'){
var json = JSON.parse(xmlhttp.responseText);
opts.success(json);
}else{
opts.error();
}
}
isLoading = true;
}
xmlhttp.open(opts.type,opts.url,true);
if((opts.type.toLowerCase()) == 'post'){
xmlhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
}
xmlhttp.send(str);
}
var curIndex = 2;
var len = 5;
var isLoading = true;
var ulElement = document.querySelector('ul');
document.querySelector('#btn').addEventListener('click', function(e){
e.preventDefault(); //防止a链接默认事件
console.log("-------------");
if(!isLoading)
return;
ajax({
url: 'login', //接口地址
type: 'get', // 类型， post 或者 get,
success: function(ret){
var text = ret.msg;
for(var i=0;i<len;i++){
var liElement = document.createElement("li");
curIndex++;
liElement.innerText = text + curIndex;
ulElement.appendChild(liElement);
}
},
error: function(){
console.log('出错了')
}
})
});
</script>
