问答部分
一、ajax 是什么？有什么作用？
- ajax(Asynchronous Javascript and XML)~指的是异步的Javascripot和XML，是一种无须刷新整个页面就能为页面中某一部分加载数据的技术
- 作用~通过在后台与服务器进行少量数据交换，可以使网页实现异步更新；这意味着在不重新加载网页的情况下，对网页的某些部分进行更新，会带来更好的用户体验
二、前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？(npm install -g server-mock)
- 联调注意事项：
- 要约定好接口，确认接口名称、接口的参数及返回值
- 要约定好数据，确认数据的传输类型
- Mock数据：
- 根据之前定的接口文档，利用假数据来验证我们所写的页面
- 本地安装XAMPP本地搭建web服务器，编写php来mock数据
- 使用server-mock进行mock数据
三、点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?
- 通过给ajax设置状态锁，如下代码：
var locked =false;//设置状态锁
document.getElementById("btn").addEventListener("click",function(){
if(locked){ //locked为false执行ajax
return;
}
locked = true;//上锁
ajax({
···
locked = false;//解锁
}
})
});
代码部分
一、封装一个 ajax 函数，能通过如下方式调用
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('出错了')
}
})
});
所封装的ajax函数如下：
function ajax(opts){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200){
var json = JSON.parse(xhr.responseText);
opts.success(json);
}
if(xhr.readyState === 4 && 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(opts.type,opts.url + "?" + dataStr,true);
xhr.send();
}
if (opts.type.toLowerCase() === "post"){
xhr.open(opts.type, opts.url,true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(dataStr);
}
}
二、实现如下加载更多的功能！
-
演示如下动图所示：
加载更多 - 代码2
三、实现注册表单验证功能！
-
演示如下动图所示：
表单验证功能 -
代码3
版权声明：本教程版权归邓攀和饥人谷所有，转载须说明来源！！！！
