應(yīng)用原生Ajax請(qǐng)求服務(wù)器數(shù)據(jù)
發(fā)布時(shí)間:2022-01-13 15:03 [ 我要自學(xué)網(wǎng)原創(chuàng) ] 發(fā)布人: 快樂(lè)小女

應(yīng)用原生Ajax請(qǐng)求服務(wù)器數(shù)據(jù)

視頻

1、Ajax基本知識(shí)

(1)Ajax是異步的JavaScriptXML

(2)XML是可擴(kuò)展標(biāo)記語(yǔ)言

(3)Ajax不是新的編程語(yǔ)言,而是一種使用現(xiàn)有標(biāo)準(zhǔn)的新方法

(4)Ajax是與服務(wù)器交換數(shù)據(jù)并更新部分網(wǎng)頁(yè)的技術(shù),并且不需要重新加載整個(gè)頁(yè)面

(5)Ajax可以是同步請(qǐng)求,也可以是異步請(qǐng)求。但是,大多數(shù)情況下,特指異步請(qǐng)求。因?yàn)橥降?/font>Ajax請(qǐng)求,對(duì)瀏覽器有阻塞效應(yīng)

(6)常用請(qǐng)求類型有GETPOST請(qǐng)求

2、創(chuàng)建Ajax對(duì)象的流程步驟

(1)創(chuàng)建Ajax對(duì)象

(2)創(chuàng)建請(qǐng)求狀態(tài)變化監(jiān)聽(tīng)事件接收服務(wù)器響應(yīng)的數(shù)據(jù)

(3)創(chuàng)建服務(wù)器連接

(4)向服務(wù)器發(fā)出HTTP請(qǐng)求

具體實(shí)現(xiàn)代碼如下:

//01-創(chuàng)建Ajax對(duì)象

var xhr = new XMLHttpRequest();

//02-創(chuàng)建請(qǐng)求狀態(tài)變化監(jiān)聽(tīng)事件接收服務(wù)器響應(yīng)的數(shù)據(jù)

xhr.onreadystatechange = function () {

//獲取Ajax狀態(tài)碼

  var statusCode = this.readyState;

       

  //在最后一個(gè)階段獲取服務(wù)器響應(yīng)的數(shù)據(jù)

  //當(dāng)ajax對(duì)象的狀態(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(請(qǐng)求類型, 請(qǐng)求地址, 是否異步); 默認(rèn)為異步,true: 異步, false: 同步

//假設(shè)請(qǐng)求地址:http://127.0.0.1:10000/pro

xhr.open('GET', 'http://127.0.0.1:10000/pro', true);

//04-4-發(fā)起Ajax請(qǐng)求

xhr.send();

3、請(qǐng)求與響應(yīng)頭獲取與設(shè)置

(1)setRequestHeader()方法設(shè)置請(qǐng)求頭信息

(2)getAllResponseHeaders()方法返回服務(wù)器發(fā)來(lái)的所有HTTP頭信息

(3)getAllResponseHeaders()方法獲取所有響應(yīng)頭信息

(4)getResponseHeader方法返回HTTP頭信息指定字段的值,如果還沒(méi)有收到服務(wù)器回應(yīng)或者指定字段不存在,則該屬性為null

對(duì)于POST請(qǐng)求,需要設(shè)置請(qǐng)求頭,以便后臺(tái)服務(wù)器截取請(qǐng)求體

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');

4、Ajax請(qǐng)求狀態(tài)碼

(1)0:請(qǐng)求未初始化,表示XMLHttpRequest實(shí)例已經(jīng)生成,但是open()方法還沒(méi)有被調(diào)用

(2)1:服務(wù)器連接已經(jīng)建立,表示send()方法還沒(méi)有被調(diào)用,仍然可以使用setRequestHeader(),設(shè)定HTTP請(qǐng)求的頭信息

(3)2:請(qǐng)求已接收,表示send()方法已經(jīng)執(zhí)行,并且頭信息和狀態(tài)碼已經(jīng)收到

(4)3:請(qǐng)求處理中,表示正在接收服務(wù)器傳來(lái)的body部分的數(shù)據(jù),如果responseType屬性是text或者空字符串,responseText就會(huì)包含已經(jīng)收到的部分信息

(5)4:請(qǐng)求已經(jīng)完成,并且響應(yīng)成功,表示服務(wù)器數(shù)據(jù)已經(jīng)完全接收,或者本次接收已經(jīng)失敗了

5、常用的HTTP狀態(tài)碼

(1)200,OK,訪問(wèn)正常

(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,禁止訪問(wèn)

(8)404,Not Found,未發(fā)現(xiàn)指定網(wǎng)址

(9)500,Internal Server Error,服務(wù)器發(fā)生錯(cuò)誤

(10)502,Bad Gateway,無(wú)響應(yīng)網(wǎng)關(guān)/代理

6、補(bǔ)充Ajax知識(shí)

(1)xhr.withCredentials = true; 請(qǐng)求時(shí)攜帶cookie

(2)xhr.responseType = 'json'; 設(shè)置響應(yīng)數(shù)據(jù)類型, 默認(rèn)為text,在這需要注意,如果設(shè)置此項(xiàng),需要通過(guò)xhr.response獲取服務(wù)器響應(yīng)的數(shù)據(jù)

H5移動(dòng)端天氣APP開(kāi)發(fā)教程
我要自學(xué)網(wǎng)商城 ¥40 元
進(jìn)入購(gòu)買
文章評(píng)論
0 條評(píng)論 按熱度排序 按時(shí)間排序 /350
添加表情
遵守中華人民共和國(guó)的各項(xiàng)道德法規(guī),
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任,
本站有權(quán)保留或刪除有爭(zhēng)議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。
V
特惠充值
聯(lián)系客服
APP下載
官方微信
返回頂部