一、ajax是什么？有什么作用？

• Ajax即“Asynchronous Javascript And XML”（異步JavaScript和XML），是指一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)。
• Ajax技術(shù)的核心是XMLHttpRequest對象（簡稱XHR）。XHR為向服務(wù)器發(fā)送請求和解析服務(wù)器響應(yīng)提供了流暢的接口，能夠以異步方式從服務(wù)器取得更多信息，意味著用戶單擊后，可以不必刷新頁面也能夠取得新數(shù)據(jù)。也就是說，可以使用XHR對象取得新數(shù)據(jù)，然后通過DOM將新數(shù)據(jù)插入到頁面中。
• 作用:傳統(tǒng)的網(wǎng)頁（不使用 AJAX）如果需要更新內(nèi)容，必須重載整個(gè)網(wǎng)頁頁面。通過在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，Ajax 可以使網(wǎng)頁實(shí)現(xiàn)異步更新。這意味著可以在不重新加載整個(gè)網(wǎng)頁的情況下，對網(wǎng)頁的某部分進(jìn)行更新。

二、前后端開發(fā)聯(lián)調(diào)需要注意哪些事情？后端接口完成前如何mock數(shù)據(jù)？（npm install -g server-mock)

• 前后端開發(fā)聯(lián)調(diào)：真實(shí)業(yè)務(wù)數(shù)據(jù)和本地mock數(shù)據(jù)之間來回切換以達(dá)到前后端分離架構(gòu)下不同開放速度時(shí)數(shù)據(jù)交換的一種方式方法。
• 前后端開發(fā)聯(lián)調(diào)注意事項(xiàng)
  1.應(yīng)各自理解清楚自己的業(yè)務(wù)以及工作量，聯(lián)調(diào)的工作量，評估好時(shí)間。
  2.約定雙方需要傳輸?shù)臄?shù)據(jù)和接口，在接口文檔中確定好參數(shù)的名稱、格式等。
  3.約定好開發(fā)過程中修改部分得溝通方式。
  4.約定發(fā)送請求的參數(shù)、格式和內(nèi)容。
• 前端開發(fā)過程中，使用 mock 數(shù)據(jù)來模擬接口的返回，對開發(fā)的代碼進(jìn)行業(yè)務(wù)邏輯測試。解決開發(fā)過程中對后臺(tái)接口的依賴。
  *mock數(shù)據(jù)的方式：
  • 使用server-mock或mock.js搭建模擬服務(wù)器，進(jìn)行模擬測試。(優(yōu)點(diǎn)：不需要熟練掌握后臺(tái)PHP語音）。步驟：
    1.安裝node.js，呼出cmd命令
    2.選取一個(gè)文件夾，使用npm install -g server -mock進(jìn)行全局安裝
    3.輸入mock start可以啟動(dòng)一個(gè)web服務(wù)器，他們的根目錄就是你選取的文件夾，啟動(dòng)完成之后，web服務(wù)器就可以展示了
    4.瀏覽器輸入localhost：8080 就是你選取的文件夾
    5.使用mock init會(huì)自動(dòng)的在文件夾下生成3個(gè)文件
    6.當(dāng)html使用url對接口進(jìn)行請求，會(huì)被router.js里相同接口接受。
  • 使用XAMPP，編寫PHP文件進(jìn)行測試。
  • postman+json-server，操作方法取材于阮一峰老師的教程阮一峰全棧教程RESTAPI。

三、點(diǎn)擊按鈕，使用ajax獲取數(shù)據(jù)，如何在數(shù)據(jù)到來之前防止重復(fù)點(diǎn)擊？

• 方法一：
  disabled+setTimeout 0，使數(shù)據(jù)到來之前按鈕不能被點(diǎn)擊。例子如下:

var btn = getElementById('btn')
btn.addEventListener('click',function(){
    this.disabled = true;
    ajax();
    setTimeout(this.disabled = false,0);
});

• 方法二：
  設(shè)置標(biāo)記變量flag，初始狀態(tài)設(shè)置為true，在用戶點(diǎn)擊按鈕后，判斷flag是否為true，如果是則發(fā)送ajax請求，并把flag設(shè)置為false。等服務(wù)端給出響應(yīng)后再把flag設(shè)置為true。例子如下：

var flag = true;
var btn = getElementById('btn')
btn.addEventListener('click',function(){
    if(!flag){
        return;
    }
    flag = false;
    ajax({
        ...
        complete:function(){
            flag = true;
        }
    });
})

ajax參考文檔