題目1:ajax 是什么?有什么作用?
- AJAX代表異步JavaScript和XML。簡而言之,它是使用
XMLHttpRequest
對象與服務(wù)器端腳本進(jìn)行通信。它可以發(fā)送以及接收各種格式的信息,包括JSON,XML,HTML,甚至文本文件。 - 向服務(wù)器發(fā)出請求,而不重新加載頁面;接收和處理服務(wù)器中的數(shù)據(jù)
題目2:前后端開發(fā)聯(lián)調(diào)需要注意哪些事情?后端接口完成前如何 mock 數(shù)據(jù)?
接口叫什么?接口名稱,統(tǒng)一命名,定制規(guī)范,甚至擬定命名表。
接口傳什么?數(shù)據(jù)類型確定,數(shù)據(jù)大小等限制的確定。
接口的相關(guān)參數(shù): 服務(wù)器?端口?方法?請求數(shù)據(jù)的一些限制?
按照上述確認(rèn)后的版本嚴(yán)格執(zhí)行
- 前端可以在本地模擬服務(wù)器環(huán)境,mock數(shù)據(jù)請求的響應(yīng)
題目3:點(diǎn)擊按鈕,使用 ajax 獲取數(shù)據(jù),如何在數(shù)據(jù)到來之前防止重復(fù)點(diǎn)擊?
- 在表單submit按鈕點(diǎn)擊后,把按鈕disabled
- 使用外部變量鎖定,用戶提交請求后將flag由true變?yōu)閒alse,當(dāng)響應(yīng)成功后把flag變回true
- 可以多次提交請求,但是以最后一次操作為準(zhǔn),即盡快返回最后一次請求的響應(yīng),前面的請求abort()掉
- 設(shè)置時(shí)間間隔,使任意兩次有效提交的間隔時(shí)間大于等于它
題目4: 封裝一個(gè) ajax 函數(shù),能通過如下方式調(diào)用。后端在本地使用server-mock來 mock 數(shù)據(jù)
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可以獲取請求參數(shù)
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