題目1： ajax 是什么洼畅？有什么作用？

• ajax(Asynchronous JavaScript and XML)棚赔，這一技術(shù)能夠向服務(wù)器請求額外的數(shù)據(jù)而無需卸載整個頁面帝簇∨枪可以實現(xiàn)異步，這里的異步是指脫離當(dāng)前瀏覽器頁面的請求己儒、加載等單獨執(zhí)行崎岂，這意味著可以在不重新加載整個網(wǎng)頁的情況下，通過JavaScript發(fā)送請求闪湾、接受服務(wù)器傳來的數(shù)據(jù)冲甘，然后操作DOM將新數(shù)據(jù)對網(wǎng)頁的某部分進行更新。
• 異步請求途样，不需要像表單提交請求一樣阻塞頁面（同步請求會造成頁面卡死等情況）江醇。異步會帶來良好的用戶體驗。

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

• 需要在開發(fā)前達成對接口的約定(一般是文檔)，決定url(和方法名)裆站，參數(shù)名（和參數(shù)值格式）条辟，返回數(shù)據(jù)格式
• mock數(shù)據(jù)：
  • 可以根據(jù)接口文檔，使用假數(shù)據(jù)來驗證我們制作的頁面響應(yīng)和接口是否正常宏胯。
  • 使用server-mock羽嫡，簡單使用步驟如下：
    1. npm install -g server-mock：在全局中安裝server-mock
    2. mock init：生成3個mock文件(index.html,router.js,user.ejs)
    3. mock start：開啟服務(wù)器

題目3：點擊按鈕，使用 ajax 獲取數(shù)據(jù)肩袍，如何在數(shù)據(jù)到來之前防止重復(fù)點擊?

點擊按鈕后杭棵，設(shè)置狀態(tài)變量，直到請求結(jié)束(readyState===4時)重置狀態(tài)變量讓后面的請求代碼可以執(zhí)行氛赐。

let isLoading = false;//狀態(tài)變量：用于在數(shù)據(jù)到來之前防止重復(fù)點擊
btnNode.addEventListener('click', () => {
    if(isLoading) return;//正在加載則終止
    let text = textNode.value;
    let xhr = new XMLHttpRequest();
    xhr.open('get', '/test?text=' + text, true);
    xhr.send();
    xhr.onreadystatechange = () => {
        if (xhr.readyState === 4 && xhr.status === 200) {
            let content = xhr.responseText;
            console.log(content);
            contentNode.innerText = content;
            isLoading = false;//加載成功則重置狀態(tài)變量
        }
    }
    isLoading = true;//加載開始時改變狀態(tài)變量的值
});

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

//I defined a method: convert from obj to url-parameters
const convert=(obj)=>{
    let arr = [];
    for(let [key,value] of Object.entries(obj)) {
        arr.push(key+"="+value);
    }
    return arr.join('&');
}
function ajax(opts){
    // todo ...
    let xhr = new XMLHttpRequest();
    if(opts.type==='get'){
        xhr.open(opts.type, opts.url+'?'+convert(opts.data), true);
        xhr.send();
    } else if(opts.type === 'post'){
        xhr.open(opts.type, opts.url, true);
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhr.send(convert(opts.data));
    }
    xhr.onreadystatechange = ()=>{
        if(xhr.readyState===4&&xhr.status===200){
            let res = xhr.responseText;
            console.log(res);
            opts.success(res);
        }else if(xhr.readyState===4){
            opts.error();
        }
    }
}
document.querySelector('#btn').addEventListener('click', function(){
    ajax({
        url: '/login',   //接口地址
        type: 'get',               // 類型艰管， post 或者 get,
        data: {
            username: 'xiaoming',
            password: 'abcd1234'
        },
        success: function(ret){
            console.log(ret);       // {status: 0}
        },
        error: function(){
           console.log('出錯了')
        }
    })
});

題目5：實現(xiàn)加載更多的功能滓侍，效果范例19，后端在本地使用server-mock來模擬數(shù)據(jù)

代碼鏈接