本教程版权归小圆和饥人谷所有，转载须说明来源
问答
1. ajax 是什么？有什么作用？
Ajax是Asynchronous JavaScript and XML的缩写，这一技术能够向服务器请求额外的数据而无需卸载整个页面，会带来良好的用户体验。
AJAX 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求）从服务器获取数据
这里的异步是指脱离当前浏览器页面的请求、加载等单独执行，这意味着可以在不重新加载整个网页的情况下，通过JavaScript发送请求、接受服务器传来的数据，然后操作DOM将新数据对网页的某部分进行更新，使用Ajax最直观的感受是向服务器获取新数据不需要刷新页面等待了
2. 前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？(npm install -g server-mock)
前后端开发联调：
- 约定数据：有哪些需要传输的数据，数据类型是什么；
- 约定接口：确定接口名称及请求和响应的格式，请求的参数名称、响应的数据格式；
- 根据这些约定整理成接口文档
如何mock数据：
- 本地安装WAMP或者XAMPP本地搭建web服务器，编写php脚本模拟数据
- 使用server-mock模拟数据
3. 点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?
var lock = false;
btn.addEventListener("click",function(){
if(!lock){
lock = true;
ajax(XXXX);
lock = false;
}
});
代码
1. 封装一个 ajax 函数，能通过如下方式调用
function ajax(opts){
//创建XHR对象
var xmlhttp = new XMLHTTPRequest();
xmlhttp.onreadystatechange = function (){
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var json = JSON.parse(xmlhttp.responseText);
opts.success(json);
}
if (xmlhttp.status == 404) {
opts.error();
}
};
//将data里的属性和值转为值名对格式
var dataStr = "";
for (var key in opts.data) {
dataStr += key + "=" + opts.data[key] + "&";
}
dataStr = dataStr.substr(0,dataStr.length-1);
//判断请求方式
if (opts.type.toLowerCase() === 'post') {
xmlhttp.open('post',opts.url,true);
xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xmlhttp.send(dataStr);
}
if (opts.type.toLowerCase() === 'get') {
xmlhttp.open('get',opts.url + '?' + dataStr,true);
xmlhttp.send();
}
}
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); // {status: 0}
},
error: function(){
console.log('出错了');
}
});
});
2. 实现加载更多的功能
加载前
加载后
3. 实现注册表单验证功能
注册失败
注册成功
