文章詳情頁

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

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

XHR的基本使用

什么是XHR

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

使用xhr發起GET請求

步驟
1.創建xhr對象
2.使用xhr.open（）函數
3.調用xhr.send（）函數
4.監聽xhr.onreadystatechange事件。

//創建xhr對象let xhr = new XMLHttpRequest();//調用open函數xhr.open("get", "http://www.liulongbin.top:3006/api/getbooks")//調用send函數xhr.send()//監聽事件xhr.onreadystatechange = function () {    if (xhr.readyState === 4 && xhr.status === 200) {//獲取成功console.log(xhr.responseText);    }}

了解xhr對象的readyState屬性

XHR對象的readyState屬性，用來表示當前Ajax請求所處的狀態，每個Ajax請求必然處于一下狀態中的一個：

值狀態描述0UNSENTXMLHttpRequest對象已被創建，但尚未調用open方法。1OPENEDopen()方法已經被調用2HEADERS_RECEIVEDsend（）方法已經被調用，響應頭也已經接受3LOADING數據接受中，此時response屬性中已經包含部分數據4DONEAjax請求完成，這意味著數據傳輸已經徹底完成或失敗

使用xhr發起帶參數的GET請求

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

//創建xhr對象let xhr = new XMLHttpRequest();//調用open函數xhr.open("get", "http://www.liulongbin.top:3006/api/getbooks?id=1")//調用send函數xhr.send()//監聽事件xhr.onreadystatechange = function () {    if (xhr.readyState === 4 && xhr.status === 200) {//獲取成功console.log(xhr.responseText);    }}

URL編碼與解碼

什么是URL編碼

URL地址中，只允許出現英文相關的字母，標點符號，數字，因此。在URL地址中不允許出現中文字符。
如果URL中需要包含中文這樣的字符，則必須對中文字符進行編碼（轉義）。
URL編碼的原則，使用安全的字符，（沒有特殊用途或者特殊意義的可打印字符）去表示那些不安全的字符。

如何對URL進行編碼與解碼

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

encodeURI（）編碼的函數
decodeURI（）解碼的函數

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

使用xhr發起post請求

步驟
1.創建xhr對象
2.調用xhr.open（）函數
3.設置Content-Type屬性（固定寫法）
4.調用xhr.send（）函數。同時指定要發送的數據。
5.監聽xhr.onreadystatechange事件

//創建xhr對象let xhr = new XMLHttpRequest();//調用open（）xhr.open("post", "http://www.liulongbin.top:3006/api/addbook");//設置Content-Type（固定寫法）xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//調用send函數xhr.send("bookname=水滸傳&author=施耐庵&publisher=上海圖書出版社")//監聽事件xhr.onreadystatechange = function () {    if (xhr.readyState === 4 && xhr.status === 200) {console.log(xhr.responseText);    }}

數據交換格式

什么是數據交換格式

數據交換格式，就是服務器端與客戶端之間進行數據傳輸與交換的格式.

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

XML

什么是XML

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

XML和HTML的區別

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

HTML被設計用來描述網頁上的內容，是網頁內容的載體
XML被設計用來傳輸和存儲數據，是數據的載體

XML的缺點

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

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

JSON

什么是JSON

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

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

現狀：JSON是在2001年開始被推廣和使用的數據格式，到現今為止，JSON已經成為了主流的數據交換格式。

JSON的兩種結構

JSON就是用字符串來表示JavaScript的對象和數組兩種結構，通過這兩種結構的相互嵌套，可以表示各種復雜的數據結構。

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

JSON語法的注意事項

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

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

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

4.JSON中不能寫注釋

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

6.不能使用undefined或函數作為JSON的值

JSON的作用：在計算機與網絡之間存儲和傳輸數據。

JSON的本質：用字符串來表示JavaScript對象數據或數組數據。

JSON和JS對象的關系

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

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

JSON和JS對象的互轉

要實現從JSON字符串轉換為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);    }}

要實現從JS對象轉換為JSON字符串，使用JSON.stringify（）方法：

序列化和反序列化

把數據對象轉換為字符串的過程，叫做序列化，例如：調用JSON.stringify（）函數的操作，叫做JSON序列化。

把字符串轉換為數據對象的過程，叫做反序列化，例如：調用JSON.parse（）函數的操作，叫做JSON的反序列化。

封裝自己的Ajax函數

要實現的效果

定義一個名為itheima的ajax函數，導入js文件之后，可以進行調用文件內的相關函數。

定義options參數選項

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

method 請求的類型
url 請求的URL地址
data 請求攜帶的數據
success 請求成功之后的回調函數

處理data參數

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

function resolveData(data) {    var arr = [];    for (const k in data) {//這里說一下對象的調用方法，對象調用可以使用【】和點，這里的對象調用需要用【】的，k是字符串，點后面不能是字符串，所以不能直接data.k，//我們可以先進行字符串鏈接data.k再使用eval方法進行解析，就可以使用點調用了// 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函數

在itheima（）函數中，需要創建xhr對象，并監聽onreadystatechange事件。

function itheima(options) {    let xhr = new XMLHttpRequest();    let qs = resolveData(options.data)--------判斷類型 發起請求 代碼--------------    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的缺點

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

xhr levle2的新特性

可以設置http請求的時限。
可以使用formdata對象管理表單數據
可以上傳文件
可以獲得數據傳輸的進度信息。

設置http請求時限。

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

xhr.timeout = 3000

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

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對象管理表單數據

Ajax操作往往用來提交表單數據。為了方便表單處理，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對象也可以用來獲取網頁表單的值，不用通過serialize（）方法轉換，可以獲取值后可以直接使用，不用通過示例代碼如下：

var form = document.querySelector("#form1")form.addEventListener("submit", function (e) {    e.preventDefault();    //創建對象，獲取數據。    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對象，不僅可以發送文本信息，還可以上傳文件。

定義ui結構
驗證是否選擇了文件
向FormData中追加文件
使用xhr發起上傳文件的請求
監聽onreadystatechange事件

定義UI結構

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

驗證是否選擇了文件

//獲取文件上傳按鈕let btn = document.getElementsByTagName("button")[0];//為按鈕綁定單擊事件處理函數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發起上傳文件的請求

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

監聽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對象中，可以通過監聽xhr.upload.onprogress事件，來獲取到文件的上傳進度，語法格式如下：

    //監聽上傳進度    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];//為按鈕綁定單擊事件處理函數btn.addEventListener("click", function () {    //獲取用戶選擇的文件屬性，是一個數組。    let files = document.querySelector("#file1").files;    if (files.length <= 0) {return alert("請選擇要上傳的文件")    }    //表單中添加相應的數據    let fd = new FormData()    fd.append("tupian", files[0])    //使用xhr發起上傳文件的請求    let xhr = new XMLHttpRequest();    //監聽上傳進度    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)    //監聽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>

總結

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

Ajax

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

排行榜

					
					ASP.NET MVC使用jQuery ui的progressbar實現進度條
Ajax對xml信息的接收和處理操作實例分析
Jsp中request的3個基礎實踐
Ajax返回值類型與用法實例分析
python簡單實現9宮格圖片實例
springboot 獲取訪問接口的請求的IP地址的實現
Java實戰之實現一個好用的MybatisPlus代碼生成器
php根據id生成10位不重復數字跟字母混合字符串
PHP輸入流php://input
ASP動態include文件
SpringBoot中配置Web靜態資源路徑的方法
				