Ajax的請求過程

1.創(chuàng)建XMLHttpResquest實例對象

2.Resquest.open(),三個參數(shù)分別是(method，url，async)

3.可以按需求來設(shè)置request.setRequestHeader來設(shè)置請求頭

3.如果Resquest.open()的async參數(shù)是true(默認(rèn)是true)，那么就要定義事件監(jiān)聽器onreadystatechange,

他可以在事件監(jiān)聽器的函數(shù)內(nèi)以檢測request.readyState請求狀態(tài)，request.status響應(yīng)狀態(tài)碼，request.getResponseHeader('Content-Type')查找Content-Type頭來驗證響應(yīng)主體是不是期望的類型。如果都通過callback返回request.responseText

4.如果Resquest.opne()的第三個參數(shù)async的值是false，那么表示就是同步的，就不需要事件處理程序了，不用設(shè)置request.onreadystatechange。

5.Request.send()，如果是post，里面要設(shè)置一個string來放置post的參數(shù)，get則不用。

下面來分別寫一個post和get的例子

// 異步post

function postExp(url,msg,callback){

var request = new XMLHttpRequest()

request.open('post',url)

request.setRequestHeader('Content-type','text/plain;charseUTF-8')

request.onreadystatechange = (()=>{

if(request.readyState === 4 && request.status === 200){

callback('成功')

}else{

callback('失敗了')

}

})

request.send(msg)

}

// 異步get

function getExp(url,callback){

var request = new XMLHttpRequest()

request.open('get',url)

request.onreadystatechange = (()=>{

// 請求結(jié)束并且成功

if(request.readyState === 4 && request.status === 200) {

var type = request.getResponseHeader('Content-type')

if(type.indexOf('xml') != -1 && request.responseXML){

callback(request.responseXML)

}else if (type == 'aplication/json'){

callback(JSON.parse(request.responseText))

}else {

callback(request.responseText)

}

}

})

request.send(null)

}

復(fù)制代碼

總結(jié)

以上是生活随笔為你收集整理的ajax清请求过程,JS深入基础之Ajax的请求过程的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。