題目1： ajax 是什么肛真？有什么作用写妥？
- ajax(Asynchronous Javascript +XML)是異步的 JavaScript 和 XML媚污，是指一種創(chuàng)建交互網(wǎng)頁(yè)應(yīng)用的網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)断医，是一種在無(wú)需重新加載整個(gè)網(wǎng)頁(yè)的情況下，能夠更新部分網(wǎng)頁(yè)的技術(shù)债蓝。通過(guò)在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換壳鹤，Ajax可以使網(wǎng)頁(yè)實(shí)現(xiàn)異步更新。這意味著可以在不重新加載整個(gè)頁(yè)面的情況下饰迹，對(duì)網(wǎng)頁(yè)的某部分進(jìn)行更新芳誓。
ajax是一種技術(shù)方案，但并不是一種新技術(shù)啊鸭。它依賴的是現(xiàn)有的CSS/HTML/Javascript锹淌，而其中最核心的依賴是瀏覽器提供的XMLHttpRequest對(duì)象，是這個(gè)對(duì)象使得瀏覽器可以發(fā)出HTTP請(qǐng)求與接收HTTP響應(yīng)赠制。一句話來(lái)總結(jié)兩者的關(guān)系：我們使用XMLHttpRequest對(duì)象來(lái)發(fā)送一個(gè)Ajax請(qǐng)求赂摆。 - 作用： 在不重新加載頁(yè)面的情況下發(fā)送請(qǐng)求給服務(wù)器； 接受并使用從服務(wù)器發(fā)來(lái)的數(shù)據(jù)钟些。
題目2： 前后端開(kāi)發(fā)聯(lián)調(diào)需要注意哪些事情烟号？后端接口完成前如何 mock 數(shù)據(jù)？
在開(kāi)發(fā)之前政恍，前后端需要協(xié)作商定數(shù)據(jù)和接口的各項(xiàng)細(xì)節(jié)汪拥，后端負(fù)責(zé)提供數(shù)據(jù)，前端負(fù)責(zé)展示數(shù)據(jù)（根據(jù)數(shù)據(jù)負(fù)責(zé)頁(yè)面的開(kāi)發(fā)）
- 前后端開(kāi)發(fā)的注意事項(xiàng)
1 URL：接口名稱
2 發(fā)送請(qǐng)求的參數(shù)和格式（get/post）
3 數(shù)據(jù)響應(yīng)的數(shù)據(jù)格式（數(shù)組/對(duì)象）
4 根據(jù)前后端約定抚垃，整理接口文檔 - 如何mock數(shù)據(jù)
1 搭建web服務(wù)器
2 根據(jù)接口文檔仿造假數(shù)據(jù)
3 關(guān)聯(lián)前后端文件，開(kāi)啟web服務(wù)器
4 驗(yàn)證前端頁(yè)面功能及展示是否正確
題目3：點(diǎn)擊按鈕，使用 ajax 獲取數(shù)據(jù)鹤树，如何在數(shù)據(jù)到來(lái)之前防止重復(fù)點(diǎn)擊?
<button id="button">點(diǎn)我</button>
<script>
var isDataArrive = true //默認(rèn)為true
var btn = document.querySelector('#button');
btn.addEventListener('click', function () {
if (!isDataArrive) { //如果數(shù)據(jù)沒(méi)有到來(lái)
return
}
var xhr = new XMLHttpRequest()
xhr.open('GET','/data.json',true)
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200 || xhr.status === 304) {
console.log(JSON.parse(xhr.responseText))
}
isDataArrive = true // 收到響應(yīng)
}
}
xhr.send()
isDataArrive = false //停止再次發(fā)送請(qǐng)求
})
</script>
data.json
{
"name": "jirengu"
"age": 3
}
題目4：實(shí)現(xiàn)加載更多的功能铣焊，效果范例。代碼提交到 github
https://github.com/Haluluyo/task12-demo
