问答
1.ajax 是什么？有什么作用？
AJAX = Asynchronous JavaScript and XML，是可以异步和服务器交换数据，可以不重新加载整个页面的情况下，对网页的部分进行重新加载。
2.前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？(npm install -g server-mock)
- 约定数据传输接口
- 约定接口的类型和参数
下载nodejs在终端运行server-mock运行，根据约定好的接口格式进行测试
3.点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?
<script type="text/javascript">
//设置0或1的状态，来作为状态锁。
//在flag为0的时候，表示点击按钮会有响应。当状态为1的时候，表示正在响应中，多次点击无效。
var flag = 0;
el.addEventListener('click', function() {
if(flag === 1) return;
flag = 1; //将状态锁打开，再执行响应代码
//响应代码⬇️
ajax({
//to do
success: function() {
flag = 0; //在响应完之后保证状态回归到0，不影响下次响应
// to do
},
error: function() {
flag = 0; //在响应完之后保证状态回归到0，不影响下次响应
//to do
},
//to do
})
//to do
})
</script>
代码
1.封装一个 ajax 函数，能通过如下方式调用
<script type="text/javascript">
function ajax(opts) {
// todo ...
}
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('出错了')
}
})
});
</script>
//答
<script type="text/javascript">
function ajax(opt) {
var xml = new XMLHttpRequest();
xml.onreadystatechange = function() {
if(xml.readyState == 4 && xml.status == 200) {
var json = JSON.parse(xml.responseText);
xml.success(json);
}
if(xml.status == 404 && xml.readyState == 4) {
xml.error();
}
}
var sendmsg = '';
for(var key in opt.data) {
sendmsg += key + '=' + opt.data[key] + '&';
}
sendmsg = sendmsg.substr(0, sendmsg.length - 1);
if(opt.type.toLowerCase() == 'post'){
xml.open(opt.type, opt.url, true)
xml.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xml.send(sendmsg);
}
if(opt.type.toLowerCase() == 'get'){
xml.open(opt.type, opt.url+'?'+sendmsg, true);
xml.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('出错了')
}
})
});
</script>
2.实现如下加载更多的功能。
效果如下： http://jrgzuoye.applinzi.com/作业安排/jscode/JS9-jqueryajax/1.html
3.实现注册表单验证功能
效果如下：http://jrgzuoye.applinzi.com/作业安排/jscode/JS7-ajax/3.html
答： http://book.jirengu.com/jirengu-inc/jrg-renwu5/彭耀慷/task24-ajax/register/task24-3.html
