問答部分

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

• ajax(Asynchronous Javascript and XML)~指的是異步的Javascripot和XML，是一種無須刷新整個頁面就能為頁面中某一部分加載數據的技術
• 作用~通過在后臺與服務器進行少量數據交換，可以使網頁實現異步更新；這意味著在不重新加載網頁的情況下，對網頁的某些部分進行更新，會帶來更好的用戶體驗

二、前后端開發聯調需要注意哪些事情？后端接口完成前如何 mock 數據？(npm install -g server-mock)

• 聯調注意事項：
  • 要約定好接口，確認接口名稱、接口的參數及返回值
  • 要約定好數據，確認數據的傳輸類型
• Mock數據：
  • 根據之前定的接口文檔，利用假數據來驗證我們所寫的頁面
  • 本地安裝XAMPP本地搭建web服務器，編寫php來mock數據
  • 使用server-mock進行mock數據

三、點擊按鈕，使用 ajax 獲取數據，如何在數據到來之前防止重復點擊?

• 通過給ajax設置狀態鎖，如下代碼：

var locked =false;//設置狀態鎖
document.getElementById("btn").addEventListener("click",function(){
    if(locked){    //locked為false執行ajax
            return;
        }
    locked = true;//上鎖
    ajax({
        ···
        locked = false;//解鎖
        }
    })
});

代碼部分

一、封裝一個 ajax 函數，能通過如下方式調用

function ajax(opts){
    // todo ...
}
document.querySelector('#btn').addEventListener('click', function(){
    ajax({
        url: 'getData.php',   //接口地址
        type: 'get',               // 類型， post 或者 get,
        data: {
            username: 'xiaoming',
            password: 'abcd1234'
        },
        success: function(ret){
            console.log(ret);       // {status: 0}
        },
        error: function(){
            console.log('出錯了')
        }
    })
});

所封裝的ajax函數如下：

    function ajax(opts){
            var xhr = new XMLHttpRequest(); 
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4 && xhr.status === 200){
                    var json = JSON.parse(xhr.responseText);
                    opts.success(json);
                }
                if(xhr.readyState === 4 && xhr.status === 404){
                    opts.error();
                }
            }
            var dataStr="";
            for (var key in opts.data){
                dataStr += key + "=" + opts.data[key] + "&";
            }
            dataStr = dataStr.substr(0, dataStr.length-1);
            if (opts.type.toLowerCase() === "get"){
                xhr.open(opts.type,opts.url + "?" + dataStr,true);
                xhr.send();
            }
            if (opts.type.toLowerCase() === "post"){
                xhr.open(opts.type, opts.url,true);
                xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                xhr.send(dataStr);
            }
        }

二、實現如下加載更多的功能！

• 演示如下動圖所示：
  
  加載更多
• 代碼2

三、實現注冊表單驗證功能！

• 演示如下動圖所示：
  
  表單驗證功能
• 代碼3
  版權聲明：本教程版權歸鄧攀和饑人谷所有，轉載須說明來源！！！！