題目1： ajax 是什么摧冀？有什么作用索昂？
1.ajax是什么？
Ajax全稱為"Asynchronous JavaScript and XML"(異步JavaScript和XML),是指一種創(chuàng)建交互式網(wǎng)頁應用的網(wǎng)頁開發(fā)技術缤至，是一種在無需重新加載整個網(wǎng)頁的情況下康谆，能夠更新部分網(wǎng)頁的技術。通過在后臺與服務器進行少量數(shù)據(jù)交換月洛，Ajax 可以使網(wǎng)頁實現(xiàn)異步更新孽锥。這意味著可以在不重新加載整個網(wǎng)頁的情況下，對網(wǎng)頁的某部分進行更新唬涧。
2.Ajax = 異步 JavaScript 和 XML（標準通用標記語言的子集）
3.Ajax是一種技術方案,但并不是一種新的編程語言新技術盛撑。它依賴的是現(xiàn)有的CSS/HTML/Javascript撵彻，而其中最核心的依賴是瀏覽器提供的XMLHttpRequest對象实牡，是這個對象使得瀏覽器可以發(fā)出HTTP請求與接受HTTP響應。實現(xiàn)在頁面不刷新的情況下和服務器進行數(shù)據(jù)交互碗短。一句話實現(xiàn)兩者的關系：我們使用XMLHttpRequest對象來發(fā)送一個Ajax請求题涨。2.ajax作用：
傳統(tǒng)的WEB應用程序模型是這樣工作的：用戶的界面操作觸發(fā)HTTP請求总滩，服務器在接收到請求之后進行一些業(yè)務邏輯處理闰渔，如保存數(shù)據(jù)等铐望，然后向客戶端返回一個HTML頁面。但這種方式并沒有給予用戶很好的應用體驗督弓，當服務器在處理數(shù)據(jù)的時候乒验，用戶則處于等待的狀態(tài)，每一步操作都需要等待狂塘，太多的等待會使用戶越來越?jīng)]有耐心虱痕。而Ajax則大不相同部翘，它通過Ajax引擎，使得應用過程很自然新思，操作很流暢，因為其只和服務器交換有用的數(shù)據(jù)纵刘，而頁面顯示等不必要的數(shù)據(jù)則不再重新加載假哎。Ajax引擎其實就是JavaScript鞍历、XML、XMLHttpRequest等等各項技術的綜合應用惧蛹。
通過 Ajax，我們可以使得客戶端得到豐富的應用體驗及交換操作迅腔，而用戶不會感覺到有網(wǎng)頁提交或刷新的過程靠娱，頁面也不需要被重新加載，應用的數(shù)據(jù)交換都被隱藏掺出。-
3.ajax優(yōu)缺點：
- 優(yōu)點：
- 更新數(shù)據(jù)頁面無需刷新苫费，用戶體驗更佳
- 使用異步方式與服務器通信汤锨，響應速度更快
- 可將服務器以前負擔的一些工作轉嫁到客戶端，利用客戶端的閑置能力來處理百框，減輕服務器和帶寬的負擔闲礼，節(jié)約空間和寬帶租用成本。AJAX的原則是“按需取數(shù)據(jù)”铐维，可最大程度減少冗余請求
- 作為基于標準化的并被廣泛支持的技術柬泽，無需下載插件或小程序
- 使因特網(wǎng)應用程序更小、更快嫁蛇、更友好
- 缺點：
- 不支持瀏覽器back按鈕
- AJAX暴露了與服務器交互的細節(jié)帶來安全問題
- 對搜索引擎的支持較弱
- 破壞了程序的異常機制
- 不容易調試
- 優(yōu)點：
題目2： 前后端開發(fā)聯(lián)調需要注意哪些事情锨并？后端接口完成前如何 mock 數(shù)據(jù)？
在開發(fā)之前睬棚，前后端需要協(xié)作商定數(shù)據(jù)和接口的各項細節(jié)，后端負責提供數(shù)據(jù)抑党，前端負責展示數(shù)據(jù)（根據(jù)數(shù)據(jù)負責頁面的開發(fā)）
-
前后端開發(fā)聯(lián)調注意事項：
- URL：接口名稱
- 發(fā)送請求的參數(shù)和格式(get/post)
- 數(shù)據(jù)響應的數(shù)據(jù)格式(數(shù)組/對象)
- 根據(jù)前后端約定包警，整理接口文檔
-
如何mock數(shù)據(jù)
- 搭建web服務器
- 根據(jù)接口文檔仿造假數(shù)據(jù)
- 關聯(lián)前后端文件，開啟web服務器
- 驗證前端頁面功能及顯示是否正確
題目3：點擊按鈕底靠，使用 ajax 獲取數(shù)據(jù)害晦，如何在數(shù)據(jù)到來之前防止重復點擊?
var isLoading = false //添加狀態(tài)鎖,初始為false，用于判斷是否在加載數(shù)據(jù)
btn.addEventListener('click',function(){
if(!isLoading){
return; //如果正在請求數(shù)據(jù)暑中，這次點擊什么都不做
}
var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function(){
if(xhr.readystate === 4){
if(xhr.status >= 200 && xhr.status < 300 || xhr.status === 304){
console.log(xhr.responseText)
}else{
console.log("error")
}
isLoading = false; //readystate = 4數(shù)據(jù)到來壹瘟，狀態(tài)鎖變?yōu)閒alse,可以再次點擊
}
xhr.open('get',url,true);
xhr.send()
isloading = true //數(shù)據(jù)發(fā)送，進入等待數(shù)據(jù)狀態(tài)鳄逾，狀態(tài)鎖變?yōu)閠rue
})
題目4：實現(xiàn)加載更多的功能俐筋，效果范例 。
實現(xiàn)代碼:
Github
本地mock成功:
