ajax 是什麼？有什麼作用？

含義：AJAX = Asynchronous JavaScript and XML。ajax不是新的程式語言，而是一種使用現有標準的新方法。

let xhr = new XMLHttpRequest()
xhr.open('POST', '/xxxx')
xhr.onreadystatechange = function(){
    if(xhr.readyState === 4 && xhr.status === 200){
        console.log(xhr.responseText)
    }
}
xhr.send('a=1&b=2')

ajax是一種用於建立快速動態網頁的技術。 通過在後臺與伺服器進行少量資料交換。ajax可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。 而傳統的網頁（不使用ajax）如果需要更新內容，必須過載整個網頁面。

ajax的應用使用支援以上技術的web瀏覽器作為執行平臺。這些瀏覽器 目前包括：Mozilla、Firefox、Internet Explorer、Opera、Konqueror及Safari。但是Opera不支援XSL格式物件，也不支援XSLT。

ajax的優點：

1. 最大的一點是頁面無重新整理，使用者的體驗非常好。
2. 使用非同步方式與伺服器通訊，具有更加迅速的響應能力。
3. 可以把以前一些伺服器負擔的工作轉嫁到客戶端，利用客戶端閒置的能力來處理，減輕伺服器和頻寬的負擔，節約空間和寬頻租用成本。並且減輕伺服器的負擔，ajax的原則是“按需取資料”，可以最大程度的減少冗餘請求，和響應對伺服器造成的負擔。
4. 基於標準化的並被廣泛支援的技術，不需要下載外掛或者小程式。
5. ajax可使因特網應用程式更小、更快，更友好。

ajax的缺點：

1. ajax不支援瀏覽器back按鈕。
2. 安全問題 AJAX暴露了與伺服器互動的細節。
3. 對搜尋引擎的支援比較弱。
4. 破壞了程式的異常機制。
5. 不容易除錯。

前後端開發聯調需要注意哪些事情？後端介面完成前如何 mock 資料？

前後端開發聯調需要注意事項：

• 約定資料：有哪些需要傳輸的資料，資料型別是什麼；
• 約定介面：確定介面名稱及請求和響應的格式，請求的引數名稱、響應的資料格式；根據這些約定整理成介面文件

mock物件就是真實物件在除錯期間的代替品。

後端介面完成前mock資料：

• 可以根據介面文件，使用假資料來驗證我們製作的頁面響應和介面是否正常。
• 可以搭建php本地伺服器用，php寫指令碼提供臨時資料；
• 也可使用使用server-mock來模擬假資料
  • 使用easy-mock
  • 使用rapapi

點選按鈕，使用 ajax 獲取資料，如何在資料到來之前防止重複點選?

//方法一：
document.querySelector("#btn").addEventListener("click",function(){
    var xhr = new XMLHttpRequest()
    xhr.open("GET","xxx",true)
    xhr.addEventListener("load",function(){
            // to do 
        if (xhr.readyState < 4) {
            document.querySelector("#btn").disable = true
        }else{
            document.querySelector("#btn").disable = false
            }        
    })
    xhr.send()
})

//方法二
var lock    //設定鎖
var xhr = new XMLHttpRequest()
document.querySelector("#btn").addEventListener("click",function(){
    
    if(lock){
        return   //當lock為真時退出
    }else{
        lock = true
        xhr.open("GET","xxx",true)
        xhr.send()
        xhr.addEventListener("load",function(){             
            xhr.onreadstatechange = function(){
                if (xhr.readyState === 4 ) {
                    var data = xhr.responseText
                    // to do
                    lock = false  //獲取資料後設定為false
                }
            }                               
        })
    }
})

題目4：

demo

效果範例 。程式碼提交到 github