前端校招準備--Ajax原理及其實現

前言

 咱們在請求數據的時候，每每會使用到ajax，並且通常都是經過引入jQuery庫，再使用。可是，若是咱們想直接使用ajax怎麼辦呢，這個時候就能夠本身寫一個ajax，剛一聽可能會以爲很難，可是看完個人文章後你確定就會以爲原來這麼簡單~

正文

Ajax介紹

 想象一個場景，你在淘寶上看中一件物品，想加入購物車，可是呢，你點擊添加購物車後，整個頁面刷新了，你以前看的物品記錄也沒有了，這樣是否是很煩（這是由於沒有使用ajax更新數據時，會請求整個頁面的數據，從新渲染）。

 碰到這種狀況，ajax就出場了，有了它，咱們能夠在點擊添加商品後，只更新購物車中的物品數量就能夠了，根本就不須要更新整個頁面，用官方一點的話來講，就是能夠控制網頁的局部刷新。

 ajax實現局部刷新的原理是經過XmlHttpRequest對象來向服務器發送異步請求，經過js操做相應的DOM來更新頁面。

Ajax實現過程

 ajax實現異步請求的過程能夠分爲如下幾個步驟：

1. 建立XmlHttpRequest對象
2. 初始化參數
3. 發送信息
4. 接收信息

 從上面的介紹能夠看出，ajax請求的核心在於XmlHttpRequest對象,因此瞭解了XmlHttpRequest的機制就至關於知道了ajax的執行過程。

 在Chrome,Firefox,Opera,Safari以及IE7+都內建了XmlHttpRequest對象，可是IE5和IE6是使用ActiveX對象。

 方法：

• abort(): 取消如今的鏈接，能夠將XmlHttpRequest對象的狀態值重置爲0
• open(): 初始化http的請求參數，可是不發送請求
• send(): 發送http請求
• setRequestHeader()：給一個打開可是未發送的請求設置參數

 屬性：

• onreadystateChange: 狀態改變觸發的回調函數
• reposeText: 從服務器返回數據的字符串格式
• reposeXML: 從服務器返回兼容DOM的文檔數據對象
• status: 從服務器返回的狀態碼
• statusText: 伴隨狀態碼返回的信息，如status=200時，statusText='OK'

• readyState: 對象狀態值

  0表示XmlHttpRequest對象已建立或者已經被abort()方法重置
    1表示對象已經初始化，可是請求還未發送（調用了open()方法，send()方法尚未調用）
    2表示請求已經發送，沒有接收到響應信息（sed()方法已經被調用）
    3表示已經接收到了全部的響應頭，響應體開始接收但未完成
    4表示響應信息已經所有接收

問題: http狀態碼（status）和對象的狀態值(readyState)有什麼區別？

回答：http狀態碼是指服務器接收到請求後返回的一個狀態碼，其中比較常見的是200（請求成功），404（請求失敗），500（服務器發生錯誤），更多參考這裏；而對象狀態值，是針對XmlHttpRequest對象的，前面已經解釋了每一個狀態值表明的含義；它們倆之間的聯繫就是隻有當請求過程所有完成後，才能夠根據服務器返回的狀態碼調用不一樣的函數。

Ajax請求過程的代碼實現

//封裝一個ajax請求
    function ajax(options){
      //建立XMLHttpRequest對象
      if(window.XMLHttpRequest){
        var xhr = new XMLHttpRequest
      }else{
        var xhr = new ActiveXObject()
      }

      //初始化參數的內容
      options = options ||{}
      options.type = (options.type ||'GET').toUpperCase()
      options.dataType = options.dataType || 'json'
      var params = options.data

      //發送請求
      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.setRequestHeader('Content-Type', "application/x-www-form-urlencoded")//規定輸出爲鍵值對的形式
      }

      //接收請求
      xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
          var status = xhr.status
          if (status >= 200 && status < 300){
            options.success && options.success(xhr.responseText,xhr.responseXML)
          }else{
            options.fail &&options.fail(status)
          }
        }
      }  
    }

    ajax({
      type: 'post',
      dataType: 'json',
      data: {},
      url: 'https://www.easy-mock.com/mock/5bbd92e0004caf3b6a68db6f/example/api/countEventsLevel',
      success: function(text,xml){//請求成功後的回調函數
        console.log(text)
      },
      fail: function(status){////請求失敗後的回調函數
        console.log(status)
      }
    })

總結

 其實與ajax請求相關的知識點不少，好比它的核心XmlHttpRequest對象，跨域問題等。因爲本文中的重點在於手動實現ajax請求，因此這些內容暫時先不涉及，不過我會在文後將參考連接奉上，感興趣的能夠看看。

參考文章

同源策略及其規避方法
XmlHttpRequest詳解
ajax技術原理