JavaScript實(shí)現(xiàn)Ajax

binta 發(fā)布于2019-08-26 10:31 / 1119人閱讀

摘要：用于從網(wǎng)絡(luò)上獲取數(shù)據(jù)，有了對(duì)象，就可以實(shí)現(xiàn)頁(yè)面的無(wú)刷新請(qǐng)求數(shù)據(jù)，就可以做到一個(gè)局部的更新，也可以獲取多種類(lèi)型的數(shù)據(jù)文件。這篇文章主要是分享了中對(duì)象的基本屬性和方法從實(shí)例化初始化發(fā)送和接受四個(gè)階段完成了網(wǎng)絡(luò)請(qǐng)求核心內(nèi)容封裝。

1：基本概念

jQuery的Ajax請(qǐng)求實(shí)際上是封裝的一個(gè)XHLHttpRequest，從字面意思來(lái)看是，XML是一種文件格式，Http是一個(gè)網(wǎng)絡(luò)請(qǐng)求，Request最開(kāi)始是用于請(qǐng)求XML文件的，后來(lái)不斷擴(kuò)展可以請(qǐng)求多種類(lèi)型的文件。

XHLHttpRequest，網(wǎng)絡(luò)請(qǐng)求模塊，或者是一個(gè)瀏覽器網(wǎng)絡(luò)線程。用于從URL網(wǎng)絡(luò)上獲取數(shù)據(jù)，有了對(duì)象，就可以實(shí)現(xiàn)頁(yè)面的無(wú)刷新請(qǐng)求數(shù)據(jù)，就可以做到一個(gè)局部的更新，也可以獲取多種類(lèi)型的數(shù)據(jù)(ftp、文件)。

2：要實(shí)現(xiàn)和使用XMLHttpRequest

它是一個(gè)對(duì)象，首先我們需要實(shí)例化，定義一個(gè)：

    var xhr = new XMLHttpRequest();

3：初始化請(qǐng)求，給定一些必要的配置，給它一些property

    //Ajax請(qǐng)求時(shí)的參數(shù)設(shè)置
    method          請(qǐng)求方式
    url             請(qǐng)求地址
    async           是否異步
    user            用戶名
    password        密碼
    
    xhr.open(method,url,async,user,password);

4：發(fā)送請(qǐng)求(encodeURLComponent)

    xhr.send(data);
    等待接收

5：接收網(wǎng)絡(luò)請(qǐng)求返回

一般有如下屬性：

responseText，請(qǐng)求返回的數(shù)據(jù)內(nèi)容，可以是一段文本，是一段二進(jìn)制或者是一個(gè)json

responseXML，是一個(gè)文件，如果響應(yīng)頭內(nèi)容是text/xml，這個(gè)屬性將保留響應(yīng)數(shù)據(jù)的XML、DOM文檔。

status，響應(yīng)的HTTP狀態(tài)，如 200(正常，200-300之間都表示成功) 304(使用緩存) 404(沒(méi)找到) 500(服務(wù)器內(nèi)部錯(cuò)誤)等

statusText，HTTP狀態(tài)說(shuō)明

readyStatus，請(qǐng)求/響應(yīng)過(guò)程的當(dāng)前活動(dòng)階段，一共有5個(gè)值：0(未被調(diào)用open)，1(已被調(diào)用open但未發(fā)送)，2(已調(diào)用send)，3(已接收到請(qǐng)求返回的數(shù)據(jù))，4(請(qǐng)求已完成)。

timeout，設(shè)置請(qǐng)求超時(shí)時(shí)間

    xhr.onreadystatechange = () => {
        if (xhr.readyStatus === 4) {
            /* HTTP 狀態(tài)在 200-300 之間表示請(qǐng)求成功 */
            /* HTTP 狀態(tài)為 304 表示請(qǐng)求內(nèi)容未發(fā)生改變，可直接從緩存中讀取 */
            if (xhr.status >= 200 &&
                xhr.status < 300 ||
                xhr.status == 304) {
                console.log("請(qǐng)求成功", xhr.responseText)
            }
        }
    }

6：封裝(promise)

    function ajax (options) {
        /* 獲取請(qǐng)求地址 */
        let url = options.url;
        /* 獲取請(qǐng)求方法 */
        const method = options.method.toLocaleLowerCase() || "get";
        /* 默認(rèn)異步 */
        const async = options.async != false;
        /* 獲取請(qǐng)求request數(shù)據(jù) */
        const data = options.data;
        /* 實(shí)例化XMLHttpRequest */
        const xhr = new XMLHttpRequest();
        /* 設(shè)置超時(shí)時(shí)間 */
        if (options.timeout && options.timeout > 0) {
            xhr.timeout = options.timeout
        }
    
        return new Promise ( (resolve, reject) => {
            /* 添加超時(shí)回調(diào) */
            xhr.ontimeout = () => reject && reject("請(qǐng)求超時(shí)");
            /* 成功回調(diào) */
            xhr.onreadystatechange = () => {
                if (xhr.readyState == 4) {
                    if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
                        resolve && resolve(xhr.responseText);
                    } else {
                        reject && reject();
                    }
                }
            }
    
            /* 失敗回調(diào) */
            xhr.onerror = err => reject && reject(err);
    
            /* 拼接參數(shù) */
            let paramArr = [];
            let encodeData;
            if (data instanceof Object) {
                for (let key in data) {
                    paramArr.push( encodeURIComponent(key) + "=" + encodeURIComponent(data[key]) );
                }
                encodeData = paramArr.join("&");
            }
    
            /* get請(qǐng)求 */
            if (method === "get") {
                const index = url.indexOf("?")
                if (index === -1) url += "?"
                else if (index !== url.length -1) url += "&"
                url += encodeData
            }
    
            /* 初始化請(qǐng)求 */
            xhr.open(method, url, async);
    
            /* get直接發(fā)送拼接的URL */
            if (method === "get") xhr.send(null);
    
            if (method === "post") {
                xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8")
                xhr.send(encodeData)
            }
        })
    }

總結(jié)：
關(guān)于網(wǎng)絡(luò)請(qǐng)求，一般常用的有四種：

一個(gè)是get，獲取網(wǎng)絡(luò)資源

然后是post，一般用于提交數(shù)據(jù)，提交數(shù)據(jù)的參數(shù)是放在請(qǐng)求的body里面的

delete，刪除

put，標(biāo)準(zhǔn)的一個(gè)修改

關(guān)于Http的簡(jiǎn)單請(qǐng)求和非簡(jiǎn)單請(qǐng)求或者是跨域，在跨域時(shí)由于瀏覽器的安全機(jī)制，涉及到一個(gè)問(wèn)題關(guān)于在Ajax請(qǐng)求，是在請(qǐng)求之后還是請(qǐng)求之前判斷跨域，這時(shí)候就需要了解一下簡(jiǎn)單請(qǐng)求和復(fù)雜請(qǐng)求。

簡(jiǎn)單請(qǐng)求是先把資源請(qǐng)求回來(lái)，然后再去判斷是否跨域。如果是一個(gè)復(fù)雜請(qǐng)求，瀏覽器會(huì)先去發(fā)送一個(gè)嗅探或者是欲請(qǐng)求（一般是一個(gè)option），先判斷是否跨域，如果不是跨域那就執(zhí)行，如果是跨域那就直接不請(qǐng)求了。一般來(lái)講，如果get不修改它的Content-Type，那么基本上都是簡(jiǎn)單請(qǐng)求。post如果采用www-form的形式，也是一個(gè)簡(jiǎn)單請(qǐng)求。

這篇文章主要是分享了Javascript中XMLHttpRequest對(duì)象的基本屬性和方法, 從實(shí)例化、初始化、發(fā)送和接受四個(gè)階段完成了Ajax網(wǎng)絡(luò)請(qǐng)求核心內(nèi)容封裝。