談談 ajax 工作過程那點事

找抽的小陀螺發表於2017-10-14

今天看一個面試題 原生Ajax工作原理以及實現過程

  • ajax:
    ajax 的全稱是Asynchronous JavaScript and XML（非同步的JavaScript 和 XML）
    Ajax 相當於在使用者和伺服器之間加了一箇中間層 使使用者操作和伺服器響應非同步化 之前傳統的是 一個請求 要使用者把所有資料都提交個伺服器 其實一些資料驗證和資料處理等是可以交給Ajax引擎自來來做 只要確定需要從伺服器讀取新資料再由Ajax引擎代為向伺服器提交請求

  • ajax 區域性重新整理
    ajax利用XMLHttpRequest 物件與伺服器通訊 從伺服器獲得資料 然後由js操作dom來更新頁面

  • XMLHttpRequest屬性

    1. onreadystatechange 每次狀態改變時候觸發事件
    2. readyState 表示物件狀態
    3. responseText 伺服器響應文字內容
    4. Status 伺服器返回的http狀態碼
    5. statusText 伺服器返回狀態文字資訊
  • 請求伺服器過程的5種狀態
    1. 0 表示請求伺服器之前
    2. 1 表示開啟 open() 方法
    3. 2 表示向伺服器傳送 send方法
    4. 3 表示伺服器響應過程還沒有結束
    5. 4 表示伺服器響應完成
  • ajax 優點
    1. 頁面區域性重新整理 在頁面內與伺服器通訊
    2. 使用非同步方式與伺服器通訊 不需要打斷使用者操作
    3. 伺服器的一些負擔轉到客戶端
    4. 客戶端不用從後臺拉取所有資料 按需取資料
  • ajax 缺點
    ajax幹掉了back按鈕 對瀏覽器後退機制破壞

  • ajax 請求過程

    1. 建立XMLHtppRequest 物件

      Ie7以及以上都支援原生XHR物件 直接可以 new XMLHttpRequest()
      Ie6之前的 XHR是通過ActiveX物件來實現的 new ActiveXObject('Microsoft.XMLHTTP')

    2. 連線服務

      open() 函式三個引數 請求方式 請求地址 是否非同步

    3. 傳送資料

      open() 傳送資料 get post 將資料提交到伺服器

    4. 接收

      接收到響應後 響應資料會自動填充XHR物件
      responseText 響應放回主體內容 為字串型別
      responseXML 響應型別 text/xml application/xml
      status 響應HTTP狀態嗎
      statusText HTTP狀態碼說明

  • code 封裝

newajax({
    url: 'XXX',
    type: 'GET'
    dataType: 'json'
    success: function (response, xml){

    },
    fail: function (response, xml){

    }
})
 function newajax(options) {
     if (options.data) {
         var body = options.data
     } else {
         var body = ''
     }
     // 按照上述步驟來
     //1. 建立XMLHttpRequest
     if(window.XMLHttpRequest) {
        var xhr = new XMLHttpRequest()
     } else {
        var xhr = new ActiveXOject('Microsoft.XMLTHHP')
     }
     // 2.連結傳送
     if(options.type == 'GET') {
         xhr.open('GET', options.url, true)
         xhr.send(null)  //content 不傳送資料
     } else if (options.type == 'POST') {
        xhr.open('POST', options.url, true)
        xhr.setRequestHeader("Content-Type", "XXX"); //設定內容型別
        xhr.send(body)
     }

     //接收  onreadystatechange 處理事件
     xhr.onreadystatechange = function  () {
        console.log(xhr.readyState)
         if(xhr.readyState == 4) {
             var status = xhr.status
             if(status >=200 && status<300) {
                 options.success(xhr.responseText, xhr.responseXML)
             } else {
                 options.fail(xhr.responseText, xhr.responseXML)
             }
         }
     }
 }複製程式碼

就這些了 最核心的就是XHR物件 裡面一個屬性 可以去了解下

參考閱讀:
Ajax的工作原理

相關文章