封裝簡單的Ajax

調用請求：

var obj = {
    url:"",           //url地址  例如：test.php
    method:"",     //get或post（大小寫不限）    例如：get
    async:true,     //true:非同步請求 false:同步請求   預設true
    data:{          //所需要傳輸的數據（被註釋內容為測試所用）
        // name:"戰鬥機",
        // age:20,
        // husband:null,
        // arr:["one","two","three"],
        // dimensional:{
        //     bust:100,
        //     waist:60,
        //     hipline:90
        // } 
    },
    success:function (res) {         //傳輸成功的回調函數
        //console.log(res)
    },
    fail:function (res) {          //失敗的回調函數

    }
}
myAjax(obj);

封裝函數：

//myAjax()
function myAjax(obj) {
    // 1.創建http請求
    var xmlhttp;
    if (window.XMLHttpRequest) {
        //相容IE7+，firefox，chrome, opera, safari
        xmlhttp = new XMLHttpRequest();
    }else{
        //相容IE6，IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    // 1.1聲明變數
    var fangShi = obj.method.toUpperCase();
    var url = obj.url;
    var async = true;
    if(obj.async == false){
        async = false;
    }
    console.log(async);
    // 1.2遍歷傳輸內容
    var data = "";           //data內容重組
    (function props(a){
        for(var prop in a){
            if (a.hasOwnProperty(prop)) {
                // console.log(prop);
                // console.log(a[prop]);
                
                if (a[prop] instanceof Object && !(a[prop] instanceof Array)) {
                    props(a[prop]);
                }else{
                    // 遍歷出來後如果不是對象則進行拼接
                   data += prop + "=" + a[prop] +"&";
                }
            }
        }  //for end
        return data;
    }(obj.data))

    // 2.發起請求
    if (fangShi == "GET") {        //get請求
        xmlhttp.open(fangShi, url + "?" + data, async);
        xmlhttp.send();
    }else if (fangShi == "POST") {            //post請求
        xmlhttp.open(fangShi, url, async);
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlhttp.send(data);
    }else{
        alert("請求方式不在支持範圍")
    }
    // 3.接受數據
    xmlhttp.onreadystatechange = function(){
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            var resp = JSON.parse(xmlhttp.responseText);
            obj.success(resp);
        }else{
            obj.fail(resp);
        }
    }
}

返回值的數據類型不夠齊全，如有需要再做修改