應(yīng)用原生Ajax請求服務(wù)器數(shù)據(jù)
視頻
1、Ajax基本知識(shí)
(1) Ajax是異步的JavaScript和XML
(2) XML是可擴(kuò)展標(biāo)記語言
(3) Ajax不是新的編程語言，而是一種使用現(xiàn)有標(biāo)準(zhǔn)的新方法
(4) Ajax是與服務(wù)器交換數(shù)據(jù)并更新部分網(wǎng)頁的技術(shù)，并且不需要重新加載整個(gè)頁面
(5) Ajax可以是同步請求，也可以是異步請求。但是，大多數(shù)情況下，特指異步請求。因?yàn)橥降?/font>Ajax請求，對瀏覽器有阻塞效應(yīng)
(6) 常用請求類型有GET、POST請求
2、創(chuàng)建Ajax對象的流程步驟
(1) 創(chuàng)建Ajax對象
(2) 創(chuàng)建請求狀態(tài)變化監(jiān)聽事件接收服務(wù)器響應(yīng)的數(shù)據(jù)
(3) 創(chuàng)建服務(wù)器連接
(4) 向服務(wù)器發(fā)出HTTP請求
具體實(shí)現(xiàn)代碼如下：
//01-創(chuàng)建Ajax對象
var xhr = new XMLHttpRequest();
//02-創(chuàng)建請求狀態(tài)變化監(jiān)聽事件接收服務(wù)器響應(yīng)的數(shù)據(jù)
xhr.onreadystatechange = function () {
//獲取Ajax狀態(tài)碼
var statusCode = this.readyState;
//在最后一個(gè)階段獲取服務(wù)器響應(yīng)的數(shù)據(jù)
//當(dāng)ajax對象的狀態(tài)碼為4并且http狀態(tài)碼為200，就獲取服務(wù)器的數(shù)據(jù)
if (statusCode === 4 && this.status === 200) {
//獲取服務(wù)器響應(yīng)數(shù)據(jù)
var data = this.responseText;
console.log('data ==> ', data);
}
}
//03-建立服務(wù)器連接
//xhr.open(請求類型, 請求地址, 是否異步); 默認(rèn)為異步，true: 異步, false: 同步
//假設(shè)請求地址：http://127.0.0.1:10000/pro
xhr.open('GET', 'http://127.0.0.1:10000/pro', true);
//04-4-發(fā)起Ajax請求
xhr.send();
3、請求與響應(yīng)頭獲取與設(shè)置
(1) setRequestHeader()方法設(shè)置請求頭信息
(2) getAllResponseHeaders()方法返回服務(wù)器發(fā)來的所有HTTP頭信息
(3) getAllResponseHeaders()方法獲取所有響應(yīng)頭信息
(4) getResponseHeader方法返回HTTP頭信息指定字段的值，如果還沒有收到服務(wù)器回應(yīng)或者指定字段不存在，則該屬性為null
對于POST請求，需要設(shè)置請求頭，以便后臺(tái)服務(wù)器截取請求體
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');
4、Ajax請求狀態(tài)碼
(1) 0：請求未初始化，表示XMLHttpRequest實(shí)例已經(jīng)生成，但是open()方法還沒有被調(diào)用
(2) 1：服務(wù)器連接已經(jīng)建立，表示send()方法還沒有被調(diào)用，仍然可以使用setRequestHeader()，設(shè)定HTTP請求的頭信息
(3) 2：請求已接收，表示send()方法已經(jīng)執(zhí)行，并且頭信息和狀態(tài)碼已經(jīng)收到
(4) 3：請求處理中，表示正在接收服務(wù)器傳來的body部分的數(shù)據(jù)，如果responseType屬性是text或者空字符串，responseText就會(huì)包含已經(jīng)收到的部分信息
(5) 4：請求已經(jīng)完成，并且響應(yīng)成功，表示服務(wù)器數(shù)據(jù)已經(jīng)完全接收，或者本次接收已經(jīng)失敗了
5、常用的HTTP狀態(tài)碼
(1) 200，OK，訪問正常
(2) 301，Moved Permanently，永久移動(dòng)
(3) 302，Move temporarily，暫時(shí)移動(dòng)
(4) 304，Not Modified，未修改
(5) 307，Temporary Redirect，暫時(shí)重定向
(6) 401，Unauthorized，未授權(quán)
(7) 403，Forbidden，禁止訪問
(8) 404，Not Found，未發(fā)現(xiàn)指定網(wǎng)址
(9) 500，Internal Server Error，服務(wù)器發(fā)生錯(cuò)誤
(10) 502，Bad Gateway，無響應(yīng)網(wǎng)關(guān)/代理
6、補(bǔ)充Ajax知識(shí)
(1) xhr.withCredentials = true; 請求時(shí)攜帶cookie
(2) xhr.responseType = 'json'; 設(shè)置響應(yīng)數(shù)據(jù)類型, 默認(rèn)為text，在這需要注意，如果設(shè)置此項(xiàng)，需要通過xhr.response獲取服務(wù)器響應(yīng)的數(shù)據(jù)
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。