原生Ajax之全面了解xhr的概念與使用

更新時(shí)間：2022年11月16日 11:12:23 作者：堅(jiān)毅的小解同志

AJAX 是與服務(wù)器交換數(shù)據(jù)并更新部分網(wǎng)頁(yè)的藝術(shù),在不重新加載整個(gè)頁(yè)面的情況下,通過(guò)在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換,AJAX 可以使網(wǎng)頁(yè)實(shí)現(xiàn)異步更新,下面這篇文章主要給大家介紹了關(guān)于原生Ajax之全面了解xhr的概念與使用的相關(guān)資料,需要的朋友可以參考下

XHR的基本使用

什么是XHR

xhr是瀏覽器提供的JavaScript對(duì)象，通過(guò)它，可以請(qǐng)求服務(wù)器上的數(shù)據(jù)資源，之前所學(xué)的jquery的ajax函數(shù)，就是基于xhr對(duì)象封裝出來(lái)的。

使用xhr發(fā)起GET請(qǐng)求

步驟
1.創(chuàng)建xhr對(duì)象
2.使用xhr.open（）函數(shù)
3.調(diào)用xhr.send（）函數(shù)
4.監(jiān)聽xhr.onreadystatechange事件。

        //創(chuàng)建xhr對(duì)象
        let xhr = new XMLHttpRequest();
        //調(diào)用open函數(shù)
        xhr.open('get', 'http://www.liulongbin.top:3006/api/getbooks')
        //調(diào)用send函數(shù)
        xhr.send()
        //監(jiān)聽事件
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                //獲取成功
                console.log(xhr.responseText);
            }
        }

了解xhr對(duì)象的readyState屬性

XHR對(duì)象的readyState屬性，用來(lái)表示當(dāng)前Ajax請(qǐng)求所處的狀態(tài)，每個(gè)Ajax請(qǐng)求必然處于一下狀態(tài)中的一個(gè)：

值	狀態(tài)	描述
0	UNSENT	XMLHttpRequest對(duì)象已被創(chuàng)建，但尚未調(diào)用open方法。
1	OPENED	open()方法已經(jīng)被調(diào)用
2	HEADERS_RECEIVED	send（）方法已經(jīng)被調(diào)用，響應(yīng)頭也已經(jīng)接受
3	LOADING	數(shù)據(jù)接受中，此時(shí)response屬性中已經(jīng)包含部分?jǐn)?shù)據(jù)
4	DONE	Ajax請(qǐng)求完成，這意味著數(shù)據(jù)傳輸已經(jīng)徹底完成或失敗

使用xhr發(fā)起帶參數(shù)的GET請(qǐng)求

使用xhr對(duì)象發(fā)起帶參數(shù)的get請(qǐng)求時(shí)，只需在調(diào)用xhr.open期間，為URL地址指定參數(shù)即可，在地址后面寫上?后面以鍵值對(duì)的形式寫上數(shù)據(jù),多個(gè)數(shù)據(jù)用&連接。

        //創(chuàng)建xhr對(duì)象
        let xhr = new XMLHttpRequest();
        //調(diào)用open函數(shù)
        xhr.open('get', 'http://www.liulongbin.top:3006/api/getbooks?id=1')
        //調(diào)用send函數(shù)
        xhr.send()
        //監(jiān)聽事件
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                //獲取成功
                console.log(xhr.responseText);
            }
        }

URL編碼與解碼

什么是URL編碼

URL地址中，只允許出現(xiàn)英文相關(guān)的字母，標(biāo)點(diǎn)符號(hào)，數(shù)字，因此。在URL地址中不允許出現(xiàn)中文字符。
如果URL中需要包含中文這樣的字符，則必須對(duì)中文字符進(jìn)行編碼（轉(zhuǎn)義）。
URL編碼的原則，使用安全的字符，（沒(méi)有特殊用途或者特殊意義的可打印字符）去表示那些不安全的字符。

如何對(duì)URL進(jìn)行編碼與解碼

瀏覽器提供了URL編碼與解碼的API，分別是：

encodeURI（）編碼的函數(shù)
decodeURI（）解碼的函數(shù)

        let str = '黑馬程序員';
        let str2 = encodeURI(str)
        console.log(str2);
        //utf-8一個(gè)漢字占三個(gè)字節(jié) ，寫六個(gè)是黑馬兩個(gè)字。
        let str3 = decodeURI('%E9%BB%91%E9%A9%AC')
        let str4 = decodeURI(str2)
        console.log(str3);
        console.log(str4);

使用xhr發(fā)起post請(qǐng)求

步驟
1.創(chuàng)建xhr對(duì)象
2.調(diào)用xhr.open（）函數(shù)
3.設(shè)置Content-Type屬性（固定寫法）
4.調(diào)用xhr.send（）函數(shù)。同時(shí)指定要發(fā)送的數(shù)據(jù)。
5.監(jiān)聽xhr.onreadystatechange事件

        //創(chuàng)建xhr對(duì)象
        let xhr = new XMLHttpRequest();
        //調(diào)用open（）
        xhr.open('post', 'http://www.liulongbin.top:3006/api/addbook');
        //設(shè)置Content-Type（固定寫法）
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

        //調(diào)用send函數(shù)
        xhr.send('bookname=水滸傳&author=施耐庵&publisher=上海圖書出版社')
        //監(jiān)聽事件
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                console.log(xhr.responseText);
            }
        }

數(shù)據(jù)交換格式

什么是數(shù)據(jù)交換格式

數(shù)據(jù)交換格式，就是服務(wù)器端與客戶端之間進(jìn)行數(shù)據(jù)傳輸與交換的格式.

前端領(lǐng)域，經(jīng)常提及的兩種數(shù)據(jù)交換格式分別是XML和JSON。其中XML用的非常少，所以，我們重點(diǎn)要學(xué)習(xí)的數(shù)據(jù)交換格式JSON。

XML

什么是XML

xml的英文全稱是EXtensible Markup Language，即可擴(kuò)展標(biāo)記語(yǔ)言，因此，XML和HTML類似，也是一種標(biāo)記語(yǔ)言。

XML和HTML的區(qū)別

xml和html雖然都是標(biāo)記語(yǔ)言，但是，他們兩者之間沒(méi)有任何的關(guān)系。

HTML被設(shè)計(jì)用來(lái)描述網(wǎng)頁(yè)上的內(nèi)容，是網(wǎng)頁(yè)內(nèi)容的載體
XML被設(shè)計(jì)用來(lái)傳輸和存儲(chǔ)數(shù)據(jù)，是數(shù)據(jù)的載體

XML的缺點(diǎn)

1.XML格式臃腫，和數(shù)據(jù)無(wú)關(guān)的代碼多，體積大，傳輸效率低。

2.在JavaScript中解析XML比較麻煩。

JSON

什么是JSON

概念：JSON的英文全稱是JavaScript Object Notation，即 JavaScript對(duì)象表示法。簡(jiǎn)單來(lái)講，JSON就是JavaScript對(duì)象和數(shù)組的字符串表示法，它使用文本表示一個(gè)JS對(duì)象或數(shù)組的信息，因此，JSON的本質(zhì)是字符串。

作用：JSON是一種輕量級(jí)的文本數(shù)據(jù)交換格式，在作用上類似XML，專門用于存儲(chǔ)和傳輸數(shù)據(jù)，單是JSON比XML更小，更快，更易解析。

現(xiàn)狀：JSON是在2001年開始被推廣和使用的數(shù)據(jù)格式，到現(xiàn)今為止，JSON已經(jīng)成為了主流的數(shù)據(jù)交換格式。

JSON的兩種結(jié)構(gòu)

JSON就是用字符串來(lái)表示JavaScript的對(duì)象和數(shù)組兩種結(jié)構(gòu)，通過(guò)這兩種結(jié)構(gòu)的相互嵌套，可以表示各種復(fù)雜的數(shù)據(jù)結(jié)構(gòu)。

對(duì)象結(jié)構(gòu)：對(duì)象結(jié)構(gòu)在JSON中表示為{}括起來(lái)的內(nèi)容，數(shù)據(jù)結(jié)構(gòu)為{key:value,key:value,…}的鍵值對(duì)結(jié)構(gòu)，其中，key必須是使用英文的雙引號(hào)包裹的字符串，value的數(shù)據(jù)類型可以是數(shù)字，字符串，布爾值，null，數(shù)組，對(duì)象六種類型。
數(shù)組結(jié)構(gòu)：數(shù)組結(jié)構(gòu)在JSON中表示為[]括起來(lái)的內(nèi)容，數(shù)據(jù)結(jié)構(gòu)為[‘java’,‘javascript’,30,true]，數(shù)組中數(shù)據(jù)的類型可以是數(shù)字，字符串，布爾值，null，數(shù)組，對(duì)象6種類型。

JSON語(yǔ)法的注意事項(xiàng)

1.屬性名必須使用雙引號(hào)包裹。

2.字符串類型的值必須使用雙引號(hào)包裹

3.JSON中不允許使用單引號(hào)表示字符串

4.JSON中不能寫注釋

5.JSON的最外層必須是對(duì)象或數(shù)組格式。

6.不能使用undefined或函數(shù)作為JSON的值

JSON的作用：在計(jì)算機(jī)與網(wǎng)絡(luò)之間存儲(chǔ)和傳輸數(shù)據(jù)。

JSON的本質(zhì)：用字符串來(lái)表示JavaScript對(duì)象數(shù)據(jù)或數(shù)組數(shù)據(jù)。

JSON和JS對(duì)象的關(guān)系

JSON是js對(duì)象的字符串表示法，它使用文本表示一個(gè)js對(duì)象的信息，本質(zhì)是一個(gè)字符串。例如：

var jsobj ={a:'hello',b:'world'}
var jsonstr = '{'a':'hello','b':'world'}'

JSON和JS對(duì)象的互轉(zhuǎn)

要實(shí)現(xiàn)從JSON字符串轉(zhuǎn)換為js對(duì)象，使用JSON.parse（）方法；

        var xhr = new XMLHttpRequest();
        xhr.open('get', 'http://www.liulongbin.top:3006/api/getbooks');
        xhr.send();
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                console.log(xhr.responseText);
                var restr = JSON.parse(xhr.responseText)
                console.log(restr);
            }
        }

要實(shí)現(xiàn)從JS對(duì)象轉(zhuǎn)換為JSON字符串，使用JSON.stringify（）方法：

序列化和反序列化

把數(shù)據(jù)對(duì)象轉(zhuǎn)換為字符串的過(guò)程，叫做序列化，例如：調(diào)用JSON.stringify（）函數(shù)的操作，叫做JSON序列化。

把字符串轉(zhuǎn)換為數(shù)據(jù)對(duì)象的過(guò)程，叫做反序列化，例如：調(diào)用JSON.parse（）函數(shù)的操作，叫做JSON的反序列化。

封裝自己的Ajax函數(shù)

要實(shí)現(xiàn)的效果

定義一個(gè)名為itheima的ajax函數(shù)，導(dǎo)入js文件之后，可以進(jìn)行調(diào)用文件內(nèi)的相關(guān)函數(shù)。

定義options參數(shù)選項(xiàng)

itheima（）函數(shù)是我們自定義的Ajax函數(shù)，它接受一個(gè)配置對(duì)象作為參數(shù)，配置對(duì)象中可以配置如下屬性：

method 請(qǐng)求的類型
url 請(qǐng)求的URL地址
data 請(qǐng)求攜帶的數(shù)據(jù)
success 請(qǐng)求成功之后的回調(diào)函數(shù)

處理data參數(shù)

需要把data對(duì)象，轉(zhuǎn)化成查詢字符串的格式，從而提交給服務(wù)器，因此提前定義resolveData函數(shù)如下：

function resolveData(data) {
    var arr = [];
    for (const k in data) {
        //這里說(shuō)一下對(duì)象的調(diào)用方法，對(duì)象調(diào)用可以使用【】和點(diǎn)，這里的對(duì)象調(diào)用需要用【】的，k是字符串，點(diǎn)后面不能是字符串，所以不能直接data.k，
        //我們可以先進(jìn)行字符串鏈接data.k再使用eval方法進(jìn)行解析，就可以使用點(diǎn)調(diào)用了
        // var str = k + '=' + eval("data." + k);
        var str = k + '=' + data[k];
        arr.push(str);
    }
    return arr.join('&')
}
var str = resolveData({ name: 'xiaoxie', age: 20 });
console.log(str);

定義itheima函數(shù)

在itheima（）函數(shù)中，需要?jiǎng)?chuàng)建xhr對(duì)象，并監(jiān)聽onreadystatechange事件。

function itheima(options) {
    let xhr = new XMLHttpRequest();
    let qs = resolveData(options.data)
--------判斷類型 發(fā)起請(qǐng)求 代碼--------------
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
         let result = JSON.parse(xhr.responseText)
            options.success(result)

        }
    }
}

判斷請(qǐng)求的類型

不同的請(qǐng)求類型，對(duì)應(yīng)的xhr對(duì)象的不同操作，因此需要對(duì)請(qǐng)求類型進(jìn)行if…else…的判斷。

    if (options.method.toUpperCase() === 'GET') {
       xhr.open('get', options.URL + '?' + qs)
        xhr.send();
   } else if (options.method.toUpperCase() === 'POST') {
       xhr.open('post', options.URL)
       xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
       xhr.send(qs);
   }

# 結(jié)果截圖

xhr level2的新特性

舊版xhr的缺點(diǎn)

只支持文本數(shù)據(jù)的傳輸，無(wú)法用來(lái)讀取和上傳文件。
傳送和接受數(shù)據(jù)時(shí)，沒(méi)有進(jìn)度信息，只能提示有沒(méi)有完成。

xhr levle2的新特性

可以設(shè)置http請(qǐng)求的時(shí)限。
可以使用formdata對(duì)象管理表單數(shù)據(jù)
可以上傳文件
可以獲得數(shù)據(jù)傳輸?shù)倪M(jìn)度信息。

設(shè)置http請(qǐng)求時(shí)限。

有時(shí)，Ajax操作很耗時(shí)，而且無(wú)法預(yù)知要花多少時(shí)間。如果網(wǎng)速很慢，用戶可能要等很久，新版本的xhr對(duì)象，增加了timeout屬性，可以設(shè)置http請(qǐng)求的時(shí)限：

xhr.timeout = 3000

上面的語(yǔ)句，將最長(zhǎng)等待時(shí)間設(shè)為3000毫秒，過(guò)了這個(gè)時(shí)限，就自動(dòng)停止http請(qǐng)求。與之配套的還有一個(gè)timeout事件，用來(lái)指定回調(diào)函數(shù)。

xhr.ontimeout = function(event){
alert('請(qǐng)求超時(shí)')
}

        let xhr = new XMLHttpRequest();
       xhr.timeout = 30;
       xhr.ontimeout = function () {
           console.log(請(qǐng)求超時(shí));
       }
       xhr.open('get', 'http://liulongbin.top:3006/api/getbooks')
       xhr.send()
       xhr.onreadystatechange = function () {
           if (xhr.readyState === 4 && xhr.status == 200) {
               console.log(xhr.responseText);
           }

       }

FormData對(duì)象管理表單數(shù)據(jù)

Ajax操作往往用來(lái)提交表單數(shù)據(jù)。為了方便表單處理，HTML5新增了一個(gè)FormData對(duì)象，可以模擬表單操作。

        let fd = new FormData();
        fd.append('uname', 'xiaoxie')
        fd.append('pwd', 123456)
        let xhr = new XMLHttpRequest();
        xhr.open('post', 'http://www.liulongbin.top:3006/api/formdata')
        xhr.send(fd);
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status == 200) {
                console.log(JSON.parse(xhr.responseText));
            }
        }

FormData對(duì)象也可以用來(lái)獲取網(wǎng)頁(yè)表單的值，不用通過(guò)serialize（）方法轉(zhuǎn)換，可以獲取值后可以直接使用，不用通過(guò)示例代碼如下：

        var form = document.querySelector('#form1')
        form.addEventListener('submit', function (e) {
            e.preventDefault();

            //創(chuàng)建對(duì)象，獲取數(shù)據(jù)。
            let fd = new FormData(form);

            let xhr = new XMLHttpRequest();

            xhr.open('post', 'http://www.liulongbin.top:3006/api/formdata')

            xhr.send(fd)
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    console.log(JSON.parse(xhr.responseText));
                }
            }
        })

上傳文件

新版xhr對(duì)象，不僅可以發(fā)送文本信息，還可以上傳文件。

定義ui結(jié)構(gòu)
驗(yàn)證是否選擇了文件
向FormData中追加文件
使用xhr發(fā)起上傳文件的請(qǐng)求
監(jiān)聽onreadystatechange事件

定義UI結(jié)構(gòu)

    <!-- 文件選擇框 -->
    <input type="file" id="file1">
    <!-- 上傳文件的按鈕 -->
    <button id="btnUpload"></button>
    <br>
    <img src="" alt="" id="img" width="800">

驗(yàn)證是否選擇了文件

        //獲取文件上傳按鈕
        let btn = document.getElementsByTagName('button')[0];
        //為按鈕綁定單擊事件處理函數(shù)
        btn.addEventListener('click', function () {
            //獲取用戶選擇的文件鼠標(biāo)
            let files = document.querySelector('#file1').files;

            if (files.length <= 0) {
                return alert('請(qǐng)選擇要上傳的文件')
            }
            console.log('用戶選擇了待上傳的文件');
        })

向FormData中追加文件

 let fd = new FormData()
  fd.append('avatar', files[0])

使用xhr發(fā)起上傳文件的請(qǐng)求

           let xhr = new XMLHttpRequest();
            xhr.open('post', 'http://www.liulongbin.top:3006/api/upload/avatar')
            xhr.send(fd)

監(jiān)聽onreadystatechange事件

            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    let data = JSON.parse(xhr.responseText)
                    if (data.status === 200) {
                        //上傳成功
                        alert('上傳成功')
                        document.getElementById('img').src = 'http://www.liulongbin.top:3006' + data.url
                    } else {
                        console.log('圖片上傳失敗' + data.message);
                    }
                }
            }

顯示文件上傳進(jìn)度

新版本的XHR對(duì)象中，可以通過(guò)監(jiān)聽xhr.upload.onprogress事件，來(lái)獲取到文件的上傳進(jìn)度，語(yǔ)法格式如下：

            //監(jiān)聽上傳進(jìn)度
            xhr.upload.onprogress = function (e) {
                if (e.lengthComputable) {
                    let uploadProgroess = Math.ceil((e.loaded / e.total) * 100)
                    console.log(uploadProgroess);
                }
            }

美化進(jìn)度顯示

 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
<link rel="stylesheet" 
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
 //設(shè)置進(jìn)度條
$('#percent').attr('style', 'width:' + uploadProgroess).html(uploadProgroess + '%')

完整代碼

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
    <link rel="stylesheet" 
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>

<body>
    <!-- 文件選擇框 -->
    <input type="file" id="file1">
    <!-- 上傳文件的按鈕 -->
    <button id="btnUpload">上傳文件</button>
    <br>
    <img src="" alt="" id="img" width="800">
    <div class="progress" style="width: 300px;">
        <div class="progress-bar progress-bar-striped active" style="width: 0%" id="percent">
            0%
        </div>
    </div>
    <script>
        //獲取文件上傳按鈕
        let btn = document.getElementsByTagName('button')[0];
        //為按鈕綁定單擊事件處理函數(shù)
        btn.addEventListener('click', function () {
            //獲取用戶選擇的文件屬性，是一個(gè)數(shù)組。
            let files = document.querySelector('#file1').files;
            if (files.length <= 0) {
                return alert('請(qǐng)選擇要上傳的文件')
            }
            //表單中添加相應(yīng)的數(shù)據(jù)
            let fd = new FormData()
            fd.append('tupian', files[0])
            //使用xhr發(fā)起上傳文件的請(qǐng)求
            let xhr = new XMLHttpRequest();
            //監(jiān)聽上傳進(jìn)度
            xhr.upload.onprogress = function (e) {
                if (e.lengthComputable) {
                    let uploadProgroess = Math.ceil((e.loaded / e.total) * 100)
                    console.log(uploadProgroess);
                    //設(shè)置進(jìn)度條
                    $('#percent').attr('style', 'width:' + uploadProgroess).html(uploadProgroess + '%')
                }
            }
            xhr.open('post', 'http://www.liulongbin.top:3006/api/upload/avatar')
            xhr.send(fd)
            //監(jiān)聽onreadystatechange事件
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    let data = JSON.parse(xhr.responseText)
                    if (data.status === 200) {
                        //上傳成功
                        alert('上傳成功')
                        document.getElementById('img').src = 'http://www.liulongbin.top:3006' + data.url
                    } else {
                        console.log('圖片上傳失敗' + data.message);
                    }
                }
            }
        })


    </script>
</body>

</html>

請(qǐng)?zhí)砑訄D片描述