题目1：ajax 是什么？有什么作用？
- AJAX代表异步JavaScript和XML。简而言之，它是使用
XMLHttpRequest对象与服务器端脚本进行通信。它可以发送以及接收各种格式的信息，包括JSON，XML，HTML，甚至文本文件。 - 向服务器发出请求，而不重新加载页面；接收和处理服务器中的数据
题目2：前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？
接口叫什么？接口名称，统一命名，定制规范，甚至拟定命名表。
接口传什么？数据类型确定，数据大小等限制的确定。
接口的相关参数： 服务器？端口？方法？请求数据的一些限制？
按照上述确认后的版本严格执行
- 前端可以在本地模拟服务器环境，mock数据请求的响应
题目3：点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?
- 在表单submit按钮点击后，把按钮disabled
- 使用外部变量锁定，用户提交请求后将flag由true变为false，当响应成功后把flag变回true
- 可以多次提交请求，但是以最后一次操作为准，即尽快返回最后一次请求的响应，前面的请求abort()掉
- 设置时间间隔，使任意两次有效提交的间隔时间大于等于它
题目4： 封装一个 ajax 函数，能通过如下方式调用。后端在本地使用server-mock来 mock 数据
function ajax(opts){
var httpRequest = new XMLHttpRequest()
httpRequest.onreadystatechange = alertContents
function alertContents() {
if(httpRequest.readyState === XMLHttpRequest.DONE) {
if(httpRequest.status === 200) {
var response = JSON.parse(httpRequest.responseText)
opts.success(response)
} else {
opts.error()
}
}
}
var query = ''
for(var key in opts.data) {
query += key + '=' + opts.data[key] + '&'
}
query = query.substr(0, query.length-1)
if(opts.type.toLowerCase() === 'get') {
httpRequest.open(opts.type, opts.url+'?'+query, true)
httpRequest.send()
}
if(opts.type.toLowerCase() === 'post') {
httpRequest.open(opts.type, opts.url, true)
httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
httpRequest.send(query)
}
}
work_ajax.png
题目5：
var btn = document.getElementById('load-more')
var ct = document.getElementById('ct')
var start = 6
var len = 5
var isDataArrive = true
btn.addEventListener('click',function(e) {
e.preventDefault()
if(!isDataArrive) {
return
}
ajax({
url: '/load',
type: 'get',
data: {
curIdx: start,
length: len
},
success: function(res){
var data = res.data
console.log(data)
render(data)
isDataArrive = true
//btn.classList.remove('loading')
},
error: function(res) {
console.log(res.status)
}
})
isDataArrive = false
//btn.classList.add('loading')
})
function render(data) {
var fragment = document.createDocumentFragment()
var text = ''
for(var i=0;i<data.length;i++) {
var li = document.createElement('li')
li.innerText = '列表'+data[i]
fragment.appendChild(li)
}
ct.appendChild(fragment)
start += len
}
function ajax(opts){
var httpRequest = new XMLHttpRequest()
httpRequest.onreadystatechange = alertContents
function alertContents() {
if(httpRequest.readyState === XMLHttpRequest.DONE) {
if(httpRequest.status === 200) {
var response = JSON.parse(httpRequest.responseText)
opts.success(response)
} else {
opts.error(response)
}
}
}
var query = ''
for(var key in opts.data) {
query += key + '=' + opts.data[key] + '&'
}
query = query.substr(0, query.length-1)
if(opts.type.toLowerCase() === 'get') {
httpRequest.open(opts.type, opts.url+'?'+query, true)
httpRequest.send()
}
if(opts.type.toLowerCase() === 'post') {
httpRequest.open(opts.type, opts.url, true)
httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
httpRequest.send(query)
}
}
//router.js
/*
* url: '/load'
* reqPara: {start:1, len:5}
* resPara: {status:1, data:[1,2,3,4,5]}
*/
app.get('/load', function(req, res) {
//req.query可以获取请求参数
var curIdx = req.query.curIdx
var len = req.query.length
var data = []
for(var i=0;i<len;i++) {
data.push((parseInt(curIdx)+i))
}
res.send({
status: 1,
data: data
})
})
ajax9.png
