原生Ajax之全面了解xhr的概念與使用
目錄
- XHR的基本使用
- 什么是XHR
- 使用xhr發起GET請求
- 了解xhr對象的readyState屬性
- 使用xhr發起帶參數的GET請求
- URL編碼與解碼
- 什么是URL編碼
- 如何對URL進行編碼與解碼
- 使用xhr發起post請求
- 數據交換格式
- 什么是數據交換格式
- XML
- 什么是XML
- XML和HTML的區別
- XML的缺點
- JSON
- 什么是JSON
- JSON的兩種結構
- JSON語法的注意事項
- JSON和JS對象的關系
- JSON和JS對象的互轉
- 序列化和反序列化
- 封裝自己的Ajax函數
- 要實現的效果
- 處理data參數
- 定義itheima函數
- 判斷請求的類型
- xhr level2的新特性
- 舊版xhr的缺點
- xhr levle2的新特性
- 設置http請求時限。
- FormData對象管理表單數據
- 上傳文件
- 總結
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請求必然處于一下狀態中的一個：
使用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概念與使用內容請搜索以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持！
網公網安備