jQuery其實用的稀裡糊塗的,原生JavaScript其實也很有趣的。搞一個原生的Ajax封裝大概下午到晚上。參考了網上很多大佬的部落格,坑坑中過來的。

$(function(){
//開始

function baseAjax(options){
    options = options || {};                                //預設物件;
    options.method = (options.method || "GET").toUpperCase();   //預設為GET請求;
    options.dataType = options.dataType || 'json'
 
;          //預設返回型別為JSON；
    options.async = options.async || true;                  //預設為非同步請求;

    var params = getParams(options.data); //資料;
    console.log('data:  '+params);
    var xhr = (window.XMLHttpRequest)? new XMLHttpRequest(): new ActiveXObject("Microsoft.XMLHTTP");

    xhr.onreadystatechange=function
 
(){
        if(xhr.readyState==4){
            var status = xhr.status;

            if(status>=200 && status <300)  //傳送成功
                options.success && options.success(xhr.responseText,xhr.responseXML);
            else{                           //執行成功;
                options.fail && options.fail(status);
            }
        }
    };

    //資料傳送;
 

    if(options.method=='GET'){
        xhr.open("GET",options.url+'?'+params,options.async);
        xhr.send(null);
    }else if(options.method=='POST'){

        xhr.open('POST',options.url,options.async);
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

        console.log(params);
        xhr.send(params);
    }

};

function getParams(data){
    var arr=[];
    for(var param in data){
        arr.push(encodeURIComponent(param)+'='+encodeURIComponent(data[param]));
    }
    //console.log(arr);

    arr.push(('randomNumber='+Math.random()).replace('.'));
    console.log(arr.join('&'));
    return arr.join('&');
}


//函式呼叫:
document.getElementsByName('href')[0].onchange=function(){
    var val={url:this.value}
    baseAjax({
        url:'cache.php',    //地址
        method:'POST',      //請求方式
        data: val,          //傳送資料;
        dataType:'json',    //返回型別;
        async:true,         //非同步;
        success:function(response,xml){ //請求成功的後代碼;
            console.log(response);
        },
        fail:function(status){          //執行成功後的程式碼;
            console.log('成功狀態程式碼: '+status);
        }
    });

}

//結束
});

翻了一些錯,學到了一些東西：
1. 把baseAjax單詞拼錯,鬱悶了一大會。
2. 參考別人的程式碼,把自己原本定義的method寫成了type。導致後臺一直接受不到資料;
3. 學會使用瀏覽器的除錯工具！這是個驚喜。除錯更快。

May 05，2018。今日音樂：《U Make Me WannaMV》 - Blue;