Ajax function

function json2str(data) {

    // 0.添加隨機(jī)因子
    data.t = Math.random();

    // 1.定義一個數(shù)組
    var arr = [];
    // 2.遍歷傳入的json對象
    for(var key in data){
        // 3.將json轉(zhuǎn)化為數(shù)組
        arr.push(key+"="+encodeURI(data[key]));
    }
    // 4.將數(shù)組轉(zhuǎn)化為固定格式的字符串
    // console.log(arr.join("&"));
    return arr.join("&");
}

/*
type, url, data, timeout, success, error

var option = {
 "type":"get",
 "data": {
    "name":"nj",
    "age":"888"
  },
  "url":"01-Ajax-get.php",
  "error": function(){},
  "success":function(){}
 }

option.data
 */

function ajax(options) {
    // 0.安全處理
    if(!options.url){
        return;
    }
    options.type = options.type || "get";
    options.data = options.data || null;
    options.timeout = options.timeout || 0;

    // 1.創(chuàng)建異步對象
    if(window.XMLHttpRequest){
        var xhr = new XMLHttpRequest();
    }else{
        var xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }

    // 對參數(shù)進(jìn)行處理
    var str = json2str(options.data);

    // 判斷請求的類型
    if(options.type == "get"){
        // 2.設(shè)置URL
        xhr.open(options.type, options.url+"?"+str, true);
        // 3.發(fā)送請求
        xhr.send();
    }else{
        // 2.設(shè)置URL
        xhr.open(options.type, options.url, true);

        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

        // 3.發(fā)送請求
        xhr.send(str);
    }

    // 4.監(jiān)聽請求
    xhr.onreadystatechange = function () {
        // 5.對請求返回的數(shù)據(jù)進(jìn)行處理
        if(xhr.readyState == 4){
            // 如果已經(jīng)請求成功, 那么需要清空定時器
            clearTimeout(timer);
            if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
                // console.log("接收數(shù)據(jù)成功");
                options.success(xhr.responseText);
            }else{
                // console.log("接收數(shù)據(jù)失敗");
                options.error(xhr.status);
            }
        }
    }
    // 6.對超時進(jìn)行處理
    if(options.timeout){
        var timer = setTimeout(function () {
            alert("請求超時");
            // 如果請求超時了, 那么應(yīng)該中斷請求
            xhr.abort();
        }, options.timeout);
    }
}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末雇庙,一起剝皮案震驚了整個濱河市灶伊,隨后出現(xiàn)的幾起案子寒跳,更是在濱河造成了極大的恐慌,老刑警劉巖童太,帶你破解...
    沈念sama閱讀 206,482評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件书释,死亡現(xiàn)場離奇詭異翘贮,居然都是意外死亡爆惧,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,377評論 2 382
  • 文/潘曉璐 我一進(jìn)店門肴捉,熙熙樓的掌柜王于貴愁眉苦臉地迎上來叔收,“玉大人齿穗,你說我怎么就攤上這事饺律。” “怎么了复濒?”我有些...
    開封第一講書人閱讀 152,762評論 0 342
  • 文/不壞的土叔 我叫張陵巧颈,是天一觀的道長畦木。 經(jīng)常有香客問我砸泛,道長,這世上最難降的妖魔是什么唇礁? 我笑而不...
    開封第一講書人閱讀 55,273評論 1 279
  • 正文 為了忘掉前任盏筐,我火速辦了婚禮围俘,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘簿寂。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 64,289評論 5 373
  • 文/花漫 我一把揭開白布她混。 她就那樣靜靜地躺著,像睡著了一般坤按。 火紅的嫁衣襯著肌膚如雪馒过。 梳的紋絲不亂的頭發(fā)上臭脓,一...
    開封第一講書人閱讀 49,046評論 1 285
  • 那天腹忽,我揣著相機(jī)與錄音,去河邊找鬼嘹锁。 笑死,一個胖子當(dāng)著我的面吹牛领猾,可吹牛的內(nèi)容都是我干的骇扇。 我是一名探鬼主播摔竿,決...
    沈念sama閱讀 38,351評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼继低,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了郁季?” 一聲冷哼從身側(cè)響起钱磅,我...
    開封第一講書人閱讀 36,988評論 0 259
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎盖淡,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,476評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡答憔,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,948評論 2 324
  • 正文 我和宋清朗相戀三年掀抹,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,064評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡埂蕊,死狀恐怖态兴,靈堂內(nèi)的尸體忽然破棺而出疟位,到底是詐尸還是另有隱情,我是刑警寧澤甜刻,帶...
    沈念sama閱讀 33,712評論 4 323
  • 正文 年R本政府宣布,位于F島的核電站得院,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏尿招。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,261評論 3 307
  • 文/蒙蒙 一怪蔑、第九天 我趴在偏房一處隱蔽的房頂上張望丧荐。 院中可真熱鬧缆瓣,春花似錦虹统、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,264評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽族吻。三九已至,卻和暖如春超歌,著一層夾襖步出監(jiān)牢的瞬間砍艾,已是汗流浹背巍举。 一陣腳步聲響...
    開封第一講書人閱讀 31,486評論 1 262
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留蜓谋,地道東北人。 一個月前我還...
    沈念sama閱讀 45,511評論 2 354
  • 正文 我出身青樓孤澎,卻偏偏與公主長得像欠窒,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子岖妄,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,802評論 2 345

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