Ajax的請求過程

1.創建XMLHttpResquest實例對象

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

3.可以按需求來設置request.setRequestHeader來設置請求頭

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

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

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

5.Request.send()，如果是post，里面要設置一個string來放置post的參數，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 = (()=>{

// 請求結束并且成功

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)

}

復制代碼

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。