關於ajax網絡請求的封裝

// 封裝的ajax網絡請求函數
// obj 是一個對象
function AJAX(obj){


        //跨域請求
        if (obj.dataType == "jsonp") {
            //在這裏 callback 必須是全局變量 保證函數消失的時候 這個變量不能夠被銷燬

            //處理一下函數名(防止多個網絡請求 函數名字相同 出現紊亂的狀況)
            var hehe = "callBack" + "_" + new Date().getTime() + "_" + String(Math.random()).replace(".","");
            window[hehe] = obj.success;
            //建立 script標籤
            var sc = document.createElement("script");
            sc.src = obj.url + "?" + "cb=" + hehe;
            console.log(sc.src);
            document.body.appendChild(sc);
            document.body.removeChild(sc);
            return;
        }ajax

 

 

//一、建立 ajax 對象
    var ajaxObj = null;
    if (window.XMLHttpRequest) {
        ajaxObj = new XMLHttpRequest();
    }else{
        ajaxObj = new ActiveXObject("Microsoft.XMLHTTP");
    }


    //設置請求的類型
    obj.type = obj.type.toUpperCase() || "GET";

    //若是是get請求 而且須要傳遞參數 則須要給 url 後面拼接參數
    if (obj.type == "GET") {
        var arr = [];//定義數組 用於把對象存儲到數據裏面
        for (var key in obj.data) {
            arr.push(key +"="+ obj.data[key]);
        }
        //用&分隔數組 讓其轉化爲相似:name=lxl&age=18 的形式
        var str = arr.join("&");
        obj.url = obj.url +"?"+ str;
        //撥號
        ajaxObj.open(obj.type,obj.url,true);


        //發送"name=123&age=18"
        ajaxObj.send();
    }else{
        var arr = [];//定義數組 用於把對象存儲到數據裏面
        for (var key in obj.data) {
            arr.push(key +"="+ obj.data[key]);
            //console.log(arr);
        }
        //用&分隔數組 讓其轉化爲相似:name=lxl&age=18 的形式
        var str = arr.join("&");
        //console.log(str);
        ajaxObj.open(obj.type,obj.url,true);
        ajaxObj.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        ajaxObj.send(str);
    }



    //監聽
    ajaxObj.onreadystatechange = function(){

        if (ajaxObj.readyState == 4) {
            if (ajaxObj.status >= 200 && ajaxObj.status < 300 || ajaxObj.status == 304) {
                //請求成功
                obj.success(ajaxObj.responseText);
            }else{
                //請求失敗
                obj.error(ajaxObj.status);
            }
        }

    }

}json

下面是個人公衆號,你們能夠關注一下,能夠一塊兒學習,一塊兒進步:跨域

相關文章
相關標籤/搜索