1. 題目1: ajax 是什么?有什么作用?
AJAX是對Asynchronous Javascript +XML的簡寫,它的誕生使得向服務(wù)器請求額外的數(shù)據(jù)而不用刷新頁面。它的優(yōu)缺點(diǎn)如下:
優(yōu)點(diǎn):
- 更新數(shù)據(jù)而不需要刷新頁面: 它能在不刷新整個頁面的前提下與服務(wù)器通信維護(hù)數(shù)據(jù),由于ajax是按照需求請求數(shù)據(jù),避免發(fā)送那些沒有改變的數(shù)據(jù)。
- 異步通信: 它與服務(wù)器使用異步的方式通信,不會打斷用戶的操作(卡死頁面)。
- 前后端負(fù)載平衡: 可以將后端服務(wù)器的一些工作轉(zhuǎn)移給客戶端,利用客戶端限制的能力來處理,減輕了服務(wù)器的負(fù)擔(dān)。
- 數(shù)據(jù)與呈現(xiàn)分離: 利于分工,降低前后耦合。
缺點(diǎn):
- 瀏覽器歷史記錄的遺失: 在使用AJAX對頁面進(jìn)行改變后,由于并沒有刷新頁面,沒有改變頁面的訪問歷史,當(dāng)用戶想要回到上一個狀態(tài)時,無法使用瀏覽器提供的后退。
- AJAX的安全問題: AJAX的出現(xiàn)就像建立起了一直通服務(wù)器的另一條通道,容易遭受到一些攻擊。
2. 前后端開發(fā)聯(lián)調(diào)需要注意哪些事情?后端接口完成前如何 mock 數(shù)據(jù)?
確認(rèn)好分工,角色;約定好接口的參數(shù),格式,數(shù)據(jù),接口地址,傳遞方式,回傳數(shù)據(jù)的內(nèi)容類型;討論好接口的實(shí)現(xiàn)方式后,由前后臺人員確認(rèn)是否可行,再開始開發(fā);確認(rèn)接口與html內(nèi)容整合統(tǒng)一后若頁面出現(xiàn)樣式或其他問題由誰來解決。
mock數(shù)據(jù)指的是在后端開發(fā)沒有完成時,前端可以通過mock方法搭建本地服務(wù)器,模擬后臺數(shù)據(jù)來實(shí)現(xiàn)數(shù)據(jù)交互的效果??梢酝ㄟ^安裝xampp在本地搭建服務(wù)器,也可以安裝server-mock,這樣不需要特地去寫一個后臺的處理頁面文件來訪問數(shù)據(jù)。
3. 題目3:點(diǎn)擊按鈕,使用 ajax 獲取數(shù)據(jù),如何在數(shù)據(jù)到來之前防止重復(fù)點(diǎn)擊?
button.onclick = function(){
var req = new XMLHttpRequest()
req.open('GET','/xxx')
var lock = false
if(!lock){
lock = true
req.onreadyStateChange = function(){
if(req.readyState ===4){
lock = false
}
}
req.send()
}
}
4.實(shí)現(xiàn)加載更多的功能,效果范例208,后端在本地使用server-mock來模擬數(shù)據(jù)
代碼里的server.js 需要用 node打開