ajax的json和jsonp

https://juejin.im/post/59e85eebf265da430d571f89

;function ajax(params) {
    params = params || {};
    params.data = params.data || {};
    // 判斷是ajax請(qǐng)求還是jsonp請(qǐng)求
    var json = params.jsonp? jsonp(params) : json(params);

    function formatParams(data) {
        var arr = [];
        for (var name in data) {
           // encodeURIComponent()
           arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));
        };
        // 添加一個(gè)隨機(jī)數(shù)參數(shù) 防止緩存
        arr.push('v='+random());
        return arr.join('&');
    }

    function json(params) {
        params.type = (params.type || 'GET').toUpperCase();
        params.data = formatParams(params.data);
        var xhr = null;
        if(window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        } else {
            xhr = new ActiveXObject('Microsoft.XMLHTTP');
        };
        xhr.onreadystatechange = function() {

            /*
            * 0:為初始化耗绿。尚未調(diào)用open()方法欺劳。
            * 1:?jiǎn)?dòng)尔破。已經(jīng)調(diào)用open()方法键科。但尚未調(diào)用send()方法。
            * 2:發(fā)送挠锥。已經(jīng)調(diào)用send()方法众羡。但尚未接受到響應(yīng)。
            * 3:接受蓖租。已經(jīng)接收到部分響應(yīng)數(shù)據(jù)粱侣。
            * 4:完成。已經(jīng)接收到全部響應(yīng)數(shù)據(jù)蓖宦,并且可以在客戶端使用齐婴。
            */

            if(xhr.readyState == 4) {
                var status = xhr.status;
                if (status >= 200 && status < 300) {
                    var response = "";
                    var type = xhr.getResponseHeader('Content-type');
                    if (type.indexOf('xml') !== -1 && xhr.responseXML) {
                        response = xhr.responseXML; // document對(duì)象響應(yīng)
                    } else if (type === 'application/json') {
                        response = JSON.parse(xhr.responseText);
                    } else {
                        response = xhr.responseText; // 字符串響應(yīng)
                    }
                }
                params.success && params.success(response);
            } else {
                params.error && params.error(status);
            }
        };
    };

    function jsonp(params) {
        var callbackName = params.jsonp;
        var head = document.getElementsByTagName('head')[0];
        // 設(shè)置傳遞給后臺(tái)的回調(diào)參數(shù)名
        params.data['callback'] = callbackName;
        var data = formatParams(params.data);
        var script = document.createElement('script');
        head.appendChild(script);
        // 創(chuàng)建jsonp回調(diào)函數(shù)
        window[callbackName] = function (json) {
            head.removeChild(script);
            clearTimeout(script.timer);
            window[callbackName] = null;
            params.success && params.success(json);
        };
        script.src = params.url + '?' + data;
        if(params.time) {
            script.timer = setTimeout(function(){
                window[callbackName] = null;
                head.removeChild(script);
                params.error && params.error({
                    message: '超時(shí)'
                });
            }, time);
        }
    };

    if (params.type == 'GET') {
        xhr.open(params.type, params.url + '?' + params.data, true);
        xhr.send(null);
    } else {
        xhr.open(params.type, params.url, true);
        // 設(shè)置提交時(shí)的內(nèi)容類型
        xhr.setRequestHeader('Content-type', 'application/x-ww-form-urlencoded; charset=UTF-8');
        xhr.send(params.data);
    }
}

ajax({
    url: 'text.php',
    type: 'POST',
    data: {'b': '異步請(qǐng)求'},
    success: function(res){
        console.log(JSON.parse(res));
    }
    error: function(error){}
});

ajax({
    url: 'test',  // 請(qǐng)求地址
    jsonp: 'jsonpCallback', // 采用jsonp請(qǐng)求,且回調(diào)函數(shù)名為"jsonpCallbak"稠茂,可以設(shè)置為合法的字符串
    data: {'b': '異步請(qǐng)求'},  // 傳輸數(shù)據(jù)
    success:function(res){  // 請(qǐng)求成功的回調(diào)函數(shù)
        console.log(res);
    },
    error: function(error) {}  // 請(qǐng)求失敗的回調(diào)函數(shù)
});

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末柠偶,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子主慰,更是在濱河造成了極大的恐慌嚣州,老刑警劉巖鲫售,帶你破解...
    沈念sama閱讀 218,386評(píng)論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件共螺,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡情竹,警方通過查閱死者的電腦和手機(jī)藐不,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,142評(píng)論 3 394
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來秦效,“玉大人雏蛮,你說我怎么就攤上這事≮逯荩” “怎么了挑秉?”我有些...
    開封第一講書人閱讀 164,704評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)苔货。 經(jīng)常有香客問我犀概,道長(zhǎng)立哑,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,702評(píng)論 1 294
  • 正文 為了忘掉前任姻灶,我火速辦了婚禮铛绰,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘产喉。我一直安慰自己捂掰,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,716評(píng)論 6 392
  • 文/花漫 我一把揭開白布曾沈。 她就那樣靜靜地躺著这嚣,像睡著了一般。 火紅的嫁衣襯著肌膚如雪晦譬。 梳的紋絲不亂的頭發(fā)上疤苹,一...
    開封第一講書人閱讀 51,573評(píng)論 1 305
  • 那天,我揣著相機(jī)與錄音敛腌,去河邊找鬼卧土。 笑死,一個(gè)胖子當(dāng)著我的面吹牛像樊,可吹牛的內(nèi)容都是我干的尤莺。 我是一名探鬼主播,決...
    沈念sama閱讀 40,314評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼生棍,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼颤霎!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起涂滴,我...
    開封第一講書人閱讀 39,230評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤友酱,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后柔纵,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體缔杉,經(jīng)...
    沈念sama閱讀 45,680評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,873評(píng)論 3 336
  • 正文 我和宋清朗相戀三年搁料,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了或详。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,991評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡郭计,死狀恐怖霸琴,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情昭伸,我是刑警寧澤梧乘,帶...
    沈念sama閱讀 35,706評(píng)論 5 346
  • 正文 年R本政府宣布,位于F島的核電站庐杨,受9級(jí)特大地震影響选调,放射性物質(zhì)發(fā)生泄漏嗡善。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,329評(píng)論 3 330
  • 文/蒙蒙 一学歧、第九天 我趴在偏房一處隱蔽的房頂上張望罩引。 院中可真熱鬧,春花似錦枝笨、人聲如沸袁铐。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,910評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽剔桨。三九已至,卻和暖如春徙融,著一層夾襖步出監(jiān)牢的瞬間洒缀,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,038評(píng)論 1 270
  • 我被黑心中介騙來泰國(guó)打工欺冀, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留树绩,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,158評(píng)論 3 370
  • 正文 我出身青樓隐轩,卻偏偏與公主長(zhǎng)得像饺饭,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子职车,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,941評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容