问答
1. ajax 是什么？有什么作用？
ajax是异步的 JavaScript 和 XML，是js的一个方法。作用是在不加载整个页面的情况下，与服务器交换数据，更新部分网页的内容。
- 因为是采用异步，所以需要设置一个监听事件的方法：
200表示ok,404表示找不到资源
readyState分0,1,2,3,4总共5个xmlhttpRequest响应的状态。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
请求响应结束后，客户端接收数据xmlhttp.responseText并进行相应处理
2. 前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？(npm install -g server-mock) 知识点视频-如何 mock 数据
注意事项：
1.约定数据（路由）
2.确定好接口：请求和响应
3.确定数据传输类型，调用方式，参数，返回数据
4.如果接口的信息改动需要互相确认改动信息
5.渲染模板由谁来写，最好是前端如何mock数据？
使用server-mock 或者 mock.js
3. 点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?
使用状态锁，因为ajax有几个状态，在点击按钮后，ajax onreadystatechange完成之前之前，开启状态锁，是cilick点击无效。待onreadystatechange执行结束后状态锁关闭
代码
###1. 封装一个 ajax 函数，能通过如下方式调用1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43<script>
function ajax(opts){
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if(xmlhttp.status == 200 && xmlhttp.readyState == 4){
opts.success(JSON.parse(xmlhttp.responseText));
}
if (xmlhttp.readyState == 4 && xmlhttp.status >= 500){
opts.error();
}
}
var dataStr = "";//将ajax的data转化为字符串形式
for(var k in opts.data){
dataStr += k + "=" + opts.data[k] + "&"//拼装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");
xmlhttp.send(dataStr);
};
if (opts.type.toLowerCase() == "get") {
xmlhttp.open(opts.type,opts.url+'?'+dataStr,true);
xmlhttp.send();
};
}//封装ajax
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('出错了')
}
})
});
2 实现如下加载更多
github库连接