问题：
1. Ajax 是什么？有什么作用？
- Ajax是Asynchronous JavaScript and XML的缩写，即异步的JavaScript和XML。
这一技术能够向服务器请求额外的数据，而不卸载整个页面，带来良好的用户体验。
HTTP请求流程简单来说是这样的：
- 浏览器向服务器发送请求；
- 服务器接收请求并生成response；
- 服务器将response返回给浏览器；
- 浏览器刷新整个页面来显示新的数据；
整个请求流程是同步的，顺序执行的。
而Ajax是异步执行的，就是脱离当前的页面请求、加载等单独执行，通过JavaScript单独发送请求，获得服务器返回的新数据，通过操作DOM改变页面局部内容，而不会重新加载整个页面，带来良好的用户体验。
ajax工作流程
- get || post:
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
2. 前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？(npm install -g server-mock)
- 注意事项：
- 约定好接口文档，包括请求类型get/post，和请求url，以及其他内容的格式；
- 约定好返回数据的格式，便于前端使用数据；
- 如何mock数据：
- 安装nodejs，在系统终端中输入npm install -g server-mock安装mock：
- mock init 初始化数据，mock start开始；
- index.html为静态页面，router.js为后端接口文件，user.ejs为静态页面分隔的模板文件。
3. 点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?
- 状态锁：定义一个布尔值变量，当发起请求时，打开状态锁，使ajax回调函数重复事件跳出，当请求发出并且返回执行时，再叫状态锁解开。需要注意的是声名的变量不要与其他代码冲突：
var requestLock = 0; // 默认是解锁状态
function ajax() {
if(requestLock ===1) {
return;
} else {
requestLock = 1; // 上锁
// ajax...
function success() {
...
lock = 0; // 解锁
}
function error() {
...
lock = 0; // 解锁
}
}
}
- 定时器：用setTimeout，让ajax请求在多少毫秒后发出，中间只要重复点击就清空定时器，以最后一次点击事件为准
- 禁用按钮：disabled，当请求发起的时候禁用掉按钮，当请求成功的时候按钮才能继续使用
代码：
1. 封装一个 ajax 函数，能通过如下方式调用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>task24-1</title>
</head>
<body>
<button id="btn" type="button">请点击</button>
<div id="myDiv"></div>
<script>
function ajax(opts) {
var xmlhttp;
if(window.XMLHttpRequest) { //IE7+,chrome,Safari,Opera,Firefox
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new AcitveXObject("Microsoft.XMLHTTP"); //IE5,IE6
}
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();
}
}
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') {
xmlhttp.open(opts.type, opts.url + '?' + dataStr, true);
xmlhttp.send();
}
if(opts.type.toLowerCase() === 'post') {
xmlhttp.open(opts.type, opts.url, true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send(dataStr);
}
}
document.querySelector('#btn').addEventListener('click', function() {
ajax({
type: 'get', // 类型，post或者get
url: 'getData.php', // 接口地址
data: {
username: 'xiaoming',
password: 'abcd1234'
},
success: function(ret) {
console.log(ret);
var myDiv = document.querySelector('#myDiv');
myDiv.innerText = '用户名：' + ret.username + '\|' + '密码：' + ret.password; // {status: 0}
},
error: function() {
console.log('出错了');
}
});
});
</script>
</body>
</html>
2. 实现如下加载更多的功能
3. 实现注册表单验证功能
本文归本人和饥人谷所有，如需转载请注明来源，谢谢
