[ 造輪子 ] 手動封裝 AJAX （一） —— 基礎版

關於 AJAX 相信都用過，自己動手封裝的也肯定有不少，但應該都只是簡單的可以請求，不能設定同步非同步以及返回的資料格式

• 相容低版本 IE5、IE6
• 可以使用 get 和 post 請求資料
• 可以設定請求頭 需要的思路以及語法都有了，需要小夥伴自己擴充哦
• 可以設定返回資料格式，不設定為預設
• get 請求的資料拼接我沒寫，有需要的可以自己加
• 之後會有 ES6 語法的封裝敬請期待
• 注：程式碼使用 ES5 語法，我寫的這個版本的傳參只能按照順序來
  直接上程式碼

//1.用 ES5 寫 ajax
var ajax = function (url,method,data,async,success,error,resType) {
    
    //設定變數預設值
    method = method || "GET";
    async = async || true;
    data = data || "";
    resType = resType || "";
    //資料校驗
    if(!url || url === ''){
        throw new Error('url不能為空');//throw 用來丟擲異常 
    }
    if(method==="GET" && data != ""){
        throw new Error('請將get請求引數寫在url裡');//由於時間不太夠不再寫引數拼接，有興趣的小夥伴可以自己加引數拼接功能
    }
    //將小寫全部轉換為大寫
    method = method.toUpperCase();
    //判斷是否是低版本 IE
    if (window.XMLHttpRequest) { //是否支援XMLHttpRequsest
        var xhr = new XMLHttpRequest();
    } else { //低版本 IE 
        var xhr = new ActiveXObject("Microsft.XMLHTTP");
    }
    //xmlhttp.open(method,url,async) 請求型別 請求地址 是否非同步
    xhr.open(method, url, async);
    //設定請求頭
    //判斷是否設定
    //迴圈 headers 設定請求頭
    // xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    //設定返回資料格式
    if(async){//如果設定了同步就不能設定返回資料格式
        xhr.responseType = resType; // 在不設定responseType的時候預設為 text
    }
    //send(data) 將請求傳送到伺服器。 data僅用於post
    xhr.send(data);

    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {

            var res = xhr.response;
            if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
                success && success(res);
            } else {
                error && error(res);
            }
        }
    }
}
//url,method,data,async,success,error,resType
ajax("1.json","GET","",true,function(res){console.log(res);},function(error){console.log(error);},'json');
複製程式碼

請求的 json 檔案內容

{
    "name": "yhtx1997",
    "text": "恭喜你測試成功！！！"
}
複製程式碼

呼叫效果圖