應(yīng)用原生Ajax請求服務(wù)器數(shù)據(jù)
視頻
1、Ajax基本知識
(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知識
(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)閱讀并接受
上述條款。