AJAX入門

AJAX(Async Javascript and Xml):在AJAX中的異步不是異步編程中的異步,而是泛指“局部刷新”,但是在AJAX請求中盡可能使用異步獲取數據(因為異步數據獲取不會阻塞下面代碼的執行)

AJAX的操作

//=>創建AJAX實例:IE6中是不兼容的,使用的是new ActiveXObject來實現的
let xhr = new XMLHttpRequest();

//=>打開請求:發送請求之前的一些配置項
//1.HTTP METHOD 請求方式
//2.URL 向服務器端發送請求的API接口地址
//3.ASYNC 設置AJAX請求的同步異步,默認是異步(寫TRUE也是異步),FALSE是同步,項目中都使用異步編程,防止阻塞后續代碼執行
//4.USER-NAME/USER-PASS:用戶名密碼,一般不用
xhr.open([HTTP METHOD],[URL],[ASYNC],[USER-NAME],[USER-PASS]);

//=>事件監聽:一般監聽的都是 READY-STATE-CHANGE 事件(AJAX狀態改變事件),基于這個事件可以獲取服務器返回的響應頭/響應主體內容
xhr.onreadystatechange= () => {
    if(xhr.readyState === 4 && xhr.status === 200){
       xhr.responseText;
    }
};

//=>發送AJAX請求:從這步開始,當前AJAX任務開始,如果AJAX是同步的,后續代碼不會執行,要等到AJAX狀態成功后在執行,反之異步不會
xhr.send([body]);

AJAX狀態(READY-STATE)

0 => UNSENT  剛開始創建XHR,還沒有發送
1 => OPENED  已經執行了OPEN操作
2 => HEADERS_RECEIVED 已經發送AJAX請求(AJAX任務開始),響應頭信息已經被客戶端接收了(響應頭中包含了:服務器的時間、返回的HTTP狀態碼...)
3 => LOADING 響應主體內容正在返回
4 => DONE 響應主體內容已經被客戶端接收

關于XHR的屬性和方法

  • xhr.response 響應主體內容
  • xhr.responseText 響應主體的內容是字符串(JSON或者XML格式字符串都可以)
  • xhr.responseXML 響應主體的內容是XML文檔
  • xhr.status 返回的HTTP狀態碼
  • xhr.statusText 狀態碼的描述
  • xhr.timeout 設置請求超時的時間
  • xhr.withCredentials 是否允許跨域
  • xhr.abort() 強制中斷AJAX請求
  • xhr.getAllResponseHeaders() 獲取所有響應頭信息
  • xhr.getResponseHeader([key]) 獲取KEY對應的響應頭信息,例如:xhr.getResponseHeader('date')就是在獲取響應有中的服務器時間
  • xhr.open() 打開URL請求
  • xhr.overrideMimeType() 重寫MIME類型
  • xhr.send() 發送AJAX請求
  • xhr.setRequestHeader() 設置請求頭
let xhr = new XMLHttpRequest();
xhr.open('GET', 'temp.json');
xhr.setRequestHeader('leonard', '@@@');//=>設置的請求頭信息不能出現中文而且必須在OPEND之后才可以設置成功

/* xhr.timeout = 200;
   xhr.ontimeout = () => {
     console.log('請求超時,請稍后重試');
  };
*/

xhr.onreadystatechange = () => {
      if (!/^(2|3)\d{2}$/.test(xhr.status)) return; 
      if (xhr.readyState === 2) {
          let time = xhr.getResponseHeader('date');
          console.log(time, new Date(time));
      }

      if (xhr.readyState === 4) {
            console.log(xhr.responseText);
      }
  };
xhr.send(null); 

AJAX中的同步異步

  • 異步情況
    let xhr=new XMLHttpRequest();       // readyState 0
    xhr.open('GET','/temp/list',true);  // readyState 1
    xhr.onreadystatechange=()=>{
       if(xhr.readyState===2){console.log(1);}
       if(xhr.readyState===4){console.log(2);}
    };
    xhr.send();
    console.log(3);
    //=> 3 1 2
    
  • 同步情況:同步狀態下主任務隊列在readyState未變成4之前一直被占用,所以即使觸發了onreadystatechange,也無法執行
    //=>注意send位置不同結果是不一樣的
    let xhr=new XMLHttpRequest();
    xhr.open('GET','/temp/list',true);
    xhr.onreadystatechange=()=>{
       if(xhr.readyState===2){console.log(1);}
       if(xhr.readyState===4){console.log(2);}
    };
    xhr.send();
    console.log(3);
    //=> 2 3
    
    let xhr=new XMLHttpRequest();
    xhr.open('GET','/temp/list',true);
    xhr.send();
    xhr.onreadystatechange=()=>{
       if(xhr.readyState===2){console.log(1);}
       if(xhr.readyState===4){console.log(2);}
    };
    console.log(3);
    //=> 3
    

JQUERY中的AJAX

???????我們發現,每次寫AJAX請求都要經歷“經典四步”,寫起來特別麻煩,所以需要借助一些已經封裝好了的AJAX(當然,你也可以自己封裝2333)來進行數據請求,這樣顯得方便快捷

  • $.ajax([URL],[OPTIONS]) / $.ajax([OPTIONS])
  • $.get / $.post / $.getJSON / $.getScript 這些方法都是基于$.ajax構建出來的快捷方法
//=>$.ajax中OPTIONS常用的參數
 /*
  * URL:請求的API接口地址
  * METHOD:請求的方式
  * DATA:傳遞給服務器的信息可以放到DATA中
  *   如果是GET請求是基于問號傳參傳遞過去的
  *   如果是POST請求是基于請求主體傳遞過去的
  *
  *   DATA的值可以是對象也可以是字符串(一般常用對象)
  *     如果是對象類型,JQ會把對象轉換為 xxx=xxx&xxx=xxx 的模式(x-www-form-urlencoded)
  *     如果是字符串,我們寫的是什么就傳遞什么
  *
  * DATA-TYPE:預設置獲取結果的數據格式 TEXT/JSON/JSONP/HTML/SCRIPT/XML...(服務器返回給客戶端的響應主體中的內容一般都是字符串[JSON格式居多]),而設置DATA-TYPE='JSON',JQ會內部把獲取的字符串轉為JSON格式的對象 =>“他不會影響服務返回的結果,只是把返回的結果進行了二次處理”
  * ASYNC:設置同步或者異步(TRUE->異步 FALSE->同步)
  * CACHE:設置GET請求下是否建立緩存(默認TRUE->建立緩存 FALSE->不建立緩存),當我們設置FALSE,并且當前請求是GET請求,JQ會在請求的URL地址末尾追加隨機數(時間輟)
  *
  * SUCCESS:回調函數,當AJAX請求成功執行,JQ執行回調函數的時候會把從響應主體中獲取的結果(可能二次處理了)當做參數傳遞給回調函數
  * ERROR:請求失敗后執行的回調函數
  */
$.ajax({
   url: '/temp/list',
   method: 'GET',
   data: {
       name: 'Leonard',
       age: 18
   },
   dataType: 'json',
   async: true,
   cache: false,
   success: (result, textStatus, xhr) => {
       console.log(result);
       console.log(textStatus);
       console.log(xhr.getResponseHeader('date'));//=>jq重構的XHR
   },
   error: () => {}
});

???????心動不如行動,接下來模仿JQ封裝一個簡易版的AJAX

~(function(window) {
    function AJAX(options) {
        return new init(options);
    }

    let init = function init(options = {}) {
        //=>初始化參數
        let {
            url,
            method = 'GET',
            data = null,
            dataType = 'JSON',
            async = true,
            cache = true,
            success,
            error
        } = options;

        //=>把配置項掛載到實例上
        ['url', 'method', 'data', 'dataType', 'async', 'cache', 'success', 'error'].forEach(item => {
            this[item] = eval(item);
        });

        //=>發送AJAX請求
        this.sendAjax();
    };

    AJAX.prototype = {
        constructor: AJAX,
        init,
        //=>發送AJAX請求
        sendAjax() {
            this.handleData();
            this.handleCache();

            //=>SEND
            let {method, url, async, error, success, data} = this,
                xhr = new XMLHttpRequest;
            xhr.open(method, url, async);
            xhr.onreadystatechange = () => {
                if (xhr.readyState === 4) {
                    //=>ERROR
                    if (!/^(2|3)\d{2}$/.test(xhr.status)) {
                        error && error(xhr.statusText, xhr);
                        return;
                    }
                    //=>SUCCESS
                    let result = this.handlDataType(xhr);
                    success && success(result, xhr);
                }
            };
            xhr.send(data);
        },
        //=>處理DATA-TYPE
        handlDataType(xhr) {
            let dataType = this.dataType.toUpperCase(),
                result = xhr.responseText;
            switch (dataType) {
                case 'TEXT':
                    break;
                case 'JSON':
                    result = JSON.parse(result);
                    break;
                case 'XML':
                    result = xhr.responseXML;
                    break;
            }
            return result;
        },
        //=>處理CACHE
        handleCache() {
            let {url, method, cache} = this;
            if (/^GET$/i.test(method) && cache === false) {
                //=>URL末尾追加時間輟
                url += `${this.check()}_=${+(new Date())}`;
                this.url = url;
            }
        },
        //=>處理DATA
        handleData() {
            let {data, method} = this;
            if (!data) return;
            //=>如果是個OBJECT對象,我們把它轉換為x-www-form-urlencoded這種模式,方便后期傳遞給服務器
            if (typeof data === 'object') {
                let str = ``;
                for (let key in data) {
                    if (data.hasOwnProperty(key)) {
                        str += `${key}=${data[key]}&`;
                    }
                }
                data = str.substring(0, str.length - 1);
            }

            //=>根據請求方式不一樣,傳遞給服務器的方式也不同
            if (/^(GET|DELETE|HEAD|TRACE|OPTIONS)$/i.test(method)) {
                this.url += `${this.check()}${data}`;
                this.data = null;
                return;
            }
            this.data = data;
        },
        //=>檢測URL中是否存在問號
        check() {
            return this.url.indexOf('?') > -1 ? '&' : '?';
        }
    };

    init.prototype = AJAX.prototype;
    window.ajax = AJAX;
})(window);

???????不過問題又來了,我們發現JQ中的AJAX在處理多個請求中會出現“回調地獄”的尷尬情形,那不行,雖然我的代碼沒那么美觀,但也不能容忍它這么丑吧,得想想法子

//=>回調地獄出現
$.ajax({
     url: '/temp/list',
     success: result => {
         $.ajax({
             url: '/temp/info',
             success: result => {
                 $.ajax({
                     url: '/temp/add',
                     method:'POST',
                     success: result => {
                              ...
                     }
                 });
             }
         });
     }
});

//=>解決方案1:發布訂閱
let $planA = $.Callbacks(),
    $planB = $.Callbacks();
$.ajax({
    url: '/temp/list',
    success: result => {
        $planA.fire(result);
    }
});

$planA.add(result => {
    $.ajax({
        url: '/temp/list',
        success: result => {
            $planB.fire(result);
        }
    });
});

$planB.add(result => {
    ...
});

//=>解決方案2:Promise
let queryA = function queryA() {
  return new Promise(resolve => {
     $.ajax({
         url: '/temp/list',
         success: resolve
     });
  });
};

let queryB = function queryB() {
    return new Promise(resolve => {
        $.ajax({
           url: '/temp/info',
           success: resolve
        });
    });
};

let queryC = function queryC() {
     return new Promise(resolve => {
         $.ajax({
             url: '/temp/add',
             method: 'POST',
             success: resolve
         });
     });
};

let promise = queryA();
promise.then(result => {
    console.log('A', result);
    return queryB();
}).then(result => {
    console.log('B', result);
    return queryC();
}).then(result => {
    console.log('C', result);
});

AXIOS

???????那么既然promise這么香,為何不用一個基于promise來管理的AJAX庫呢?AXIOS就是這樣一個寶藏,它是一個基于promise管理的類庫

  • 發送請求
// axios.get(url[,config])
axios.get('/temp/info', {
    params: {
        name: 'Leonard',
        age: 18
    }
});

//=>配置項中傳遞的內容都相當于基于請求主體專遞給服務器
//=>但是傳遞給服務器的內容格式是RAW(JSON格式的字符串)
//=>不是X-WWW-FORM-URLENCODED
// axios.post(url[,data[,config]])
axios.post('/temp/add', {
     name: 'Leonard',
     age: 18
});

//=>一次并發多個請求
let sendAry = [
  axios.get('/temp/list'),
  axios.get('/temp/info'),
  axios.get('/temp/add')
]
axios.all(sendAry).then(result => {
  console.log(result);  //=>是一個數組,分別存儲著每一個請求的結果
})
//=> 也可以寫成
axios.all(sendAry).then(axios.spread((resA,resB,resC) => {...})
  • 請求返回信息
let promise = axios.get('/package.json', {
        params: {
            lx: 12
        }
    });
promise.then(result => {
        console.log(result);  //=>獲取的結果是一個對象
        /*
         * data:從服務器獲取的響應主體內容
         * headers:從服務器獲取的響應的頭信息
         * request:創建的AJAX實例
         * status:狀態碼
         * statusText:狀態碼的描述
         * config:基于AXIOS發送請求的時候做的配置項
         */
}).catch(msg => {
    console.log(msg);  //=>請求失敗的原因
});
  • 初始化一些常用的配置項
//=>設置公共地址
axios.defaults.baseURL = 'https://www.easy-mock.com/mock/5b0412beda8a195fb0978627/temp';
//=>響應攔截處理,可以直接取出響應主體內容以便后續使用
axios.interceptors.response.use(result => result.data);
//=>自定義校驗規則
axios.defaults.validateStatus = status => /^(2|3)\d{2}$/.test(status);
//=>設置在POST請求中基于請求主體向服務器發送內容的格式,默認是RAW,項目中常用的是URL-ENCODEED格式
axios.defaults.headers['Content-Type'] = 'appliction/x-www-form-urlencoded';
//=>對請求內容進行處理
axios.defaults.transformRequest = data => {
//=>DATA:就是請求主體中需要傳遞給服務器的內容(對象)
  let str = ``;
  for (let attr in data) {
      if (data.hasOwnProperty(attr)) {
           str += `${attr}=${data[attr]}&`;
      }
  }
  return str.substring(0, str.length - 1);
};
  • 更詳細地進行學習可以參考axios
  • 最后,我們基于PROMISE再封裝一款簡易版AJAX庫
~(function(window) {
    //=>設置默認的參數配置項
    let _default = {
        method: 'GET',
        url: '',
        baseURL: '',
        headers: {},
        dataType: 'JSON',
        data: null,
        params: null,
        cache: true
    };

    //=>基于PROMISE設計模式管理AJAX請求
    let ajaxPromise = function ajaxPromise(options) {
        let {url, baseURL, method, data, dataType, headers, cache, params} = options;

        //=>把傳遞的參數進一步進行處理
        if (/^(GET|DELETE|HEAD|OPTIONS)$/i.test(method)) {
            //=>GET系列
            if (params) {
                url += `${ajaxPromise.check(url)}${ajaxPromise.formatData(params)}`;
            }
            if (cache === false) {
                url += `${ajaxPromise.check(url)}_=${+(new Date())}`;
            }
            data = null;//=>請求主體清空
        } else {
            //=>POST系列
            if (data) {
                data = ajaxPromise.formatData(data);
            }
        }

        //=>基于PROMISE發送AJAX
        return new Promise((resolve, reject) => {
            let xhr = new XMLHttpRequest;
            xhr.open(method, `${baseURL}${url}`);
            //=>如果HEADERS存在,我們需要設置請求頭
            if (headers !== null && typeof headers === 'object') {
                for (let attr in headers) {
                    if (headers.hasOwnProperty(attr)) {
                        let val = headers[attr];
                        if (/[\u4e00-\u9fa5]/.test(val)) {
                            //=>VAL中包含中文:我們把它進行編碼
                            val = encodeURIComponent(val);
                        }
                        xhr.setRequestHeader(attr, val);
                    }
                }
            }
            xhr.onreadystatechange = () => {
                if (xhr.readyState === 4) {
                    if (/^(2|3)\d{2}$/.test(xhr.status)) {
                        let result = xhr.responseText;
                        dataType = dataType.toUpperCase();
                        dataType === 'JSON' ? result = JSON.parse(result) : (dataType === 'XML' ? result = xhr.responseXML : null);
                        resolve(result);
                        return;
                    }
                    reject(xhr.statusText);
                }
            };
            xhr.send(data);
        });
    };

    //=>把默認配置暴露出去,后期用戶在使用的時候可以自己設置一些基礎的默認值(發送AJAX請求的時候按照用戶配置的信息進行處理)
    ajaxPromise.defaults = _default;

    //=>把對象轉換為URLENCODED格式的字符串
    ajaxPromise.formatData = function formatData(obj) {
        let str = ``;
        for (let attr in obj) {
            if (obj.hasOwnProperty(attr)) {
                str += `${attr}=${obj[attr]}&`;
            }
        }
        return str.substring(0, str.length - 1);
    };
    ajaxPromise.check = function check(url) {
        return url.indexOf('?') > -1 ? '&' : '?';
    };

    ['get', 'delete', 'head', 'options'].forEach(item => {
        ajaxPromise[item] = function(url, options = {}) {
            options = {
                ..._default,//=>默認值或者基于defaults修改的值
                ...options,//=>用戶調取方法傳遞的配置項
                url: url,//=>請求的URL地址(第一個參數:默認配置項和傳遞的配置項中都不會出現URL,只能這樣獲取)
                method: item.toUpperCase()
            };
            return ajaxPromise(options);
        };
    });

    ['post', 'put', 'patch'].forEach(item => {
        ajaxPromise[item] = function anonymous(url, data = {}, options = {}) {
            options = {
                ..._default,
                ...options,
                url: url,
                method: item.toUpperCase(),
                data: data
            };
            return ajaxPromise(options);
        };
    });

    window.ajaxPromise = ajaxPromise;
})(window);
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 走得慢 沒關系 至少依舊在前進 只是某一刻 覺得好孤單 原地踏步時 恍然驚覺 伙伴已走遠
    蝸牛sister閱讀 399評論 4 1
  • 我不得不承認,在骨子里,我仍是個很要強的人 我也不能否認,在心底深處,我仍希望可以跌入一個溫暖的懷抱 可是,人生 ...
    lucy大人閱讀 808評論 10 49
  • 今天吃過中午飯的時候,我看到爸爸媽媽忙的不可開交,便自告奮勇地對他們說:“今天我要替你們刷碗!” ...
    趙藝萌閱讀 216評論 0 2
  • 一,激發潛能矯正近視原理是什么? 近視原因 近視是因為長期看近,睫狀肌失去彈性或彈性不足,不能拉動晶狀體變薄...
    瞳瞳復原閱讀 324評論 0 0