xhr的基本使用
什么是xhr
xhr是瀏覽器提供的javascript對象，通過它，可以請求服務器上的數(shù)據資源，之前所學的jquery的ajax函數(shù)，就是基于xhr對象封裝出來的。
使用xhr發(fā)起get請求
步驟
1.創(chuàng)建xhr對象
2.使用xhr.open（）函數(shù)
3.調用xhr.send（）函數(shù)
4.監(jiān)聽xhr.onreadystatechange事件。
//創(chuàng)建xhr對象
let xhr = new xmlhttprequest();
//調用open函數(shù)
xhr.open('get', 'http://www.liulongbin.top:3006/api/getbooks')
//調用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) | 描述 |
|---|---|---|
| 0 | unsent | xmlhttprequest對象已被創(chuàng)建，但尚未調用open方法。 |
| 1 | opened | open()方法已經被調用 |
| 2 | headers_received | send（）方法已經被調用，響應頭也已經接受 |
| 3 | loading | 數(shù)據接受中，此時response屬性中已經包含部分數(shù)據 |
| 4 | done | ajax請求完成，這意味著數(shù)據傳輸已經徹底完成或失敗 |
使用xhr發(fā)起帶參數(shù)的get請求
使用xhr對象發(fā)起帶參數(shù)的get請求時，只需在調用xhr.open期間，為url地址指定參數(shù)即可，在地址后面寫上?后面以鍵值對的形式寫上數(shù)據,多個數(shù)據用&連接。
//創(chuàng)建xhr對象
let xhr = new xmlhttprequest();
//調用open函數(shù)
xhr.open('get', 'http://www.liulongbin.top:3006/api/getbooks?id=1')
//調用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中需要包含中文這樣的字符，則必須對中文字符進行編碼（轉義）。
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.調用xhr.open（）函數(shù)
3.設置content-type屬性（固定寫法）
4.調用xhr.send（）函數(shù)。同時指定要發(fā)送的數(shù)據。
5.監(jiān)聽xhr.onreadystatechange事件
//創(chuàng)建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函數(shù)
xhr.send('bookname=水滸傳&author=施耐庵&publisher=上海圖書出版社')
//監(jiān)聽事件
xhr.onreadystatechange = function () {
if (xhr.readystate === 4 && xhr.status === 200) {
console.log(xhr.responsetext);
}
}
數(shù)據交換格式
什么是數(shù)據交換格式
數(shù)據交換格式，就是服務器端與客戶端之間進行數(shù)據傳輸與交換的格式.
前端領域，經常提及的兩種數(shù)據交換格式分別是xml和json。其中xml用的非常少，所以，我們重點要學習的數(shù)據交換格式json。
xml
什么是xml
xml的英文全稱是extensible markup language，即可擴展標記語言，因此，xml和html類似，也是一種標記語言。
xml和html的區(qū)別
xml和html雖然都是標記語言，但是，他們兩者之間沒有任何的關系。
- html被設計用來描述網頁上的內容，是網頁內容的載體
- xml被設計用來傳輸和存儲數(shù)據，是數(shù)據的載體
xml的缺點
1.xml格式臃腫，和數(shù)據無關的代碼多，體積大，傳輸效率低。
2.在javascript中解析xml比較麻煩。
json
什么是json
概念：json的英文全稱是javascript object notation，即 javascript對象表示法。簡單來講，json就是javascript對象和數(shù)組的字符串表示法，它使用文本表示一個js對象或數(shù)組的信息，因此，json的本質是字符串。
作用：json是一種輕量級的文本數(shù)據交換格式，在作用上類似xml，專門用于存儲和傳輸數(shù)據，單是json比xml更小，更快，更易解析。
現(xiàn)狀：json是在2001年開始被推廣和使用的數(shù)據格式，到現(xiàn)今為止，json已經成為了主流的數(shù)據交換格式。
json的兩種結構
json就是用字符串來表示javascript的對象和數(shù)組兩種結構，通過這兩種結構的相互嵌套，可以表示各種復雜的數(shù)據結構。
- 對象結構：對象結構在json中表示為{}括起來的內容，數(shù)據結構為{key:value,key:value,…}的鍵值對結構，其中，key必須是使用英文的雙引號包裹的字符串，value的數(shù)據類型可以是數(shù)字，字符串，布爾值，null，數(shù)組，對象六種類型。
- 數(shù)組結構：數(shù)組結構在json中表示為[]括起來的內容，數(shù)據結構為[‘java’,‘javascript’,30,true]，數(shù)組中數(shù)據的類型可以是數(shù)字，字符串，布爾值，null，數(shù)組，對象6種類型。
json語法的注意事項
1.屬性名必須使用雙引號包裹。
2.字符串類型的值必須使用雙引號包裹
3.json中不允許使用單引號表示字符串
4.json中不能寫注釋
5.json的最外層必須是對象或數(shù)組格式。
6.不能使用undefined或函數(shù)作為json的值
json的作用：在計算機與網絡之間存儲和傳輸數(shù)據。
json的本質：用字符串來表示javascript對象數(shù)據或數(shù)組數(shù)據。
json和js對象的關系
json是js對象的字符串表示法，它使用文本表示一個js對象的信息，本質是一個字符串。例如：
var jsobj ={a:'hello',b:'world'}
var jsonstr = '{'a':'hello','b':'world'}'
json和js對象的互轉
要實現(xiàn)從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);
}
}
要實現(xiàn)從js對象轉換為json字符串，使用json.stringify（）方法：
序列化和反序列化
把數(shù)據對象轉換為字符串的過程，叫做序列化，例如：調用json.stringify（）函數(shù)的操作，叫做json序列化。
把字符串轉換為數(shù)據對象的過程，叫做反序列化，例如：調用json.parse（）函數(shù)的操作，叫做json的反序列化。
封裝自己的ajax函數(shù)
要實現(xiàn)的效果
定義一個名為itheima的ajax函數(shù)，導入js文件之后，可以進行調用文件內的相關函數(shù)。
定義options參數(shù)選項
itheima（）函數(shù)是我們自定義的ajax函數(shù)，它接受一個配置對象作為參數(shù)，配置對象中可以配置如下屬性：
- method 請求的類型
- url 請求的url地址
- data 請求攜帶的數(shù)據
- success 請求成功之后的回調函數(shù)
處理data參數(shù)
需要把data對象，轉化成查詢字符串的格式，從而提交給服務器，因此提前定義resolvedata函數(shù)如下：
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函數(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的缺點
xhr levle2的新特性
- 可以設置http請求的時限。
- 可以使用formdata對象管理表單數(shù)據
- 可以上傳文件
- 可以獲得數(shù)據傳輸?shù)倪M度信息。
設置http請求時限。
有時，ajax操作很耗時，而且無法預知要花多少時間。如果網速很慢，用戶可能要等很久，新版本的xhr對象，增加了timeout屬性，可以設置http請求的時限：
xhr.timeout = 3000
上面的語句，將最長等待時間設為3000毫秒，過了這個時限，就自動停止http請求。與之配套的還有一個timeout事件，用來指定回調函數(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ù)據
ajax操作往往用來提交表單數(shù)據。為了方便表單處理，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();
//創(chuàng)建對象，獲取數(shù)據。
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結構
- 驗證是否選擇了文件
- 向formdata中追加文件
- 使用xhr發(fā)起上傳文件的請求
- 監(jiān)聽onreadystatechange事件
定義ui結構
<!-- 文件選擇框 -->
<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">
//設置進度條
$('#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('請選擇要上傳的文件')
}
//表單中添加相應的數(shù)據
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>
總結
到此這篇關于原生ajax之全面了解xhr的概念與使用的文章就介紹到這了,更多相關原生ajax xhr概念與使用內容請搜索碩編程以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持碩編程！
學習AJAX