1. AJAX的封裝

/* === AJAX的封裝 === */
function ajax(ops){
    // 處理參數(shù)及默認值
    let {url, data={}, type="get", success, error} = ops;
    // 處理數(shù)據(jù)及url地址
    let str = "";
    for(let i in data){
        str += `${i}=${data[i]}&`;
    }
    url = type==="get" ? `${url}?${str}_g-xy_=${Date.now()}` : url;
    // 處理xhr的兼容
    let xhr = null;
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
    }else{
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    // 開啟AJAX并監(jiān)聽狀態(tài)
    xhr.open(type,url,true);
    xhr.addEventListener("load", ()=>{
        if(xhr.status === 200){
            success(xhr.responseText);
        }else{
            error && error(xhr.status);
        }
    });
    // 判斷發(fā)送方式
    if(type === "get"){
        xhr.send();
    }else if(type === "post"){
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xhr.send(str.slice(0,str.length-1));
    }
}
/* ===== END ===== */

2. JSONP的封裝

/* === JSONP的封裝 === */
function jsonp(ops){
    // 處理參數(shù)及默認值
    let {url, data={}, fieldName, success} = ops;
    // 處理數(shù)據(jù)
    let str = "";
    for(let i in data){
        str += `${i}=${data[i]}&`;
    }
    // 向頁面添加script標簽并請求url
    let script = document.createElement("script");
    document.body.appendChild(script);
    script.src = `${url}?${str}_g-xy_=${Date.now()}`;
    // 設置全局函數(shù)接收數(shù)據(jù)
    window[data[fieldName]] = res=>{success(res)}
}
/* ===== END ===== */

3. AJAX和JSONP的合并封裝

/* === AJAX和JSONP的封裝 === */
function request(ops){
    let {url, success, data={}, type="get", error, async=true, timeout=2000, jsonp="callback"} = ops;
    let str = "";
    for(let i in data){
        str += `${i}=${data[i]}&`;
    }
    if(type !== "post"){
        url = url + "?" + str + "_g-xy_=" + Date.now();
    }
    if(type !== "jsonp"){
        let xhr = null;
        if(window.XMLHttpRequest){
            xhr = new XMLHttpRequest();
        }else{
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xhr.open(type, url, async);
        xhr.onload = ()=>{
            if(xhr.status === 200){
                success(xhr.responseText);
                error = null;
                success= null;
            }else{
                error && error(xhr.status);
                success = null;
                error = null;
            }
        }
        if(type === "get"){
            xhr.send();
        }else{
            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            xhr.send(str.slice(0,str.length-1));
        }
    }else{
        let script = document.createElement("script");
        document.body.appendChild(script);
        script.src = url;
        window[data[jsonp]] = res=>{
            success && success(res);
            error = null;
            success = null;
        }
    }
    setTimeout(() => {
        error && error("timeout");
        success = null;
        error = null;
    }, timeout);
}
/* ===== END ===== */

4. AJAX和JSONP的Promise封裝

/* -------------------------
    AJAX和JSONP的Promise封裝
   ------------------------- */
function request(ops){
    return new Promise((resolve,reject)=>{
        let {url, data={}, type="get", async=true, timeout=2000, jsonp="callback"} = ops;
        let str = "";
        for(let i in data){
            str += `${i}=${data[i]}&`;
        }
        if(type !== "post"){
            url = url + "?" + str + "_g-xy_=" + Date.now();
        }
        if(type !== "jsonp"){
            const xhr = new XMLHttpRequest();
            xhr.open(type, url, async);
            xhr.onload = ()=>{
                if(xhr.status === 200){
                    resolve(xhr.responseText);
                }else{
                    reject(xhr.status);
                }
            }
            if(type === "get"){
                xhr.send();
            }else{
                xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                xhr.send(str.slice(0,str.length-1));
            }
        }else{
            let script = document.createElement("script");
            document.body.appendChild(script);
            script.src = url;
            window[data[jsonp]] = res=>{
                resolve(res);
            }
        }
        setTimeout(() => {
            reject("timeout");
        }, timeout);
    })
}
/* ===== END ===== */

• 以上代碼有待完善，如有錯誤請指出榨崩，歡迎交流削解。