文章詳情頁

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

瀏覽：28日期：2022-06-12 08:22:58

XHR的基本使用

什么是XHR

xhr是瀏覽器提供的JavaScript對象，通過它，可以請求服務器上的數(shù)據(jù)資源，之前所學的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屬性，用來表示當前Ajax請求所處的狀態(tài)，每個Ajax請求必然處于一下狀態(tài)中的一個：

值狀態(tài)描述0UNSENTXMLHttpRequest對象已被創(chuàng)建，但尚未調(diào)用open方法。1OPENEDopen()方法已經(jīng)被調(diào)用2HEADERS_RECEIVEDsend（）方法已經(jīng)被調(diào)用，響應頭也已經(jīng)接受3LOADING數(shù)據(jù)接受中，此時response屬性中已經(jīng)包含部分數(shù)據(jù)4DONEAjax請求完成，這意味著數(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)英文相關的字母，標點符號，數(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.設置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");//設置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ù)交換格式，就是服務器端與客戶端之間進行數(shù)據(jù)傳輸與交換的格式.

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

XML

什么是XML

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

XML和HTML的區(qū)別

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

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

XML的缺點

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

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)的相互嵌套，可以表示各種復雜的數(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)絡之間存儲和傳輸數(shù)據(jù)。

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

JSON和JS對象的關系

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ù)，導入js文件之后，可以進行調(diào)用文件內(nèi)的相關函數(shù)。

定義options參數(shù)選項

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

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

處理data參數(shù)

需要把data對象，轉(zhuǎn)化成查詢字符串的格式，從而提交給服務器，因此提前定義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)}    }}

判斷請求的類型

不同的請求類型，對應的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);   }

xhr level2的新特性

舊版xhr的缺點

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

xhr levle2的新特性

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

設置http請求時限。

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

xhr.timeout = 3000

上面的語句，將最長等待時間設為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="" 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"  crossorigin="anonymous"> //設置進度條$("#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"  crossorigin="anonymous"></head><body>    <!-- 文件選擇框 -->    <input type="file" id="file1">    <!-- 上傳文件的按鈕 -->    <button id="btnUpload">上傳文件</button>    <br>    <img src="" id="img" width="800">    <div><div 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("請選擇要上傳的文件")    }    //表單中添加相應的數(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);    //設置進度條    $("#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>

總結(jié)

到此這篇關于原生Ajax之全面了解xhr的概念與使用的文章就介紹到這了,更多相關原生Ajax xhr概念與使用內(nèi)容請搜索以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持！

Ajax

上一條：如何通過axios發(fā)起Ajax請求(最新推薦)下一條：Ajax?請求隊列解決方案并結(jié)合elementUi做全局加載狀態(tài)

排行榜

					
					JS正則表達式常見函數(shù)與用法小結(jié)
django實現(xiàn)模型字段動態(tài)choice的操作
python pandas模糊匹配 讀取Excel后 獲取指定指標的操作
springboot中的springSession的存儲和獲取實現(xiàn)
python switch 實現(xiàn)多分支選擇功能
IDEA快速搭建jsp項目的圖文教程
Django 解決model 反向引用中的related_name問題
IntelliJ IDEA調(diào)整字體大小的方法
使用UML編寫Java應用程序 (1)
ASP.NET Core 5.0中的Host.CreateDefaultBuilder執(zhí)行過程解析
php測試程序運行速度和頁面執(zhí)行速度的代碼
				