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

更新時間：2022年11月16日 11:12:23 作者：堅毅的小解同志

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

XHR的基本使用

什么是XHR

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

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

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

        //創(chuàng)建xhr對象
        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對象的readyState屬性

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

值	狀態(tài)	描述
0	UNSENT	XMLHttpRequest對象已被創(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ù)接受中，此時response屬性中已經(jīng)包含部分數(shù)據(jù)
4	DONE	Ajax請求完成，這意味著數(shù)據(jù)傳輸已經(jīng)徹底完成或失敗

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

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

        //創(chuàng)建xhr對象
        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)的字母，標點符號，數(shù)字，因此。在URL地址中不允許出現(xiàn)中文字符。
如果URL中需要包含中文這樣的字符，則必須對中文字符進行編碼（轉(zhuǎn)義）。
URL編碼的原則，使用安全的字符，（沒有特殊用途或者特殊意義的可打印字符）去表示那些不安全的字符。

如何對URL進行編碼與解碼

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

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

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

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

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

        //創(chuàng)建xhr對象
        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ù)器端與客戶端之間進行數(shù)據(jù)傳輸與交換的格式.

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

XML

什么是XML

xml的英文全稱是EXtensible Markup Language，即可擴展標記語言，因此，XML和HTML類似，也是一種標記語言。

XML和HTML的區(qū)別

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

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

XML的缺點

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

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

JSON

什么是JSON

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

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

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

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

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

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

JSON語法的注意事項

1.屬性名必須使用雙引號包裹。

2.字符串類型的值必須使用雙引號包裹

3.JSON中不允許使用單引號表示字符串

4.JSON中不能寫注釋

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

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

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

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

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

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

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

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

要實現(xiàn)從JSON字符串轉(zhuǎn)換為js對象，使用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);
            }
        }

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

序列化和反序列化

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

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

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

要實現(xiàn)的效果

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

定義options參數(shù)選項

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

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

處理data參數(shù)

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

function resolveData(data) {
    var arr = [];
    for (const k in data) {
        //這里說一下對象的調(diào)用方法，對象調(diào)用可以使用【】和點，這里的對象調(diào)用需要用【】的，k是字符串，點后面不能是字符串，所以不能直接data.k，
        //我們可以先進行字符串鏈接data.k再使用eval方法進行解析，就可以使用點調(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ù)中，需要創(chuàng)建xhr對象，并監(jiān)聽onreadystatechange事件。

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

        }
    }
}

判斷請求的類型

不同的請求類型，對應(yīng)的xhr對象的不同操作，因此需要對請求類型進行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的缺點

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

xhr levle2的新特性

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

設(shè)置http請求時限。

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

xhr.timeout = 3000

上面的語句，將最長等待時間設(shè)為3000毫秒，過了這個時限，就自動停止http請求。與之配套的還有一個timeout事件，用來指定回調(diào)函數(shù)。

xhr.ontimeout = function(event){
alert('請求超時')
}

        let xhr = new XMLHttpRequest();
       xhr.timeout = 30;
       xhr.ontimeout = function () {
           console.log(請求超時);
       }
       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對象管理表單數(shù)據(jù)

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

        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對象也可以用來獲取網(wǎng)頁表單的值，不用通過serialize（）方法轉(zhuǎn)換，可以獲取值后可以直接使用，不用通過示例代碼如下：

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

            //創(chuàng)建對象，獲取數(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對象，不僅可以發(fā)送文本信息，還可以上傳文件。

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

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

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

驗證是否選擇了文件

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

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

向FormData中追加文件

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

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

           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);
                    }
                }
            }

顯示文件上傳進度

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

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

美化進度顯示

 <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è)置進度條
$('#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 () {
            //獲取用戶選擇的文件屬性，是一個數(shù)組。
            let files = document.querySelector('#file1').files;
            if (files.length <= 0) {
                return alert('請選擇要上傳的文件')
            }
            //表單中添加相應(yīng)的數(shù)據(jù)
            let fd = new FormData()
            fd.append('tupian', files[0])
            //使用xhr發(fā)起上傳文件的請求
            let xhr = new XMLHttpRequest();
            //監(jiān)聽上傳進度
            xhr.upload.onprogress = function (e) {
                if (e.lengthComputable) {
                    let uploadProgroess = Math.ceil((e.loaded / e.total) * 100)
                    console.log(uploadProgroess);
                    //設(shè)置進度條
                    $('#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>

請?zhí)砑訄D片描述