Ajax原生實(shí)現(xiàn)

var xhr=new XMLHttpRequest()//聲明一個(gè)XMLHttpRequest對(duì)象
xhr.onreadystatechange=function(){//請(qǐng)求/響應(yīng)過(guò)程的當(dāng)前活動(dòng)階段
if(xhr.readyState==4){//數(shù)據(jù)接收完
  if(xhr.status>=200&&xhr.status<=300||xhr.status==304){//響應(yīng)數(shù)據(jù)自動(dòng)填充xhr對(duì)象屬性(status,statusText,responseText,responseXML)
    console.log(xhr.responseText)
    console.log(xhr.responseXML)
  }else{
    console.log("unsuccessful"+xhr.status)
  }
}
}
xhr.open("post","url",true)//開始請(qǐng)求open(請(qǐng)求類型,url,是否異步請(qǐng)求)
xhr.setRequestHeader("Origin","url")//發(fā)起XHR請(qǐng)求時(shí)默認(rèn)發(fā)送HTTP頭部(Accept等),這里自定義要添加的HTTP頭部信息
xhr.send({params:{}})//發(fā)送的參數(shù),如果沒有參數(shù)xhr.send(null),比如某些get請(qǐng)求

onreadystatechange事件:必須定義在open()之前

檢測(cè)XHR的readyState屬性,每次變化觸發(fā)onreadystatechange事件

readyState值:

0:未初始化,open未調(diào)用
1:?jiǎn)?dòng),open已調(diào)用,未調(diào)用send
2:發(fā)送,send已調(diào)用,未響應(yīng)
3:接收,接受部分?jǐn)?shù)據(jù)
4:完成,接受全部數(shù)據(jù)(主要使用)

數(shù)據(jù)響應(yīng)后,將屬性自動(dòng)填充到xhr對(duì)象:

status:http狀態(tài)碼
statusText:http狀態(tài)碼描述
responseText:響應(yīng)主體
responseXML:響應(yīng)類型如果是text/xml或application/xml

status狀態(tài)碼:200成功,如果是304表示沒有修改,可以直接使用瀏覽器緩存版本

open(請(qǐng)求類型,url,是否異步請(qǐng)求)

send({params})發(fā)送的參數(shù),如果沒有參數(shù)xhr.send(null),比如某些get請(qǐng)求

發(fā)起XHR請(qǐng)求時(shí)默認(rèn)發(fā)送HTTP頭部:因此可以自定義頭部

默認(rèn)頭部:
Accept:瀏覽器能夠處理的內(nèi)容類型
Accept-Charset:瀏覽器能夠顯示的字符集
Accept-Encoding:瀏覽器能夠處理的壓縮編碼
Accept-Language:瀏覽器當(dāng)前設(shè)置的語(yǔ)言
Connection:瀏覽器與服務(wù)器之間的連接(keep-alive長(zhǎng)連接)
Host:發(fā)出請(qǐng)求所在域
Referer:發(fā)出請(qǐng)求頁(yè)面的URI
User-Agent:瀏覽器用戶代理字段
setRequestHeader(name,value):自定義頭部,放在open之前,send之后

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容