- ajax 是什么？有什么作用？
- ajax是Asynchronous JavaScript + XML的简写。是一项能够向服务器请求额外的数据而无须重新加载页面的技术。
- 前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？(npm install -g server-mock) 知识点视频-如何 mock 数据
- 注意事项：
1 约定数据格式。
1 根据功能制定前后端接口，约定参数和返回值。
2 根据接口构建Mock Server工程及其部署。
3 前后端独立开发，前端向Mock Server发送请求，获取模拟的数据进行开发和测试。
4 前后端都完成后，前后端连接调试
- Mock Server可以部署在本地，也可以部署到远程服务器。
1 把Mock Server工程部署到一个远程远程服务器上，前端开发的时候向该服务器发请求。
2 把Mock Server克隆到本地，开发的时候，开启前端工程服务器和Mock Server，所有的请求都发向本地服务器，获取到Mock数据。
- 点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?
- 设置一个变量flag用来判断按钮的点击状态，当用户点击按钮时flag变量被赋值为点击状态，直到ajax完成后flag变量被重新赋值为未点击状态，可再进行点击。
var flag = 0;//未点击状态
el.addEventListener('click', function(){
if (flag) { return; }
flag = 1;//点击状态
ajax({
//代码。。。
succss:function() {
flag = 0;//ajax处理完毕重新赋值为点击状态
//代码。。。
}
error:function() {
flag = 0;//ajax处理完毕重新赋值为点击状态
//代码。。。
}
//代码。。。
})
})
代码
function ajax(opts){
var xmlhttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {//执行四次握手，2000为成功
var json = JSON.parse(xmlhttp.responseText);//解析返回的数据
opts.success(json);
}
if (xmlhttp.readyState == 4 && xmlhttp.status == 404) {//四次握手后才进行404判断，不会出现多次请求
opts.error();
}
}
var dataStr = '';
for (var key in opts.data) {
dataStr += key + '=' + opts.data[key] + '&';//遍历data用&分隔
}
dataStr = dataStr.substr(0, dataStr.length - 1);//去掉最后一位的&
if (opts.type.toLowerCase() == 'post') {
xmlhttp.open(opts.type, opts.url, true);
xmlhttp.setRequestHeader('Content-type' , 'application/x-www-form-urlencoded');//post增加头部识别格式
xmlhttp.send(dataStr);
}
if (opts.type.toLowerCase() == 'get') {
xmlhttp.open(opts.type, 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} dealwith(ret)
},
error: function(){
console.log('出错了')
}
})//ajax函数，括号内的为参数
});
