ajax原生js封裝

扈飛揚發表於2020-07-19
JS封裝

不帶註釋的

function ajax(json) {
        json.type = json.type ? json.type : 'get';
        json.async = json.async == false ? false : true;
        json.contentType = json.contentType ? json.contentType : 'application/x-www-form-urlencoded';
        json.data = json.data ? json.data : '';
        var ajax = new XMLHttpRequest();
        if (json.type.toLowerCase() == 'post') {
            ajax.open('post', json.url, json.async);
            ajax.setRequestHeader('Content-type', json.contentType + ';charset=utf-8');
            ajax.send(json.data);
        } else {
            ajax.open('get', json.url + '?' + json.data, json.async);
            ajax.send();
        }
        ajax.onreadystatechange = function () {
            if (ajax.readyState == 4 && ajax.status == 200) {
                json.success(ajax.response);
            }
        }
    }

帶註釋的

// ajax封裝 
        /* 
            請求方式: type 非必傳，預設get
            請求地址: url 必傳
            是否非同步: async 非必傳
            設定頭請求: contentType 非必傳
            請求資料: data 非必傳
        */
        function ajax(json) {
             // 如果沒傳型別，則預設get方式
            json.type = json.type ? json.type : 'get'; 
            // 是否非同步傳送  布林值
            json.async = json.async == false ? false : true;
            //設定頭請求 get非必須  post方式必須設定
            json.contentType = json.contentType ? json.contentType : 'application/x-www-form-urlencoded';
            //傳送資料
            json.data = json.data ? json.data : '';
            //建立非同步物件
            var ajax = new XMLHttpRequest();
            // 判斷是get還是post請求
            //如果是post請求
            if (json.type.toLowerCase() == 'post') {
                //設定請求型別、請求地址、是否非同步
                ajax.open('post', json.url, json.async);
                //post請求一定要在send前設定請求頭才行，不然會報錯 + 編碼方式
                ajax.setRequestHeader('Content-type', json.contentType + ';charset=utf-8');
                //傳送請求，資料作為引數傳入
                ajax.send(json.data);
            } else {//不是post就為get（第一步設定的）
                //設定請求型別、請求地址（可以帶引數）、請求資料、是否非同步
                ajax.open('get', json.url + '?' + json.data, json.async);
                //傳送請求
                ajax.send();
            }
            //註冊事件 onreadystatechange狀態改變就會呼叫
            ajax.onreadystatechange = function () {
                //判斷伺服器是否正確響應
                if (ajax.readyState == 4 && ajax.status == 200) {
                    //用success作為成功後的回撥函式
                    json.success(ajax.response);
                }
            }
        }

 

相關文章