1.ajax 是什么？有什么作用？
- AJAX = Asynchronous JavaScript and XML：异步的 JavaScript 和 XML
- 实现网页的异步加载，局部刷新网页。当在向服务器获取新数据时不需要刷新整个网页，提高用户体验。
2.前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？
- 注意事项
- 约定数据：有哪些需要传输的数据，数据类型是什么
- 约定接口：确定接口名称及请求和响应的格式，请求的参数名称、响应的数据格式
- server-mock
3.点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?
- 创建一个变量作为状态锁（标志位），初始为true，发送后置为false，若为false直接return
var AjaxLocking = true;
//点击事件监听函数
xxx.addEventListener('clock',function(){
if(!AjaxLocking){
return;
}
xhr.onreadystatechange = function(){ //事件
if(xhr.readyState === 4){
//...
AjaxLocking = true;
}
}
xhr.open()
xhr.send()
AjaxLocking = false;
})
4.封装一个 ajax 函数，能通过如下方式调用。后端在本地使用server-mock来 mock 数据
function ajax(opts){
opts.success = opts.success || function () {};
opts.error = opts.error || function () {};
opts.type = opts.type || 'get';
opts.dataType = opts.dataType || {};
opts.data = opts.data || {};
var dataStr = '';
for (var key in opts.data)
{
dataStr += key + '=' + opts.data[key] + '&';
}
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200 || xmlhttp.status == 304) {
if (opts.dataType === 'text') {
opts.success(xmlhttp.responseText);
}
if (opts.dataType === 'json') {
var json = JSON.parse(xmlhttp.responseText);
opts.success(json);
}
} else {
opts.error();
}
}
};
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");
xmlhttp.send(dataStr);
}
if (opts.type.toLowerCase() === 'get')
{
xmlhttp.open(opts.type, opts.url + '?' + dataStr, true);
xmlhttp.send();
}
}
5.实现加载更多的功能，效果范例107，后端在本地使用server-mock来模拟数据
GitHub
