AJAX全稱(AsyncJavascriptandXML)即異步的JavaScript和XML,，是一種創(chuàng)建交互式網(wǎng)頁應用的網(wǎng)頁開發(fā)技術，可以在不重新加載整個網(wǎng)頁的情況下,，與服務器交換數(shù)據(jù),，并且更新部分網(wǎng)頁

    Ajax的原理簡單來說通過XmlHttpRequest對象來向服務器發(fā)異步請求，從服務器獲得數(shù)據(jù),，然后用JavaScript來操作DOM而更新頁面

    流程圖如下：

    下面舉個例子：

    領導想找小李匯報一下工作,，就委托秘書去叫小李，自己就接著做其他事情，直到秘書告訴他小李已經(jīng)到了,，最后小李跟領導匯報工作

    Ajax請求數(shù)據(jù)流程與“領導想找小李匯報一下工作”類似,，上述秘書就相當于XMLHttpRequest對象，領導相當于瀏覽器,，響應數(shù)據(jù)相當于小李

    瀏覽器可以發(fā)送HTTP請求后,，接著做其他事情，等收到XHR返回來的數(shù)據(jù)再進行操作

    實現(xiàn)過程

    實現(xiàn)Ajax異步交互需要服務器邏輯進行配合,，需要完成以下步驟：

    創(chuàng)建Ajax的核心對象XMLHttpRequest對象

    通過XMLHttpRequest對象的open()方法與服務端建立連接

    構建請求所需的數(shù)據(jù)內容,，并通過XMLHttpRequest對象的send()方法發(fā)送給服務器端

    通過XMLHttpRequest對象提供的onreadystatechange事件監(jiān)聽服務器端你的通信狀態(tài)

    接受并處理服務端向客戶端響應的數(shù)據(jù)結果

    將處理結果更新到HTML頁面中

    創(chuàng)建XMLHttpRequest對象

    通過XMLHttpRequest()構造函數(shù)用于初始化一個XMLHttpRequest實例對象

const xhr = new XMLHttpRequest();1復制代碼類型：[javascript]

    與服務器建立連接

    通過XMLHttpRequest對象的open()方法與服務器建立連接

xhr.open(method, url, [async][, user][, password])1復制代碼類型：[javascript]

    參數(shù)說明：

    method：表示當前的請求方式，常見的有GET,、POST

    url：服務端地址

    async：布爾值,，表示是否異步執(zhí)行操作，默認為true

    user:可選的用戶名用于認證用途,；默認為`null

    password:可選的密碼用于認證用途,，默認為`null

    給服務端發(fā)送數(shù)據(jù)

    通過XMLHttpRequest對象的send()方法，將客戶端頁面的數(shù)據(jù)發(fā)送給服務端

xhr.send([body])1復制代碼類型：[javascript]

    body:在XHR請求中要發(fā)送的數(shù)據(jù)體,，如果不傳遞數(shù)據(jù)則為null

    如果使用GET請求發(fā)送數(shù)據(jù)的時候,，需要注意如下：

    將請求數(shù)據(jù)添加到open()方法中的url地址中

    發(fā)送請求數(shù)據(jù)中的send()方法中參數(shù)設置為null

    綁定onreadystatechange事件

    onreadystatechange事件用于監(jiān)聽服務器端的通信狀態(tài)，主要監(jiān)聽的屬性為XMLHttpRequest.readyState,

    關于XMLHttpRequest.readyState屬性有五個狀態(tài),，如下圖顯示

    只要readyState屬性值一變化,，就會觸發(fā)一次readystatechange事件

    XMLHttpRequest.responseText屬性用于接收服務器端的響應結果

    舉個例子：

const request = new XMLHttpRequest()
request.onreadystatechange = function(e){ if(request.readyState === 4){ // 整個請求過程完畢
  if(request.status >= 200 && request.status <= 300){   console.log(request.responseText) // 服務端返回的結果
  }else if(request.status >=400){   console.log("錯誤信息：" + request.status)
  }
 }
}
request.open('POST','http://xxxx')
request.send()123456789101112復制代碼類型：[javascript]

    封裝

    通過上面對XMLHttpRequest對象的了解，下面來封裝一個簡單的ajax請求

//封裝一個ajax請求function ajax(options) { //創(chuàng)建XMLHttpRequest對象
 const xhr = new XMLHttpRequest() //初始化參數(shù)的內容
 options = options || {}
 options.type = (options.type || 'GET').toUpperCase()
 options.dataType = options.dataType || 'json'
 const params = options.data //發(fā)送請求
 if (options.type === 'GET') {
  xhr.open('GET', options.url + '?' + params, true)
  xhr.send(null)
 } else if (options.type === 'POST') {
  xhr.open('POST', options.url, true)
  xhr.send(params) //接收請求
 xhr.onreadystatechange = function () {  if (xhr.readyState === 4) {   let status = xhr.status   if (status >= 200 && status < 300) {
 options.success && options.success(xhr.responseText, xhr.responseXML)
   } else {
 options.fail && options.fail(status)
   }
  }
 }
}1234567891011121314151617181920212223242526272829303132復制代碼類型：[javascript]

    使用方式如下

ajax({ type: 'post', dataType: 'json', data: {}, url: 'https://xxxx', success: function(text,xml){//請求成功后的回調函數(shù)
  console.log(text)
 }, fail: function(status){////請求失敗后的回調函數(shù)
  console.log(status)
 }
})