JSONP 封裝

Jsonp(JSON with Padding) 是 json 的一種"使用模式"训柴,可以讓網(wǎng)頁(yè)從別的域名(網(wǎng)站)那獲取資料袋毙,即跨域讀取數(shù)據(jù)沪摄。

//調(diào)用
 btn.onclick = function(){
        ajax({
            url:"http://localhost:4000/getAjax",
            data:{
                name:"張三",
                age:20
            },
            dataType:"jsonp",
            jsonp:"callback",
            success:function(res){
                console.log(res)
            }
        })
    }
//封裝
function ajax(options) {
    let opts = Object.assign({
        method: 'get',
        url: '',
        headers: {
            'content-type': 'application/x-www-form-urlencoded'
        },
        jsonp:"cb",
        data: '',
        success: function () { }
    }, options)
    //處理jsonp請(qǐng)求诱篷;
    if(opts.dataType==="jsonp"){
        jsonpFn(opts.url,opts.data,opts.jsonp,opts.success);
        return false;
    }
    function jsonpFn(url,data,cbName,cbFn){
        // cbName   cb/callback
        let fnName = "KKB_"+Math.random().toString().substr(2);
        window[fnName] = cbFn;
        let path = url+"?"+o2u(data)+"&"+cbName+"="+fnName;
        // console.log(path);
        let o = document.createElement("script");
        o.src = path;
        document.querySelector("head").appendChild(o);
    }



    let xhr = new XMLHttpRequest();
    if (options.method == "get") {
        let data = o2u(opts.data)
        options.url = options.url + "?" + data;
    }
    xhr.open(options.method, options.url, true);
    for (let key in opts.headers) {
        xhr.setRequestHeader(key, opts.headers[key]);
    }
    let sendData;
    switch (opts.headers['content-type']) {
        case 'application/x-www-form-urlencoded':
            sendData = o2u(opts.data);
            break;
        case 'application/json':
            sendData = JSON.stringify(opts.data);
            break;
    }
    xhr.onload = function () {
        let resData;
        if (xhr.getResponseHeader("content-type").includes("xml")) {
            resData = xhr.responseXML;
        } else {
            resData = JSON.parse(xhr.responseText);
        }
        options.success(resData);
    }
    if (options.method == "get") {
        xhr.send();
    } else {
        xhr.send(sendData);
    }
}

function o2u(obj) {
    let keys = Object.keys(obj);
    let values = Object.values(obj);
    return keys.map((v, k) => {
        return `${v}=${values[k]}`;
    }).join("&");
}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末阔拳,一起剝皮案震驚了整個(gè)濱河市崭孤,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌糊肠,老刑警劉巖辨宠,帶你破解...
    沈念sama閱讀 212,816評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異货裹,居然都是意外死亡嗤形,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,729評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門弧圆,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)赋兵,“玉大人,你說(shuō)我怎么就攤上這事搔预∨冢” “怎么了?”我有些...
    開封第一講書人閱讀 158,300評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵拯田,是天一觀的道長(zhǎng)历造。 經(jīng)常有香客問我,道長(zhǎng),這世上最難降的妖魔是什么帕膜? 我笑而不...
    開封第一講書人閱讀 56,780評(píng)論 1 285
  • 正文 為了忘掉前任枣氧,我火速辦了婚禮,結(jié)果婚禮上垮刹,老公的妹妹穿的比我還像新娘达吞。我一直安慰自己,他們只是感情好荒典,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,890評(píng)論 6 385
  • 文/花漫 我一把揭開白布酪劫。 她就那樣靜靜地躺著,像睡著了一般寺董。 火紅的嫁衣襯著肌膚如雪覆糟。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 50,084評(píng)論 1 291
  • 那天遮咖,我揣著相機(jī)與錄音滩字,去河邊找鬼。 笑死御吞,一個(gè)胖子當(dāng)著我的面吹牛麦箍,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播陶珠,決...
    沈念sama閱讀 39,151評(píng)論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼挟裂,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了揍诽?” 一聲冷哼從身側(cè)響起诀蓉,我...
    開封第一講書人閱讀 37,912評(píng)論 0 268
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎暑脆,沒想到半個(gè)月后渠啤,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,355評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡添吗,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,666評(píng)論 2 327
  • 正文 我和宋清朗相戀三年埃篓,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片根资。...
    茶點(diǎn)故事閱讀 38,809評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖同窘,靈堂內(nèi)的尸體忽然破棺而出玄帕,到底是詐尸還是另有隱情,我是刑警寧澤想邦,帶...
    沈念sama閱讀 34,504評(píng)論 4 334
  • 正文 年R本政府宣布裤纹,位于F島的核電站,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏鹰椒。R本人自食惡果不足惜锡移,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,150評(píng)論 3 317
  • 文/蒙蒙 一扇住、第九天 我趴在偏房一處隱蔽的房頂上張望钓株。 院中可真熱鬧淮菠,春花似錦畏线、人聲如沸冯键。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,882評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)慈迈。三九已至擂找,卻和暖如春戳吝,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背贯涎。 一陣腳步聲響...
    開封第一講書人閱讀 32,121評(píng)論 1 267
  • 我被黑心中介騙來(lái)泰國(guó)打工听哭, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人塘雳。 一個(gè)月前我還...
    沈念sama閱讀 46,628評(píng)論 2 362
  • 正文 我出身青樓陆盘,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親粉捻。 傳聞我的和親對(duì)象是個(gè)殘疾皇子礁遣,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,724評(píng)論 2 351