ajax原理及實現

阿新 • • 發佈：2022-04-11

一,ajax是什麼

AJAX全稱(Async Javascript and XML)

即非同步的JavaScript 和XML，是一種建立互動式網頁應用的網頁開發技術，可以在不重新載入整個網頁的情況下，與伺服器交換資料，並且更新部分網頁

Ajax的原理簡單來說通過XmlHttpRequest物件來向伺服器發非同步請求，從伺服器獲得資料，然後用JavaScript來操作DOM而更新頁面

流程圖如下：

二,實現過程

實現 Ajax非同步互動需要伺服器邏輯進行配合，需要完成以下步驟：

建立 Ajax的核心物件 XMLHttpRequest物件
通過 XMLHttpRequest 物件的 open()

方法與服務端建立連線
構建請求所需的資料內容，並通過XMLHttpRequest 物件的 send() 方法傳送給伺服器端
通過 XMLHttpRequest 物件提供的 onreadystatechange 事件監聽伺服器端你的通訊狀態
接受並處理服務端向客戶端響應的資料結果
將處理結果更新到 HTML頁面中

建立XMLHttpRequest物件

通過XMLHttpRequest() 建構函式用於初始化一個 XMLHttpRequest 例項物件

const xhr = new XMLHttpRequest();

與伺服器建立連線

通過 XMLHttpRequest

物件的 open() 方法與伺服器建立連線

xhr.open(method, url, [async][, user][, password])

引數說明：

method：表示當前的請求方式，常見的有GET、POST
url：服務端地址
async：布林值，表示是否非同步執行操作，預設為true
user: 可選的使用者名稱用於認證用途；預設為`null
password: 可選的密碼用於認證用途，預設為`null

給服務端傳送資料

通過 XMLHttpRequest 物件的 send() 方法，將客戶端頁面的資料傳送給服務端

xhr.send([body])

body: 在 XHR 請求中要傳送的資料體，如果不傳遞資料則為 null

如果使用GET請求傳送資料的時候，需要注意如下：

將請求資料新增到open()方法中的url地址中
傳送請求資料中的send()方法中引數設定為null

繫結onreadystatechange事件

onreadystatechange 事件用於監聽伺服器端的通訊狀態，主要監聽的屬性為XMLHttpRequest.readyState ,

關於XMLHttpRequest.readyState屬性有五個狀態，如下圖顯示

只要 readyState屬性值一變化，就會觸發一次 readystatechange 事件

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

三,簡單封裝

// 封裝一個ajax
function ajax(options) {
  return new Promise((resolve, reject) => {
     // 建立XmlHttpRequest物件
     const xhr = new XMLHttpRequest()

     // 初始化引數內容
     options = options || {}
     options.type = (options.type || 'GET').toUpperCase()
     options.dataType = options.dataType || 'json'
     
     // 傳送請求
     if (options.type === 'GET') {
        let url = options.url
        if (Object.keys(options.params).length >= 1) {
          url += "?"
        }
        for (let key in options.params) {
            url += (key+ "=" + options.params[key] + "&")
        }
        url = url.substring(0,url.length-1)
        xhr.open('GET',url, true)
        xhr.send(null)
     }
     else if (options.type === 'POST') {
        xhr.open('POST', options.url, true)
        xhr.send(JSON.stringify(options.data) || {})
     }
      // 接收請求
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            let status = xhr.status
            if (status >= 200 && status < 300) {
              resolve(xhr.response)
            } else {
              reject(status)
            }
        }
      }
  })
  
}

// 測試 介面地址 http://poetry.apiopen.top/sentences （隨機獲取一句詩詞）
ajax({
    type: 'get',
    url: 'http://poetry.apiopen.top/sentences',
    params:{
      type: 1,
      id: '111'
    }
}).then((res) => {
  console.log(res);
})