前端校招準(zhǔn)備--Ajax原理及其實(shí)現(xiàn)

binaryTree 發(fā)布于2019-08-23 13:45 / 930人閱讀

摘要：實(shí)現(xiàn)局部刷新的原理是通過(guò)對(duì)象來(lái)向服務(wù)器發(fā)送異步請(qǐng)求，通過(guò)操作相應(yīng)的來(lái)更新頁(yè)面。在以及都內(nèi)建了對(duì)象，但是和是使用對(duì)象。參考文章同源策略及其規(guī)避方法詳解技術(shù)原理

前言

?我們?cè)谡?qǐng)求數(shù)據(jù)的時(shí)候，往往會(huì)使用到ajax，而且一般都是通過(guò)引入jQuery庫(kù)，再使用。但是，如果我們想直接使用ajax怎么辦呢，這個(gè)時(shí)候就可以自己寫(xiě)一個(gè)ajax，剛一聽(tīng)可能會(huì)覺(jué)得很難，但是看完我的文章后你肯定就會(huì)覺(jué)得原來(lái)這么簡(jiǎn)單~

正文 Ajax介紹

?想象一個(gè)場(chǎng)景，你在淘寶上看中一件物品，想加入購(gòu)物車(chē)，但是呢，你點(diǎn)擊添加購(gòu)物車(chē)后，整個(gè)頁(yè)面刷新了，你之前看的物品記錄也沒(méi)有了，這樣是不是很煩（這是因?yàn)闆](méi)有使用ajax更新數(shù)據(jù)時(shí)，會(huì)請(qǐng)求整個(gè)頁(yè)面的數(shù)據(jù)，重新渲染）。

?碰到這種情況，ajax就出場(chǎng)了，有了它，我們可以在點(diǎn)擊添加商品后，只更新購(gòu)物車(chē)中的物品數(shù)量就可以了，根本就不需要更新整個(gè)頁(yè)面，用官方一點(diǎn)的話來(lái)說(shuō)，就是可以控制網(wǎng)頁(yè)的局部刷新。

?ajax實(shí)現(xiàn)局部刷新的原理是通過(guò)XmlHttpRequest對(duì)象來(lái)向服務(wù)器發(fā)送異步請(qǐng)求，通過(guò)js操作相應(yīng)的DOM來(lái)更新頁(yè)面。

Ajax實(shí)現(xiàn)過(guò)程

?ajax實(shí)現(xiàn)異步請(qǐng)求的過(guò)程可以分為以下幾個(gè)步驟：

創(chuàng)建XmlHttpRequest對(duì)象

初始化參數(shù)

發(fā)送信息

接收信息

?從上面的介紹可以看出，ajax請(qǐng)求的核心在于XmlHttpRequest對(duì)象,所以了解了XmlHttpRequest的機(jī)制就相當(dāng)于知道了ajax的執(zhí)行過(guò)程。

?在Chrome,Firefox,Opera,Safari以及IE7+都內(nèi)建了XmlHttpRequest對(duì)象，但是IE5和IE6是使用ActiveX對(duì)象。

?方法：

abort(): 取消現(xiàn)在的連接，可以將XmlHttpRequest對(duì)象的狀態(tài)值重置為0

open(): 初始化http的請(qǐng)求參數(shù)，但是不發(fā)送請(qǐng)求

send(): 發(fā)送http請(qǐng)求

setRequestHeader()：給一個(gè)打開(kāi)但是未發(fā)送的請(qǐng)求設(shè)置參數(shù)

?屬性：

onreadystateChange: 狀態(tài)改變觸發(fā)的回調(diào)函數(shù)

reposeText: 從服務(wù)器返回?cái)?shù)據(jù)的字符串格式

reposeXML: 從服務(wù)器返回兼容DOM的文檔數(shù)據(jù)對(duì)象

status: 從服務(wù)器返回的狀態(tài)碼

statusText: 伴隨狀態(tài)碼返回的信息，如status=200時(shí)，statusText="OK"

readyState: 對(duì)象狀態(tài)值

  0表示XmlHttpRequest對(duì)象已創(chuàng)建或者已經(jīng)被abort()方法重置
  1表示對(duì)象已經(jīng)初始化，但是請(qǐng)求還未發(fā)送（調(diào)用了open()方法，send()方法還沒(méi)有調(diào)用）
  2表示請(qǐng)求已經(jīng)發(fā)送，沒(méi)有接收到響應(yīng)信息（sed()方法已經(jīng)被調(diào)用）
  3表示已經(jīng)接收到了所有的響應(yīng)頭，響應(yīng)體開(kāi)始接收但未完成
  4表示響應(yīng)信息已經(jīng)全部接收

問(wèn)題: http狀態(tài)碼（status）和對(duì)象的狀態(tài)值(readyState)有什么區(qū)別？

回答：http狀態(tài)碼是指服務(wù)器接收到請(qǐng)求后返回的一個(gè)狀態(tài)碼，其中比較常見(jiàn)的是200（請(qǐng)求成功），404（請(qǐng)求失敗），500（服務(wù)器發(fā)生錯(cuò)誤），更多參考這里；而對(duì)象狀態(tài)值，是針對(duì)XmlHttpRequest對(duì)象的，前面已經(jīng)解釋了每個(gè)狀態(tài)值代表的含義；它們倆之間的聯(lián)系就是只有當(dāng)請(qǐng)求過(guò)程全部完成后，才可以根據(jù)服務(wù)器返回的狀態(tài)碼調(diào)用不同的函數(shù)。

Ajax請(qǐng)求過(guò)程的代碼實(shí)現(xiàn)

    //封裝一個(gè)ajax請(qǐng)求
    function ajax(options){
      //創(chuàng)建XMLHttpRequest對(duì)象
      if(window.XMLHttpRequest){
        var xhr = new XMLHttpRequest
      }else{
        var xhr = new ActiveXObject()
      }

      //初始化參數(shù)的內(nèi)容
      options = options ||{}
      options.type = (options.type ||"GET").toUpperCase()
      options.dataType = options.dataType || "json"
      var params = options.data

      //發(fā)送請(qǐng)求
      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")//規(guī)定輸出為鍵值對(duì)的形式
      }

      //接收請(qǐng)求
      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){//請(qǐng)求成功后的回調(diào)函數(shù)
        console.log(text)
      },
      fail: function(status){////請(qǐng)求失敗后的回調(diào)函數(shù)
        console.log(status)
      }
    })

總結(jié)

?其實(shí)與ajax請(qǐng)求相關(guān)的知識(shí)點(diǎn)很多，比如它的核心XmlHttpRequest對(duì)象，跨域問(wèn)題等。由于本文中的重點(diǎn)在于手動(dòng)實(shí)現(xiàn)ajax請(qǐng)求，所以這些內(nèi)容暫時(shí)先不涉及，不過(guò)我會(huì)在文后將參考鏈接奉上，感興趣的可以看看。

參考文章

同源策略及其規(guī)避方法
XmlHttpRequest詳解
ajax技術(shù)原理