AJAX初探

什么是AJAX辞居？

依賴瀏覽器提供的XMLHttpRequest對(duì)象，XMLHttpRequest對(duì)象使瀏覽器可以『發(fā)出HTTP請(qǐng)求與接收HTTP響應(yīng)』蛋勺。實(shí)現(xiàn)在『頁面不刷新的情況下和服務(wù)端進(jìn)行數(shù)據(jù)交互』

AJAX步驟

創(chuàng)建 XMLHttpRequest 實(shí)例

發(fā)出 HTTP 請(qǐng)求

接收服務(wù)器傳回的數(shù)據(jù)

更新網(wǎng)頁數(shù)據(jù)

XMLHttpRequest知識(shí)圖譜

XMLHttpRequest對(duì)象

手寫AJAX實(shí)例

①

var xhr = new XMLHttpRequest()
//第二個(gè)參數(shù)表示一個(gè)資源而不是文件
xhr.open('GET', 'xx', true)
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
        if ((xhr.status >= 200 && xhr.status < 300 )|| xhr.status === 304) {
            console.log(xhr.responseText')
        }else{
            console.log('服務(wù)器異常')
        }
    }
}
var xhr.onerror = function () {
    console.log('服務(wù)器異常')
}
xhr.send()

② 可以使用load事件瓦灶，代替readyStateChange事件，省去『(xhr.readyState === 4)』判斷步驟

var xhr = new XMLHttpRequest()
xhr.open('GET', 'xx', true)
xhr.addEventListener('load', function () {
  console.log(xhr.status)
  if ((xhr.status>=200&& xhr.status < 300) || xhr.status === 304){
    var data = xhr.responseText
    console.log(data)
  }else{
    console.log('服務(wù)器異常')
  }
})
xhr.onerror = function () {
  console.log('服務(wù)器異常')
}
xhr.send()

③ POST方法的使用

var xhr = new XMLHttpRequest()
xhr.open('POST', '/register', true)
xhr.onload = function (e) { 
  if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
  console.log(this.responseText)
  }
}
xhr.ontimeout = function (e) { 
console.log('請(qǐng)求超時(shí)')
}
xhr.onerror = function(e) {
console.log('連接失敗')
}
var data = 'xxx&password=xxx123'
xhr.send(data)

XMLHttpReques部分屬性簡析

readyState XMLHttpReques對(duì)象的狀態(tài)

值	狀態(tài)	描述
`0`	`UNSENT`	`XMLHttpRequest`實(shí)例已經(jīng)生成抱完，但是實(shí)例的`open()`方法還沒有被調(diào)用贼陶。
`1`	`OPENED`	`open()`方法已經(jīng)調(diào)用，但是實(shí)例的`send()`方法還沒有調(diào)用巧娱，可使用`setRequestHeader()`方法碉怔，設(shè)定請(qǐng)求的頭信息。
`2`	`HEADERS_RECEIVED`	表示實(shí)例的『send()』方法已經(jīng)調(diào)用禁添，并且服務(wù)器返回的頭信息和狀態(tài)碼已經(jīng)收到撮胧。
`3`	`LOADING`	正在接收服務(wù)器傳來的`部分`數(shù)據(jù)體。這時(shí)老翘， responseText 屬性已經(jīng)包含部分?jǐn)?shù)據(jù)
`4`	`DONE`	服務(wù)器返回的數(shù)據(jù)已經(jīng)完全接收芹啥，或者本次接收已經(jīng)失敗。

XMLHttpRequest.onreadystatechange

readyState屬性變化發(fā)生變回時(shí)铺峭，就會(huì)觸發(fā)readystatechange(全小寫)事件

var xhr = new XMLHttpRequest()
xhr.open('GET', '/ajax.json', true)
xhr.onreadystatechange = fucntion () {
if (xhr.readyState === 4) {
  if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
    console.log(xhr.responseText)
    } else {
    console.log('服務(wù)器異常')
    }
  }
}
xhr.send()

??不能用下面的代碼代替上例中 xhr.readyState xhr.status的判斷,比如當(dāng) status的值為202 304也是可行的

if (xhr.readyState === 4 && xhr.status === 200) {
  console.log(responseText)
}

(『abort()』方法墓怀，終止XMLHttpRequest請(qǐng)求，也會(huì)造成readyState屬性變化卫键，導(dǎo)致調(diào)用XMLHttpRequest.onreadystatechange屬性）

XMLHttpRequest.status 與 XMLHttpRequest.statusText

返回一個(gè)整數(shù)傀履，表示服務(wù)器回應(yīng)的Http狀態(tài)碼,請(qǐng)求發(fā)出之前，該屬性為0

XMLHttpRequest.statusText返回一個(gè)字符串莉炉，表示服務(wù)器發(fā)送的狀態(tài)提示钓账。如果請(qǐng)求的狀態(tài)readyState的值為『"0"』或者『"1"』，則這個(gè)屬性的值將會(huì)是一個(gè)空字符串呢袱。

XMLHttpRequest.status 與 XMLHttpRequest.statusText表

status	statusText
`200`	OK官扣，訪問正常
`301`	Moved Permanently，永久移動(dòng)
`302`	Moved temporarily羞福，暫時(shí)移動(dòng)
`304`	Not Modified惕蹄，未修改
`307`	Temporary Redirect，暫時(shí)重定向
`401`	Unauthorized，未授權(quán)
`403`	Forbidden卖陵，禁止訪問
`404`	Not Found遭顶，未發(fā)現(xiàn)指定網(wǎng)址
`500`	Internal Server Error，服務(wù)器發(fā)生錯(cuò)誤

if (xhr.readyState === 4) {
  if ((xhr.status >== 200 && xhr.status < 300) ||(xhr.status === 304)) {
    // 2xx和304的狀態(tài)碼泪蔫，表示服務(wù)器返回是正常狀態(tài)
    //處理服務(wù)器的返回?cái)?shù)據(jù)
  }else{
    //出錯(cuò)
  }
}

XMLHttpRequest.response

表示服務(wù)器返回的數(shù)據(jù)體(即HTTP回應(yīng)的body部分),在readyState === 3的階段棒旗，請(qǐng)求沒有結(jié)束之前，response屬性包含服務(wù)器已經(jīng)返回的部分?jǐn)?shù)據(jù)(只讀)

XMLHttpRequest.responseType(默認(rèn)值為空字符等同于 text)

屬性是一個(gè)字符串撩荣，表示服務(wù)器返回?cái)?shù)據(jù)XMLHttpRequest.response的類型(可寫),可以在『調(diào)用open()方法之后』铣揉、『調(diào)用send()方法之前』，設(shè)置這個(gè)屬性的值餐曹，告訴服務(wù)器返回指定類型的數(shù)據(jù)

XMLHttpRequest.responseText

返回從服務(wù)器接收到的字符串(只讀)逛拱，只有HTTP「請(qǐng)求完成接收」以后，該屬性才會(huì)包含完整的數(shù)據(jù)

var xhr = new XMLHttpRequest()
xhr.open('GET', '/login', true)

xhr.responseType = 'text'
xhr.onload = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText)
   }
}
xhr.send(null)

XMLHttpRequest.timeout(只能在異步的情況下使用台猴，及open()的第三個(gè)屬性`async: true`)

返回一個(gè)整數(shù)朽合，表示多少毫秒后，如果請(qǐng)求仍然沒有得到結(jié)果饱狂，就會(huì)自動(dòng)終止曹步。如默認(rèn)值為 0，無時(shí)間限制

『XMLHttpRequestEventTarget.ontimeout』屬性用于設(shè)置一個(gè)監(jiān)聽函數(shù)休讳，如果發(fā)生timeout事件讲婚，就會(huì)執(zhí)行這個(gè)監(jiān)聽函數(shù)。

實(shí)例

var xhr = new XMLHttpRequest()
xhr.open('GET', '/hello.json', true)

xhr.timeout = 3*1000
// 設(shè)定的超時(shí)時(shí)間為3000毫秒

xhr.onload = function (e) { 
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
  // 請(qǐng)求成功
  console.log(this.responseText)
}
}
xhe.ontimeout = function (e) {
  // XMLHttpRequest請(qǐng)求已經(jīng)超時(shí)
}

xhr.send(null)

XMLHttpReques部分方法簡析

使用open()方法發(fā)出HTTP請(qǐng)求

xhr.open(method, url, async, user, password)衍腥，使用open()方法的ajax請(qǐng)求磺樱，再次使用這個(gè)方法纳猫，等同于調(diào)用abort(),會(huì)終止請(qǐng)求

參數(shù)	值
`method`	使用的HTTP方法婆咸，`GET`、`POST`芜辕、`PUT`尚骄、`DELETE`
`url`	發(fā)送請(qǐng)求的URL
`async`	布爾參數(shù)，默認(rèn)為`true`異步
`user`	用于認(rèn)證的用戶名侵续，默認(rèn)為`null`
`password`	用于認(rèn)證的密碼倔丈，默認(rèn)為`null`

XMLHttpRequest.setRequestHeader()

設(shè)置瀏覽器發(fā)送設(shè)置的HTTP請(qǐng)求頭信息，必須在『open()之后 send()之前』状蜗。如果多次對(duì)同一個(gè)請(qǐng)求頭賦值需五，只會(huì)生成一個(gè)『合并了多個(gè)值的請(qǐng)求頭』。

該方法接受兩個(gè)參數(shù)轧坎。第一個(gè)參數(shù)是字符串宏邮，表示頭信息的字段名，第二個(gè)參數(shù)是字段值。

var xhr = new XMLHttpRequest()

xhr.setRequestHeader('Content-Type', 'application/json')

xhr.onload = function () {
  // 請(qǐng)求成功
}

xhr.send()

XMLHttpRequest.send()

發(fā)送Http請(qǐng)求蜜氨，默認(rèn)為異步

XMLHttpRequest.send()方法接受一個(gè)可選的參數(shù),GET方法下為『null』械筛，POST為設(shè)定的具體信息體，如下例的data

var xhr = new XMLHttpRequest()
xhr.open('POST', '/login', true)
xhr.onload = function (e) { 
     if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
        console.log(this.responseText)
      }
}
xhr.onerror = function (e) {
  console.log('連接失敗')
}
// send(),接受一個(gè)參數(shù)data
var data = 'username=YYP&password=123321'
xhr.send(data)

XMLHttpRequest.absort()

來終止已經(jīng)發(fā)出的 HTTP 請(qǐng)求飒炎。調(diào)用這個(gè)方法以后埋哟，readyState屬性變?yōu)?，status屬性變?yōu)?郎汪。

XMLHttpRequest 實(shí)例的事件

load事件 表示服務(wù)器傳來的數(shù)據(jù)請(qǐng)求完畢
error事件 表示事件請(qǐng)求出錯(cuò)
abort事件 表示事件請(qǐng)求被終斷

參考：

XMLHttpRequest 對(duì)象-阮一峰JavaScript教程

XMLHttpRequest-MDN

XMLHttpRequest使用詳解

版權(quán)聲明：本文為博主原創(chuàng)文章赤赊，未經(jīng)博主許可不得轉(zhuǎn)載