ajax 是什么？有什么作用？
- AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），
是一种技术的泛称，可以在不重新加载整个网页的情况下向服务器请求额外的数据，实现对网页的某部分进行更新，带来良好的用户体验。
AJAX和XMLHttpRequest的关系：
我们使用XMLHttpRequest对象来发送一个Ajax请求。
传统HTTP请求流程大概如下：
- 浏览器向服务器发起请求
- 服务器根据浏览器传递的数据生成responsive
- 服务器将responsive返回给浏览器
- 浏览器刷新整个页面显示最新数据
这些过程是同步的，会顺序执行。
AJAX在浏览器与web服务器之间使用异步数据传输（HTTP请求）从服务器获取数据，这里的异步指脱离当前浏览器页面的请求、加载等单独执行，这意味着可以在不重新加载整个网页的情况下通过JavaScript发送请求、接收服务器传来的数据，操作DOM将更新某部分网页的数据，使用AJAX对用户来说最直观的感受是获取新数据无需刷新页面。
- AJAX优缺点
- 优点：
- 更新数据页面无需刷新，用户体验更佳
- 使用异步方式与服务器通信，响应速度更快
- 可将服务器以前负担的一些工作转嫁到客户端，利用客户端的闲置能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。AJAX的原则是“按需取数据”，可最大程度减少冗余请求
- 作为基于标准化的并被广泛支持的技术，无需下载插件或小程序
- 使因特网应用程序更小、更快、更友好
- 缺点：
- 不支持浏览器back按钮
- AJAX暴露了与服务器交互的细节带来安全问题
- 对搜索引擎的支持较弱
- 破坏了程序的异常机制
- 不容易调试
前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？
在开发之前，前后端需要协作商定数据和接口的各项细节，后端负责提供数据，前端负责展示数据（根据数据负责页面的开发）
-
前后端开发联调注意事项：
- URL：接口名称
- 发送请求的参数和格式(get/post)
- 数据响应的数据格式(数组/对象)
- 根据前后端约定，整理接口文档
-
如何mock数据
- 搭建web服务器
- 根据接口文档仿造假数据
- 关联前后端文件，开启web服务器
- 验证前端页面功能及显示是否正确
点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?
初始时上锁，请求开始时解锁，请求结束时继续上锁，注意代码的执行顺序与书写顺序并不一致，涉及到异步的代码总是后执行，比如下列代码中，ajax部分会先执行open和send和lock=false，后执行onload和onerror
//添加一个状态锁，初始为true，上锁为true，解锁为false
var lock = true
btn.addEventListener('click', function () {
//状态为false时直接return
if (!lock) {
return
}
var xhr = new XMLHttpRequest()
xhr.open('GET', url, true)
xhr.onload = function () {
//状态正确时拿到结果，此次请求结束，上锁
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
console.log(xhr.responseText)
} else {
console.log('error')
}
lock = true
}
xhr.onerror = function () {
console.log('error')
}
xhr.send()
//解锁，这时候请求开始
lock = false
})
封装ajax
function ajax() {
var url = opts.url
var data = opts.data || {}
var type = opts.type || 'GET'
var dataType = opts.dataType || 'json'
var onsuccess = opts.onsuccess || function () { }
var onerror = opts.onerror || function () { }
var dataStr = []
for (var key in data) {
dataStr.push(key + '=' + data[key])
}
dataStr = dataStr.join('&')
if (type === 'GET') {
url += '?' + dataStr
}//get方法将字符串放在url末尾
var xhr = new XMLHttpRequest()
xhr.open(type, url, true)
xhr.onload = function () {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
if (dataType === 'json') {
onsuccess(JSON.parse(xhr.responseText))
} else {
onsuccess(xhr.responseText)
}
} else {
onerror()
}
}
xhr.onerror = onerror
if (type === 'POST') {
xhr.send(dataStr)//post方法将字符串放在send中
} else {
xhr.send()//get的send内容
}
}
ajax({
url: 'http://api.jirengu.com/weather.php',
data: {
city: '北京'
},
onsuccess: function (ret) {
console.log(ret)
},
onerror: function () {
console.log('服务器异常')
}
})
实现加载更多的功能，后端在本地使用server-mock来模拟数据
参考资料
