• 關(guān)鍵詞：Ajax

Ajax：在不刷新頁面的情況下，向服務(wù)器發(fā)送請求、獲取數(shù)據(jù)，并異步更新網(wǎng)頁的某部分！

1. Ajax 是什么？有什么作用？

• Ajax 全稱“Asynchronous Javascript And XML”，即：異步的 JavaScript 和 XML。
• Ajax 本質(zhì)就是一個 XMLHttpRequest 對象，這個對象提供了一些接口：用于向服務(wù)器發(fā)送請求和解析服務(wù)器響應(yīng)。
• Ajax 就是一種技術(shù)，可在不刷新頁面的情況下，與服務(wù)器交互數(shù)據(jù)，采用異步方式更新網(wǎng)頁的部分內(nèi)容。
• 采用 Ajax 與服務(wù)器交互數(shù)據(jù)，可使用戶擁有較好的體驗：運行頁面上某個功能時頁面不會重新加載，且等待過程中不會影響頁面上其他功能的運行。

2. 前后端開發(fā)聯(lián)調(diào)需要注意哪些事情？后端接口完成前如何 mock 數(shù)據(jù)？

前后端在進行開發(fā)前，需要協(xié)作商定數(shù)據(jù)和接口的各項細節(jié)，后端負責(zé)提供數(shù)據(jù)，前端負責(zé)展示數(shù)據(jù)（根據(jù)數(shù)據(jù)負責(zé)頁面的開發(fā)）。

• 前后端開發(fā)聯(lián)調(diào)注意事項

1. URL：接口名稱
2. 發(fā)送請求的參數(shù)和格式（get/post）
3. 數(shù)據(jù)響應(yīng)的數(shù)據(jù)格式（數(shù)組/對象）
4. 根據(jù)前后端約定，整理接口文檔

• 如何 mock 數(shù)據(jù)

1. 搭建 web 服務(wù)器
2. 根據(jù)接口文檔仿造假數(shù)據(jù)
3. 關(guān)聯(lián)前后端文件，開啟 web 服務(wù)器
4. 驗證前端頁面功能及顯示是否正確

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

• 思路

1. 使用狀態(tài)鎖檢驗此刻是否正在請求數(shù)據(jù)（是否上鎖）：是則放棄請求，否則發(fā)送請求
2. 請求數(shù)據(jù)之前，解鎖狀態(tài)：“ 發(fā)送 Ajax 請求 ” 代碼可執(zhí)行
3. 正在請求數(shù)據(jù)，上鎖狀態(tài)：“ 發(fā)送 Ajax 請求 ” 代碼被禁用
4. 拿到后臺數(shù)據(jù)，解鎖狀態(tài)：“ 發(fā)送 Ajax 請求 ” 代碼被解禁

• 代碼

var btn = document.querySelector('.btn');
var isLoading = false; // 狀態(tài)鎖1：發(fā)送請求之前，解鎖狀態(tài)
btn.addEventListener('click', function () {
        if(isLoading){
            return; // 狀態(tài)鎖0：用于檢測是否正在請求數(shù)據(jù)，是則跳出，否則繼續(xù)
        }
        ajax({ // 調(diào)用封裝的 ajax 函數(shù)
            method: 'get',
            url: '/lockModal',
            data: {},
            async: 'true',
            success: function () {
                onSuccess();
                isLoading = false;  // 狀態(tài)鎖3.1：請求數(shù)據(jù)已完成（成功拿到數(shù)據(jù)），解鎖狀態(tài)
            },
            error: function() {
                onError();
                isLoading = false;  // 狀態(tài)鎖3.2：請求數(shù)據(jù)已完成（失敗拿到數(shù)據(jù)），解鎖狀態(tài)
            }
        });
        isLoading = true; // 狀態(tài)鎖2：正確請求數(shù)據(jù)，上鎖狀態(tài)
    })

4. 封裝一個 ajax 函數(shù)，能通過如下方式調(diào)用。后端在本地使用server-mock來 mock 數(shù)據(jù)

• Download
• ajax 調(diào)用格式

ajax（{
     method: '',
     url: '',
     data: {},
     // dataType: '', // 若需要則添加，否則不需添加
     asyns: true, // 根據(jù)需要可以設(shè)置封裝函數(shù)的默認值為 true
     success: function () {},
     error: function () {}
}）

• ajax 簡單封裝

function ajax(opts) {
    // 三、對數(shù)據(jù)進行處理
    // 3.1、若數(shù)據(jù)存在，將數(shù)據(jù)組裝成字符串
    if(opts.data){
        var dataStr = '';
        for(var key in opts.data){
            dataStr = dataStr + key + '=' + opts.data[key] + '&';
        }
        opts.data = dataStr.substring(0, dataStr.length-1);
    }
    // 3.2、將方法處理為小寫
    opts.method = opts.method.toLowerCase();
    // 3.3、若為 get 方法，重新組裝 url
    if( (opts.method == 'get') && opts.data){
        opts.url = opts.url + '?' + opts.data;
    }
    // 四、開始 AJAX 函數(shù)
    // 4.1、創(chuàng)建 AJAX 對象
    var xhr = new XMLHttpRequest();
    // 4.2、規(guī)定所需數(shù)據(jù)格式
    xhr.open(opts.method, opts.url, opts.asyns);
    // 4.3、發(fā)送請求
    if(opts.method == 'get'){
        xhr.send();
    }else if(opts.method == 'post'){
        xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        xhr.send(opts.data);
    }
    // 4.4、檢測服務(wù)器響應(yīng)
    xhr.onreadystatechange = function () {
        if( (xhr.readyState == 4) && (xhr.status == 200) ){
            opts.success( JSON.parse(xhr.responseText) );
            console.log(opts.method);
        }else {
            opts.error(); // 此處有待改進，目前到此為止
        }
    }
}

5. 實現(xiàn)加載更多的功能，后端在本地使用 server-mock 來模擬數(shù)據(jù)

• 思路

1. 編寫 HTML 和 CSS 代碼
2. JS部分：給 ‘加載更多’ 按鈕添加事件：當用戶點擊時，執(zhí)行下列代碼
3. 調(diào)用封裝好的 ajax 函數(shù)，將定義好的請求發(fā)送給后端
4. 在后端 mock 數(shù)據(jù)，獲取前端參數(shù)，處理數(shù)據(jù)，給前端發(fā)送數(shù)據(jù)
5. 前端接收并調(diào)用數(shù)據(jù)，將數(shù)據(jù)展示在頁面上

• 代碼：穿梭到 github 查看代碼

6. 額外實現(xiàn)一個功能：換一批看看，后端自行 mock 數(shù)據(jù)

• 思路：與第5題思路大致相同
• 代碼：穿梭到 github 查看代碼

本文章著作權(quán)歸饑人谷和作者所有，轉(zhuǎn)載須說明來源！